This review exercise is built around accessing data contained in various data structures, and then taking that data and writing to the DOM using jQuery.

It builds on concepts from the first checkpoints (Checkpoint-00 through 2) and ties them into DOM-manipulation concepts from Week 2.

Clone down this repository. Your job is to write code in js/script.js that accomplishes the tasks listed below. Do not modify any other file.

0. Populate the Header with Staff Member Names
1. For testing purposes, console.log() each element in the staff array in js/script.js using a for-loop.
2. Next, use the jQuery function $() to create <span> tags inside the <header> that is directly in the <main> tag. The text of each <span></span> should be each item in the staff array, respectively.
3. You should have added six spans and have one name from the staff in each <span>.

0. Populating Content for the First Article
1. Create a new paragraph element using $() and store it in a variable. Set its text to the text property of the first object in articles and append it to the <section> inside of the first <article>.

> - You'll need to comment out `height: 444px;` in the rule for `articles` in styles/style.css to avoid overflow.

0. In the first <article>, set the text of the <h3> inside <header> to the title from the first object in articles.

1. Modify the byline property of the first articles by concatenating it with the 1st value in staff.

2. Take the new value of the byline property and add it to the text of the <header> within the first <article>.

3. Add an editor property to the first object in articles and give it the value of the 2nd item in the staff array.

4. Create and append a <span> inside the <header> of the first <article>, where the new <span>'s text is the value of the editor property you just created.

5. Render the image, from the body property of the first object in articles, to the <figure> element in the first <article>.

6. Using a for-loop to populate content for each article

7. Adapt the code you wrote in the previous section to work with a for loop that iterates over the objects in articles.

8. Hovering the cursor over a paragraph changes its background color to lightGrey. When the mouse exits the paragraph, the color should revert back to its previous value.

9. Store the default background-color value in a variable.

10. Change the background color to light grey when the mouse hovers over the paragraph.

11. Determine the event that corresponds to the mouse exiting the area of a DOM element.

12. Add event listeners to listen for this type of event, and have the background color revert to its default value when this event occurs.

0. Use jQuery animate to have the staff names slide and fade into view. Check out http://api.jquery.com/animate/

1. Add infinite scroll by re-appending the articles when the user scrolls to a certain point near the bottom.

Write a little bit of code, and then test it--work methodically.

use $ in variable names that refer to jQuery objects/collections (this is a recommended convention, and will not have an impact on code function).

var $body = $("body");

Store references to each part of the DOM you need to interact with. Example:

var $paragraphs = $("p");
var $smallestHeaders = $("h6");