Download Project4-Start.zip, unzip it, open project4-start.html and project4-start.js with VS Code, and take a look. As you can see, project4-start.html file is connected to project4-start.js inside of the js folder, which contains a great big array of objects with information about news articles I collected about the latest trends.
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 project4-start.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");
article.forEach(function(articleItem) {
let title = document.createElement("h2");
let link = document.createElement("a");
link.href = articleItem.link;
link.target = "_blank";
link.textContent = articleItem.title;
title.appendChild(link);
container.appendChild(title);Rubric
A-Level Work
- Exceptional quality, originality, and/or insight
- Fully meets criteria with no significant errors
- Polished, organized, and professional
B-Level Work
- Meets all criteria with minor issues
- Solid understanding and effort
- Good organization and presentation
C-Level Work
- Meets most criteria; notable gaps
- Basic or inconsistent understanding
- Organization or clarity needs work
Below C-Level (Not Passing)
- Disorganized, incomplete, or poor quality
- Meets few or no criteria; major errors or omissions
- Limited or no understanding and effort