Exercise: HTML APIs

In this exercise, you'll try out using several HTML APIs to add more dynamic content to the starter webpage.

Download the starter file and save them into a project folder. Open the webpage up in the browser and make sure it works. It should pull in video information from inline JSON data and display linked video thumbnails in a list.
Add a counter: Go to flagcounter.com and set up a hit counter for your website. Put the counter somewhere near the bottom of the page.
Add a rating chart:
- Add a "rating" field to each video in the inline JSON data, a number of 100.
- Go to the Google Charts API Docs and read about the Google-O-Meter image chart API parameters.
- Find an example chart that looks the most like how you want to visualize the rating, and check out what URL parameters it uses.
- Figure out what part of the URL you would need to change to make it show a chart for a particular rating (like 50 or 100).
- Using just HTML, insert an image into the page with a chart URL.
- Now, using JavaScript, insert an image for each video that has a dynamically generated chart URL. Either display them in the sidebar or display the charts when the video is played.
Bonus: Modify the generated Youtube iframe players so that they auto-play when clicked. Read the docs here.
Bonus: Create a bar chart that compares the ratings across all the videos, using the Google Bar Charts Image API.

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.

      
        <!doctype html>
        <html>
        <head>
          <meta charset="utf-8">
          <title>Video Watcher</title>
 
          <link rel="stylesheet" type="text/css" 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">
              <h2 class="page-header">Best Videos Ever ❤</h2>
            </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 style="text-align:center; margin-top: 30px; clear:both;">
            <a href="https://info.flagcounter.com/nEFy"><img
              src="https://s04.flagcounter.com/count/nEFy/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_12/viewers_0/labels_0/pageviews_0/flags_0/"
              alt="Flag Counter" border="0"></a>
          </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>

          function addVideoToList(video){
            var videoLink = $('<a>');
            videoLink.append(video.title);
            var linkUrl      = videoLink.attr('href');
            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) + '?autoplay=1');
              videoEmbed.attr('width', 560);
              videoEmbed.attr('height', 315);

              var videoRating = $('<img></img>');
              videoRating.attr('src', 'https://chart.googleapis.com/chart?chs=225x125&cht=gom&chd=t:' + video.rating);

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

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

          var videos = [
            {
              "youtubeId" : "TddFnTB_7IM",
              "title"     : "Trip through the 80s",
              "author"    : "meliberty",
              "rating"    : 90
            },
            {
              "youtubeId" : "HwSKkKrUzUk",
              "title"     : "Circle of Life",
              "author"    : "parkerjademerce",
              "rating"    : 70
            },
            {
              "youtubeId" : "il2IrgFHfsg",
              "title"     : "The Ooooh Cat",
              "author"    : "RnBTree",
              "rating"    : 60
            },
            {
              "youtubeId" : "epUk3T2Kfno",
              "title"     : "Otters Holding Hands",
              "author"    : "cynthiaholmes",
              "rating"    : 100
            }
          ]

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

        </script>
        </body>
        </html>