HTML: <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>
ID: 3900668 • Letter: H
Question
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BIMD343 Final Exam</title>
<link rel='stylesheet prefetch' href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- YOUR CODE GOES HERE -->
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</html>
JS:
// Shorthand for $( document ).ready()
$(function() {
// ============== API DATA STRUCTURE ==================
var api_data = {
base_url: "https://newsapi.org/v2/",
endpoint: ["everything", "top-headlines", "sources"],
search_type: ["q="],
language: "language=en",
sort_by: ["popularity", "relevancy", "publishedAt"],
apikey: "apiKey=[2f3800ec5f154af5b456b859b8d9986a]"
};
// ====================================================
// ====================================================
// build a convenience function to render each article
function render_article(article) {
var str = "";
// ... YOUR CODE TO BUILD ARTICLE HTML ...
return str;
}
// ====================================================
// ====================================================
// Construct your search_url
// ... YOUR CODE GOES HERE ...
// ====================================================
// ====================================================
// Perform the AJAX operation
$.ajax({
url: search_url,
dataType: "json",
success: function(data) {
// Get the total number of articles
var n = data["totalResults"];
// Get the array of articles
var articles = data["articles"];
console.log("Total Articles Found:" + n);
articles.forEach(function(article) {
// Process all of the articles on this page
render_article(article);
});
},
error: function(e) {
console.log("AJAX Error: " + e);
}
});
// ====================================================
});
Please help!!
The main URL of the site will land on the web page where user can enter a search term either from headline news or the entire database (for purpose of this exam the search is limited to english articles only). In keeping with good user experience design the search user interface should be a simple search input form with minimal clutter and confusion. When the client enters a search term and clicks a button, the website shall make an API request from The News API and return JSON data GET News The default number of articles returned should be 10 but a bonus will be paid by the client if the number of articles per page returned can be entered elegantly in the site design by the user. To test that the API site is returning the valid data, you may insert a text string in place of "search pattern" (try substituting "bitcoin" and copy/paste the following URL in your browser WITH YOUR OWN API KEY OBTAINED FROM newsapi.org). var search-url- "https://newsapi. org/v2/everything?q=search-pattern&Language-en;& sortBy publishedAt&apiKey; [YOUR-API-KEY]"Explanation / Answer
// Shorthand for $( document ).ready()
function get_news() {
// ============== API DATA STRUCTURE ==================
var api_data = {
base_url: "https://newsapi.org/v2/",
endpoint: ["everything", "top-headlines", "sources"],
search_type: ["q="],
language: "language=en",
sort_by: ["popularity", "relevancy", "publishedAt"],
apikey: "apiKey=2f3800ec5f154af5b456b859b8d9986a"
};
// ====================================================
// ====================================================
// build a convenience function to render each article
function render_article(article) {
var str = "<div class='panel panel-success'>" +
"<div class='panel-heading'><h3 class='panel-title'>" + article['title'] + "</h3></div>" +
"<div class='panel-body'>" +
"<img src="" + article["urlToImage'] + "' /> " +
article['description'] +
"</div>" +
"<div class='panel-footer'> <p>Published at: " + article["publishedAt"] + " <a class='btn btn-warning' href="" + article["url'] + "'>Read more...</a></p></div></div>";
//var str = "<div><h2>" + article["title"] + "</h2><p>" + article["publishedAt"] + "</p><p>" + article["description"] + "</p></div>";
$("#articleContainer").append(str);
return str;
}
// ====================================================
// ====================================================
// Construct your search_url
var search_term = $("#searchTerm").val();
var sort_by = $("#sortBy option:selected").text();
var search_url = api_data["base_url"] + api_data["endpoint"][0] + "?" + api_data["search_type"][0] + search_term + "&sortBy=" + sort_by + "&" + api_data["apikey"];
console.log(search_url);
// ====================================================
// ====================================================
// Perform the AJAX operation
$.ajax({
url: search_url,
dataType: "json",
success: function (data) {
// Get the total number of articles
var n = data["totalResults"];
// Get the array of articles
var articles = data["articles"];
console.log("Total Articles Found:" + n);
articles.forEach(function (article) {
// Process all of the articles on this page
render_article(article);
});
},
error: function (e) {
console.log("AJAX Error: " + e);
}
});
// ====================================================
};
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.