30. jQuery: Collection and Album Views

album.html

@@ -70,6 +70,7 @@ <h3 class="artist-name">Fallout Boy</h3>
                 </div>
             </div>
         </section>
+        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
         <script src="scripts/album.js"></script>
     </body>
 </html>

collection.html

@@ -21,6 +21,7 @@
 
         <section class="album-covers container clearfix">
         </section>
+        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
         <script src="scripts/collection.js"></script>
     </body>
 </html>

scripts/album.js

@@ -37,25 +37,26 @@ var createSongRow = function(songNumber, songName, songLength) {
       + '</tr>'
       ;
 
-    return template;
+    return $(template);
 };
 
 var setCurrentAlbum = function(album) {
-    var albumTitle = document.getElementsByClassName('album-view-title')[0];
-    var albumArtist = document.getElementsByClassName('album-view-artist')[0];
-    var albumReleaseInfo = document.getElementsByClassName('album-view-release-info')[0];
-    var albumImage = document.getElementsByClassName('album-cover-art')[0];
-    var albumSongList = document.getElementsByClassName('album-view-song-list')[0];
+    var $albumTitle = $('.album-view-title');
+    var $albumArtist = $('.album-view-artist');
+    var $albumReleaseInfo = $('.album-view-release-info');
+    var $albumImage = $('.album-cover-art');
+    var $albumSongList = $('.album-view-song-list');
 
-    albumTitle.firstChild.nodeValue = album.name;
-    albumArtist.firstChild.nodeValue = album.artist;
-    albumReleaseInfo.firstChild.nodeValue = album.year + ' ' + album.label;
-    albumImage.setAttribute('src', album.albumArtUrl);
+    $albumTitle.text(album.name);
+    $albumArtist.text(album.artist);
+    $albumReleaseInfo.text(album.year + ' ' + album.label);
+    $albumImage.attr('src', album.albumArtUrl);
 
-    albumSongList.innerHTML = '';
+    $albumSongList.empty();
 
     for (i = 0; i < album.songs.length; i++) {
-        albumSongList.innerHTML += createSongRow(i + 1, album.songs[i].name, album.songs[i].length);
+        var $newRow= createSongRow(i + 1, album.songs[i].name, album.songs[i].length);
+        $albumSongList.append($newRow);
     }
 };
 

scripts/collection.js

@@ -1,4 +1,5 @@
-var collectionItemTemplate = 
+var buildCollectionItemTemplate = function() {
+    var template =
     '<div class="collection-album-container column fourth">'
   + '  <img src="assets/images/album_covers/01.png"/>'
   + '  <div class="collection-album-info caption">'
@@ -13,11 +14,15 @@ var collectionItemTemplate =
   + '  </div>'
   + '</div>'
   ;
+
+    return $(template);
+};
 
-window.onload = function() {
-    var collectionContainer = document.getElementsByClassName('album-covers')[0];
-    collectionContainer.innerHTML = '';
+$(window).load(function() {
+    var $collectionContainer = $('.album-covers');
+    $collectionContainer.empty();
     for (var i = 0; i < 12; i++) {
-        collectionContainer.innerHTML += collectionItemTemplate;
+        var $newThumbnail = buildCollectionItemTemplate();
+        $collectionContainer.append($newThumbnail);
     }
-};
+});