My goal is to separate various headlines (along with their images) by using a bottom-border. I attempted this, but instead of putting a border between headlines, it ends up on the image.
Using jQuery
$(document).ready(function() {
$.ajax({
url: "https://newsapi.org/v2/top-headlines?sources=the-sport-bible&apiKey=7822ca100cdf43e1a85e1e101aa69c06",
method: "GET",
success: function(data) {
processData(data);
}
});
function processData(data) {
var articleItems = [];
for (var i = 0; i < 5; i++) {
var author = data.articles[i].author;
var title = data.articles[i].title;
var description = data.articles[i].description;
var urlToImage = data.articles[i].urlToImage;
var artUrl = data.articles[i].url;
var $author = `<div class="author">Author: ${author}</div >`
var $title = `<a href="${artUrl}"><div class="title">${title}</div ></a>`
var $description = `<a href="${artUrl}"><div class="description">${description}</div></a>`
var $urlToImage = `<a href="${artUrl}"><img class="urlToImage" src="${urlToImage}">`;
$("#sport_news").append(`${author}${$title}${$description}${$urlToImage}`);
$("#sport_news").append("<br />");
console.log(artUrl);
}
}
});
When it comes to HTML
<div class="tab-pane fade" id="sport">
<h3>SPORT</h3>
<p id="sport_news"></p>
</div>