Download corona.zip, unzip it, open corona.html and corona.js with VS Code, and take a look. As you can see, corona.html file is connected to corona.js inside of the js folder, which contains a great big array of objects with information about news articles that appeared when I visited newsapi.org and entered the search terms corona and virus. Many of the articles are about topics other than the corona virus, but for our purposes that really doesn’t matter!
Each object contains the title of the article, a link to an image (in most cases), the url of the article, a description of its content and more. Your job is to use Javascript to populate corona.html with the information from each of those objects.
Specifically, the document that you ultimately create needs the following
- The title of each article
- A link to the article that wraps around the title
- The description
- An image that is limited via css to a height of 300px (some are much larger; your job is to shrink them)
- Fairly nice formatting.
To help you get started, here’s how to get the linked article title to show up in a <div> with an id of #articles:
let container = document.getElementById("articles");
articles.forEach(function(article) {
// Create wrapper div
let card = document.createElement("div");
card.classList.add("article");
// Create linked title
let title = document.createElement("h2");
let link = document.createElement("a");
link.href = article.url;
link.target = "_blank";
link.textContent = article.title;
title.appendChild(link);
});