25. DOM Scripting: Album View

album.html

@@ -31,32 +31,8 @@ <h5 class="album-view-release-info">1909 Spanish Records</h5>
                 </div>
             </section>
             <table class="album-view-song-list">
-                <tr class="album-view-song-item">
-                    <td class="song-item-number">1</td>
-                    <td class="song-item-title">Blue</td>
-                    <td class="song-item-duration">X:XX</td>
-                </tr>
-                <tr class="album-view-song-item">
-                    <td class="song-item-number">2</td>
-                    <td class="song-item-title">Red</td>
-                    <td class="song-item-duration">X:XX</td>
-                </tr>
-                <tr class="album-view-song-item">
-                    <td class="song-item-number">3</td>
-                    <td class="song-item-title">Green</td>
-                    <td class="song-item-duration">X:XX</td>
-                </tr>
-                <tr class="album-view-song-item">
-                    <td class="song-item-number">4</td>
-                    <td class="song-item-title">Purple</td>
-                    <td class="song-item-duration">X:XX</td>
-                </tr>
-                <tr class="album-view-song-item">
-                    <td class="song-item-number">5</td>
-                    <td class="song-item-title">Black</td>
-                    <td class="song-item-duration">X:XX</td>
-                </tr>
             </table>
         </main>
+        <script src="scripts/album.js"></script>
     </body>
 </html>

scripts/album.js

@@ -0,0 +1,64 @@
+var albumPicasso = {
+    name: 'The Colors',
+    artist: 'Pablo Picasso',
+    label: 'Cubism',
+    year: '1881',
+    albumArtUrl: 'assets/images/album_covers/01.png',
+    songs: [
+        { name: 'Blue', length: '4:26' },
+        { name: 'Green', length: '3:14' },
+        { name: 'Red', length: '5:01' },
+        { name: 'Pink', length: '3:21' },
+        { name: 'Magenta', length: '2:15' }
+    ]
+};
+
+var albumMarconi = {
+    name: 'The Telephone',
+    artist: 'Guglielmo Marconi',
+    label: 'EM',
+    year: '1909',
+    albumArtUrl: 'assets/images/album_covers/20.png',
+    songs: [
+        { name: 'Hello, Operator?', length: '1:01' },
+        { name: 'Ring, ring, ring', length: '5:01' },
+        { name: 'Fits in your pocket', length: '3:21' },
+        { name: 'Can you hear me now?', length: '3:14' },
+        { name: 'Wrong phone number', length: '2:15' }
+    ]
+};
+
+var createSongRow = function(songNumber, songName, songLength) {
+    var template =
+        '<tr class="album-view-song-item">'
+      + '  <td class="song-item-number">' + songNumber + '</td>'
+      + '  <td class="song-item-title">' + songName + '</td>'
+      + '  <td class="song-item-duration">' + songLength + '</td>'
+      + '</tr>'
+      ;
+
+    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];
+
+    albumTitle.firstChild.nodeValue = album.name;
+    albumArtist.firstChild.nodeValue = album.artist;
+    albumReleaseInfo.firstChild.nodeValue = album.year + ' ' + album.label;
+    albumImage.setAttribute('src', album.albumArtUrl);
+
+    albumSongList.innerHTML = '';
+
+    for (i = 0; i < album.songs.length; i++) {
+        albumSongList.innerHTML += createSongRow(i + 1, album.songs[i].name, album.songs[i].length);
+    }
+};
+
+window.onload = function() {
+    setCurrentAlbum(albumPicasso);
+};