Add simple playlist app

object_oriented_javascript/playlist/app.js

@@ -5,3 +5,23 @@ var walkingOnSunshine = new Song("Walking on Sunshine", "Katrina and the Wave",
 
 playlist.add(hereComesTheSun);
 playlist.add(walkingOnSunshine);
+
+var playlistElement = document.getElementById("playlist");
+
+playlist.renderInElement(playlistElement);
+
+var playButton = document.getElementById("play");
+playButton.onclick = function() {
+  playlist.play();
+  playlist.renderInElement(playlistElement);
+}
+var nextButton = document.getElementById("next");
+nextButton.onclick = function() {
+  playlist.next();
+  playlist.renderInElement(playlistElement);
+}
+var stopButton = document.getElementById("stop");
+stopButton.onclick = function() {
+  playlist.stop();
+  playlist.renderInElement(playlistElement);
+}

object_oriented_javascript/playlist/playlist.js

@@ -27,7 +27,9 @@ Playlist.prototype.next= function() {
 };
 
 Playlist.prototype.renderIn = function() {
-
+  list.innerHTML = "";
+  for(var i=0; i < this.songs.length; i++) {
+    list.innnerHTML += this.songs[i].toHTML();
+  }
 }
 
-

object_oriented_javascript/playlist/song.js

@@ -14,5 +14,16 @@ Song.prototype.stop = function() {
 };
 
 Song.prototype.toHTML = function() {
-
+  var htmlString = '<li';
+  if (this.isPlaying) {
+    htmlString += ' class="current"';
+  }
+  htmlString += '>';
+  htmlString += this.title;
+  htmlString += ' - ';
+  htmlString += this.artist;
+  htmlString += '<span class="duration">'
+  htmlString += this.duration;
+  htmlString += '</span></li>';
+  retrun htmlString;
 };