NY Times BTS Part 7— Show Story in Separate Window

Open a second electron Window with electron.remote.BrowserWindow

require

using require('package-name') is the most common way to load a module into JavaScript. Another technique is to use import.

We are using require to load the electron module.

Load electron module

In your main JavaScript file, getNYTimes.js, add the following lines to use electron methods that we’ll use to open a new window.

const electron = require('electron');
const browserWindow = electron.remote.BrowserWindow;

Create new function showArticle(url)

At the bottom of the file, create a new function called, showArticle(url).

function showArticle(url) {
  console.log(url);
}

create button in article HTML listing

The HTML below is between the back ticks.

<br>
<button>
   View Article
</button>
<br>

Add event handler to the button

The syntax to run a function when a button is clicked is:

<button onclick="nameOfFunction('string that is passed to function')

use the onclick syntax above and the function showArticle to run your button.

<button onclick="showArticle('sample test string that simulates URL');">

Find property for article URL

manually inspect the data on your console and identify the property that has the article URL.

Question: What is the property?

Answer: web_url

Extract web_url for each Article

Question: How do you loop through an array?

Remember that the entire response from the NY Times API is an array of 10 objects.

You are looping through the array of 10 objects (each object is an article). For each article, you are accessing the web_url property.

<br>
<button onclick="showArticle('${doc.web_url}');">
   View Article
</button>
<br>

Pass it the URL of the article. Remember that one of the properties of the object for each article is web_url

showArticle(url)

• Test it with console.log(url)
• create a remote window with new browserWindow({width: 1200, height: 800});
• Assign the browserWindow you created in the step above to the variable win
• load the URL with win.loadURL(fill in here);

Answer is below the graphic.

function showArticle(url) {
  console.log(url);
  let win = new browserWindow({width: 1200,  height: 800});
  win.loadURL(url);
}