JSON NEWS API CALL

api-call.html

<style>
#news-result{text-align:center;width:50%;margin:auto;font-family:sans-serif;font-size:14px}.header-image{width:100%;height:150px;background-size:cover;background-position:center}#news-result a{display:inline-block;background:red;margin-bottom:50px;padding:8px 26px;color:#fdfdfd;text-decoration:none;text-transform:uppercase;font-size:12px}

</style>
<!-- results go here -->
<div id="news-result">

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


// API URL WITH KEY
var urlit = 'https://newsapi.org/v2/everything?' +
          'q=technology&science' +
          'from=2018-08-19&' +
          'sortBy=popularity&' +
          'apiKey=89bf80a13bac4174b9181c4c30b7ad29';


	
$.getJSON(urlit, function(json) {

// RETRIEVES 'articles' from JSON response
 var articles = json["articles"];

$.each( articles, function( key, value ) {

// RETRIEVE KEY VALUES NEEDED FROM WITHIN ARTICLES
  var author = (value["author"] );
  var title = (value["title"] );
  var description = (value["description"] );
  var link = (value["url"] );
  var image = (value["urlToImage"] );
 
 console.log(image);


// CONVERT VALUES INTO STRINGS AND REMOVE QUOTATION MARKS
 var authorresult = JSON.stringify(author).replace(/\"/g, "");
 var titleresult = JSON.stringify(title).replace(/\"/g, "");
 var articledescription = JSON.stringify(description).replace(/\"/g, "");
 var linkresult = JSON.stringify(link).replace(/\"/g, "");

// ADD HTML TAGS TO STRINGS
 var previewImage = "<div class='header-image' style='background-image:url(" + image + ")' ></div>"; 
 var authorfinal = "<p class='author-title'>" + authorresult + "</p><br>";
 var titlefinal = "<p class='article-title'>" + titleresult + "</p><br>";
 var descriptionfinal = "<p class='description-title'>" + articledescription + "</p><br>";
 var linkfinal = "<a href='" + linkresult + "' target='_blank' >Learn More</a><br>";


// APPEND ARTICLE INFORMATION TO BROWSER
  $("#news-result").append(previewImage + authorfinal + titlefinal + descriptionfinal + linkfinal);




});



});
	 


</script>