In this exercise, you'll practice using JSON to dynamically build up HTML. The starter webpage already has the videos described in JSON and functions that turn them into an interactive list.

Go through these steps, and do as many as you can in the time we have:

  1. Download json_starter.zip. Unzip the files and ensure that index.html works in the browser.
  2. Read through the code in script.js to make sure you understand how it works.
  3. Add an additional video to the JSON, so that you have 4 videos listed.
  4. When you click on the video, it shows the video player on the page. Make it so that it also shows an h2 with the video title above the iframe.
  5. Add an author property to each video in the JSON and display that next to the title.

Bonus

Bonus: Add a favorite property to each video which is either true or false, and use that to decide whether to put a red border around the video in the list.

Tip

Make sure that you use your browser developer tools to make debugging easier while working on this. Check for errors, and use console.log() to figure out how far your code makes it, and what the values of your variables are along the way.