NY TImes BTS Part 3

Display NY Times Server Data in HTML Electron application

Previous Lesson

Use request to make HTTP calls

Overview of Key Points of This Lesson

• document.getElementById()
• documentName.innerHTML
• Loop through array of objects with array_name.forEach()
• access properties of JavaScript object with object_name.property_name

Format Headlines as HTML in Application

Create div with ID in html

in index.html, create a new <div> called, article-listing.

get html element into JavaScript

In getNYTimes.js, assign a constant articleListing to the HTML element.

const articleListing = document.getElementById('article-listing');

create a variable to hold the HTML

let articleHolder = '';

in the function getHeadline, return the headline

create a new variable headline to temporarily hold the headline.

Use getHeadline(doc) to call the function get the headline

1. in the forEach loop, assign the variable articleHolder to the formatted HTML headline. Use the backticks and include HTML elements <H1> to hold the headline. The text of the headline will be ${headline}
2. Initially, articleHolder is blank. Add one headline to the end of the string each time through the loop.
3. Use string substitution to insert the headline string into the HTML <h1> tag.
4. After the forEach loop completes, set the innerHTML of the articleListing div to articleHolder

Adjust css and html elements to get a look you want.

Next Lesson

Insert article snippet