06. News Search 👩🎓👨🎓
index.html
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<title>New York Times Search</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<!-- Font Awesome CSS Icons (For cool glyphicons) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- Style to fix the issue of text extending past card length -->
<style>
.card-body a {
word-break: break-all;
}
.articleHeadline {
line-height: 1.5;
}
</style>
</head>
<body>
<!-- Main Bootstrap Search -->
<div class="container">
<!-- Jumbotron for Title -->
<div class="jumbotron" style="background-color: #20315A ; color: white;">
<h1 class="text-center">
<strong>
<i class="fa fa-newspaper-o"></i> New York Times Search</strong>
</h1>
</div>
<!-- Row for Searching New York Times -->
<div class="row">
<div class="col-sm-12">
<br>
<!-- First card is for handling the search parameters -->
<div class="card">
<div class="card-header">
<strong>
<i class="fa fa-list-alt"></i> Search Parameters</strong>
</div>
<div class="card-body">
<!-- Here we create an HTML Form for handling the inputs-->
<form role="form">
<!-- Here we create the text box for capturing the search term-->
<div class="form-group">
<label for="search">Search Term:</label>
<input type="text" class="form-control" id="search-term">
</div>
<!-- Here we capture the number of records that the user wants to retrieve -->
<div class="form-group">
<label for="pwd">Number of Records to Retrieve:</label>
<select id="article-count" class="custom-select" aria-labelledby="dropdownMenuButton">
<option selected value="1">1</option>
<!-- Setting the option for 5 as default -->
<option value="5" selected>5</option>
<option value="10">10</option>
</select>
</div>
<!-- Here we capture the Start Year Parameter-->
<div class="form-group">
<label for="start-year">Start Year (Optional):</label>
<input type="text" class="form-control" id="start-year">
</div>
<!-- Here we capture the End Year Parameter -->
<div class="form-group">
<label for="end-year">End Year (Optional):</label>
<input type="text" class="form-control" id="end-year">
</div>
<!-- Here we have our final submit button -->
<button type="submit" class="btn btn-default" id="run-search">
<i class="fa fa-search"></i> Search</button>
<button class="btn btn-default" id="clear-all">
<i class="fa fa-trash"></i> Clear Results</button>
</form>
</div>
</div>
</div>
</div>
<!-- This row will handle all of the retrieved articles -->
<div class="row">
<div class="col-sm-12">
<br>
<!-- This card will initially be made up of a card and wells for each of the articles retrieved -->
<div class="card">
<!-- card Heading for the retrieved articles box -->
<div class="card-header">
<strong>
<i class="fa fa-table"></i> Top Articles</strong>
</div>
<!-- This main card will hold each of the resulting articles -->
<div class="card-body" id="article-section">
</div>
</div>
</div>
</div>
<!-- Footer Region -->
<div class="row">
<div class="col-sm-12">
<!-- Line Break followed by closing -->
<hr>
<h5 class="text-center">
<small>Made with lots and lots of
<i class="fa fa-heart"></i>
</small>
</h5>
</div>
</div>
</div>
<!-- jQuery JS -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<!-- Code to the JavaScript File -->
<script src="script.js"></script>
</body>
</html>
script.js
/**
* pulls information from the form and build the query URL
* @returns {string} URL for NYT API based on form inputs
*/
function buildQueryURL() {
// queryURL is the url we'll use to query the API
var queryURL = "https://api.nytimes.com/svc/search/v2/articlesearch.json?";
// Begin building an object to contain our API call's query parameters
// Set the API key
var queryParams = { "api-key": "R1a31F4tBjCUaM2ho8GtIFsrSdtXt30M" };
// Grab text the user typed into the search input, add to the queryParams object
queryParams.q = $("#search-term")
.val()
.trim();
// If the user provides a startYear, include it in the queryParams object
var startYear = $("#start-year")
.val()
.trim();
if (parseInt(startYear)) {
queryParams.begin_date = startYear + "0101";
}
// If the user provides an endYear, include it in the queryParams object
var endYear = $("#end-year")
.val()
.trim();
if (parseInt(endYear)) {
queryParams.end_date = endYear + "0101";
}
// Logging the URL so we have access to it for troubleshooting
console.log("---------------\nURL: " + queryURL + "\n---------------");
console.log(queryURL + $.param(queryParams));
return queryURL + $.param(queryParams);
}
/**
* takes API data (JSON/object) and turns it into elements on the page
* @param {object} NYTData - object containing NYT API data
*/
function updatePage(NYTData) {
// Get from the form the number of results to display
// API doesn't have a "limit" parameter, so we have to do this ourselves
var numArticles = $("#article-count").val();
// Log the NYTData to console, where it will show up as an object
console.log(NYTData);
console.log("------------------------------------");
// Loop through and build elements for the defined number of articles
for (var i = 0; i < numArticles; i++) {
// Get specific article info for current index
var article = NYTData.response.docs[i];
// Increase the articleCount (track article # - starting at 1)
var articleCount = i + 1;
// Create the list group to contain the articles and add the article content for each
var $articleList = $("<ul>");
$articleList.addClass("list-group");
// Add the newly created element to the DOM
$("#article-section").append($articleList);
// If the article has a headline, log and append to $articleList
var headline = article.headline;
var $articleListItem = $("<li class='list-group-item articleHeadline'>");
if (headline && headline.main) {
console.log(headline.main);
$articleListItem.append(
"<span class='label label-primary'>" +
articleCount +
"</span>" +
"<h2> " +
headline.main +
"</h2>"
);
}
// If the article has a byline, log and append to $articleList
var byline = article.byline;
if (byline && byline.original) {
console.log(byline.original);
$articleListItem.append("<h3>" + byline.original + "</h3>");
}
// Log section, and append to document if exists
var section = article.section_name;
console.log(article.section_name);
if (section) {
$articleListItem.append("<h5>Section: " + section + "</h5>");
}
// Log published date, and append to document if exists
var pubDate = article.pub_date;
console.log(article.pub_date);
if (pubDate) {
$articleListItem.append("<h5>" + article.pub_date + "</h5>");
}
// Append and log url
$articleListItem.append("<a href='" + article.web_url + "'>" + article.web_url + "</a>");
console.log(article.web_url);
// Append the article
$articleList.append($articleListItem);
}
}
// Function to empty out the articles
function clear() {
$("#article-section").empty();
}
// CLICK HANDLERS
// ==========================================================
// .on("click") function associated with the Search Button
$("#run-search").on("click", function(event) {
// This line allows us to take advantage of the HTML "submit" property
// This way we can hit enter on the keyboard and it registers the search
// (in addition to clicks). Prevents the page from reloading on form submit.
event.preventDefault();
// Empty the region associated with the articles
clear();
// Build the query URL for the ajax request to the NYT API
var queryURL = buildQueryURL();
// Make the AJAX request to the API - GETs the JSON data at the queryURL.
// The data then gets passed as an argument to the updatePage function
$.ajax({
url: queryURL,
method: "GET"
}).then(updatePage);
});
// .on("click") function associated with the clear button
$("#clear-all").on("click", clear);