jQuery Exercise 1

jQuery: Exercise 1

Making a Video Player with the DOM API

In this exercise, you'll be turning the below list of linked titles into a list of linked thumbnails, using JavaScript DOM manipulation and the functions from the youtube.JS library (read documentation).

<!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/bootstrap.css">
  </head>
  <body>

    <div class="container">
 
    <div class="row">
      <div class="span12">
        <h2 class="page-header">Best Videos Ever ❤</h1>
      </div>
    </div>
 
    <div class="row">
      <div class="span3">
        <ul>
          <li><a href="https://www.youtube.com/watch?v=TddFnTB_7IM">Trip through the 80s</a></li>
          <li><a href="https://www.youtube.com/watch?v=epUk3T2Kfno">Otters Holding Hands</a></li>
          <li><a href="https://www.youtube.com/watch?v=il2IrgFHfsg">The Ooooh Cat</a></li>
        </ul>
       </div>
     </div>
    </div>

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

Step by Step:

Create an array of every link on the page using document.querySelectorAll(cssSelector)
Iterate through the array. In each iteration of the loop:

Find the current href using element.getAttribute(name), and store into a variable
Generate a thumbnail URL using youtube.generateThumbnailUrl(videoUrl)
Create an IMG element using document.createElement(tagName)
Set the "src" of the IMG element using element.setAttribute(name, value)
Append the IMG to the link using element.appendChild(element)

Quick Tip: If you need a refresher on the DOM API, check out slides 1-12 from the DOM Review class here.

<!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/bootstrap.css">
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="span12">
          <h2 class="page-header">Best Videos Ever ❤</h1>
        </div>
      </div>
 
      <div class="row">
        <div class="span3">
          <ul>
            <li><a href="https://www.youtube.com/watch?v=TddFnTB_7IM">Trip through the 80s</a></li>
            <li><a href="https://www.youtube.com/watch?v=epUk3T2Kfno">Otters Holding Hands</a></li>
            <li><a href="https://www.youtube.com/watch?v=il2IrgFHfsg">The Ooooh Cat</a></li>
          </ul>
        </div>
      </div>
    </div>

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

    <script>
      var videoLinks = document.getElementsByTagName('a');
      for (var i = 0; i < videoLinks.length; i++) {
        var videoLink = videoLinks[i];
        var linkUrl = videoLink.getAttribute('href');
        var thumbnailUrl = youtube.generateThumbnailUrl(linkUrl);
        var thumbnailImg = document.createElement('img');
        thumbnailImg.setAttribute('src', thumbnailUrl);
        videoLink.appendChild(thumbnailImg);
      }
    </script>
  </body>
</html>