Exercise: JSON

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:

Download json_starter.html into your project folder and confirm that it works in the browser.
Read through the code to make sure you understand how it works.
Add an additional video to the JSON, so that you have 4 videos listed.
When you click on the video, it shows the video player on the side. Make it so that it also shows an h2 with the video title above the iframe.
Add an "author" property to each video in the JSON and display that next to the title.
Bonus: Add a "favorite" property to each video which is either true or false, and use that to decide whether to put a round red border around the video in the list.

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.

View Live Solution

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Video Watcher</title>
    <link rel="stylesheet" href="http://www.teaching-materials.org/common/css/bootstrap.min.css">
    <style type="text/css">
    /* This puts titles always on a separate line from thumbnails */
    #videos-list img {
      display: block;
    }
    </style>
  </head>

  <body>

    <div class="container">

      <div class="row">
        <div class="col-md-12">
          <h1 class="page-header">Best Videos Ever ❤</h1>
        </div>
      </div>

      <div class="row">
        <div class="col-md-3">
          <ul id="videos-list">
          </ul>
        </div>
        <div class="col-md-9" id="video-watcher">
        </div>
      </div>

    </div>

    <script type="text/javascript" src="http://www.teaching-materials.org/common/youtube.js"></script>
    <script type="text/javascript" src="http://www.teaching-materials.org/common/js/jquery.min.js"></script>

    <script>
      var videos = [
        {
          "youtubeId": "TddFnTB_7IM",
          "title": "Trip through the 80s",
          "author": "meliberty"
        },
        {
          "youtubeId": "epUk3T2Kfno",
          "title": "Otters Holding Hands",
          "author": "cynthiaholmes"
        },
        {
          "youtubeId": "il2IrgFHfsg",
          "title": "The Ooooh Cat",
          "author": "RnBTree"
        },
        {
          "youtubeId": "oOlDewpCfZQ",
          "title": "Four Chords",
          "author": "axisofawesome"
        }
      ];

      var addVideoToList = function(video) {

        var videoLink = $('<a>');
        videoLink.append(video.title);
        var thumbnailUrl = youtube.generateThumbnailUrl(video.youtubeId);
        var thumbnailImg = $('<img>');
        thumbnailImg.attr('src', thumbnailUrl);
        videoLink.append(thumbnailImg);

        videoLink.on('click', function(e) {
            e.preventDefault();

            var videoTitle = $('<h2>');
            videoTitle.html(video.title + ' <small>' + video.author + '</small>');

            var videoEmbed = $('<iframe></iframe>');
            videoEmbed.attr('src', youtube.generateEmbedUrl(video.youtubeId));
            videoEmbed.attr('width', 560);
            videoEmbed.attr('height', 315);

            var videoWatcher = $('#video-watcher');
            videoWatcher.hide();
            videoWatcher.empty();
            videoWatcher.append(videoTitle);
            videoWatcher.append(videoEmbed);
            videoWatcher.fadeIn();
        });

        var videoItem = $('<li>');
        videoItem.append(videoLink);
        $('#videos-list').append(videoItem);
      };

      for (var i = 0; i < videos.length; i++) {
        addVideoToList(videos[i]);
      }
    </script>

  </body>
</html>