acbrent25
9/4/2017 - 5:13 PM
NY Times Article Search App
NY Times Article Search App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New York Times Search</title>
<!-- Bootswatch Styling for Improving the Aesthetics -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/flatly/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 panel length -->
<style>
.panel-body a {
word-break: break-all;
}
</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 panel is for handling the search parameters -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><strong><i class="fa fa-list-alt"></i> Search Parameters</strong></h3>
</div>
<div class="panel-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 class="form-control" id="num-records-select">
<option 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 type="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 panel will initially be made up of a panel and wells for each of the articles retrieved -->
<div class="panel panel-primary">
<!-- Panel Heading for the retrieved articles box -->
<div class="panel-heading">
<h3 class="panel-title"><strong><i class="fa fa-table"></i> Top Articles</strong></h3>
</div>
<!-- This main panel will hold each of the resulting articles -->
<div class="panel-body" id="well-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 by Ahmed 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>
<!-- Code to the JavaScript File -->
<script src="NYTCode.js"></script>
</body>
</html>// SETUP VARIABLES
// ==========================================================
// This variable will be pre-programmed with our authentication key
// (the one we received when we registered)
var authKey = "b9f91d369ff59547cd47b931d8cbc56b:0:74623931";
// These variables will hold the results we get from the user's inputs via HTML
var searchTerm = "";
var numResults = 0;
var startYear = 0;
var endYear = 0;
// queryURLBase is the start of our API endpoint. The searchTerm will be appended to this when
// the user hits the search button
var queryURLBase = "https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=" +
authKey + "&q=";
// Counter to keep track of article numbers as they come in
var articleCounter = 0;
// FUNCTIONS
// ==========================================================
// This runQuery function expects two parameters:
// (the number of articles to show and the final URL to download data from)
function runQuery(numArticles, queryURL) {
// The AJAX function uses the queryURL and GETS the JSON data associated with it.
// The data then gets stored in the variable called: "NYTData"
$.ajax({
url: queryURL,
method: "GET"
}).done(function(NYTData) {
// Logging the URL so we have access to it for troubleshooting
console.log("------------------------------------");
console.log("URL: " + queryURL);
console.log("------------------------------------");
// Log the NYTData to console, where it will show up as an object
console.log(NYTData);
console.log("------------------------------------");
// Loop through and provide the correct number of articles
for (var i = 0; i < numArticles; i++) {
// Add to the Article Counter (to make sure we show the right number)
articleCounter++;
// Create the HTML well (section) and add the article content for each
var wellSection = $("<div>");
wellSection.addClass("well");
wellSection.attr("id", "article-well-" + articleCounter);
$("#well-section").append(wellSection);
// Confirm that the specific JSON for the article isn't missing any details
// If the article has a headline include the headline in the HTML
if (NYTData.response.docs[i].headline !== "null") {
$("#article-well-" + articleCounter)
.append(
"<h3 class='articleHeadline'><span class='label label-primary'>" +
articleCounter + "</span><strong> " +
NYTData.response.docs[i].headline.main + "</strong></h3>"
);
// Log the first article's headline to console
console.log(NYTData.response.docs[i].headline.main);
}
// If the article has a byline include the headline in the HTML
if (NYTData.response.docs[i].byline && NYTData.response.docs[i].byline.original) {
$("#article-well-" + articleCounter)
.append("<h5>" + NYTData.response.docs[i].byline.original + "</h5>");
// Log the first article's Author to console.
console.log(NYTData.response.docs[i].byline.original);
}
// Then display the remaining fields in the HTML (Section Name, Date, URL)
$("#articleWell-" + articleCounter)
.append("<h5>Section: " + NYTData.response.docs[i].section_name + "</h5>");
$("#articleWell-" + articleCounter)
.append("<h5>" + NYTData.response.docs[i].pub_date + "</h5>");
$("#articleWell-" + articleCounter)
.append(
"<a href='" + NYTData.response.docs[i].web_url + "'>" +
NYTData.response.docs[i].web_url + "</a>"
);
// Log the remaining fields to console as well
console.log(NYTData.response.docs[i].pub_date);
console.log(NYTData.response.docs[i].section_name);
console.log(NYTData.response.docs[i].web_url);
}
});
}
// METHODS
// ==========================================================
// 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).
event.preventDefault();
// Initially sets the articleCounter to 0
articleCounter = 0;
// Empties the region associated with the articles
$("#well-section").empty();
// Grabbing text the user typed into the search input
searchTerm = $("#search-term").val().trim();
var queryURL = queryURLBase + searchTerm;
// Number of results the user would like displayed
numResults = $("#num-records-select").val();
// Start Year
startYear = $("#start-year").val().trim();
// End Year
endYear = $("#end-year").val().trim();
// If the user provides a startYear -- the startYear will be included in the queryURL
if (parseInt(startYear)) {
queryURL = queryURL + "&begin_date=" + startYear + "0101";
}
// If the user provides a startYear -- the endYear will be included in the queryURL
if (parseInt(endYear)) {
queryURL = queryURL + "&end_date=" + endYear + "0101";
}
// Then we will pass the final queryURL and the number of results to
// include to the runQuery function
runQuery(numResults, queryURL);
});
// This button clears the top articles section
$("#clear-all").on("click", function() {
articleCounter = 0;
$("#well-section").empty();
});