Finally, let's fix up our user interface.
Let's take a look at the HTML.
Here, we have an ordered list with the id of playlist.
This is where we want to render the playlist into.
Here's two examples of list items,
one regular item When the song is not playing, and
here's another one where it is playing, with the class of current.
Let's cut the currently playing example and
paste that into our songs to HTML method, and
set it to the string of HTML string.
In fact, let's break this up into multiple lines, and add in our values.
So we can add in our title here.
And the artist here.
And our duration here.
We only want the class of current if the song is playing.
So let's add a conditional statement,
And finally, return the HTML string.
Now let's figure out what we want to do with the playlist render in element.
If we go to our app.js file, we can get the ordered
list by using the getElementById method,
Using the string of playlist as our id.
We can then pass this playlist element into
the playlists, Render in element.
In the rendering element method we can pass in a variable or parameter of list,
meaning the ordered list that we've just selected.
Then we can empty the list by setting the innerHTML to the empty string.
Let's cycle over each song.
Let's set the variable i to 0, and if,
i is less than the song's length,
we want to increment the index by one.
And then we want to add the songs HTML to the inner HTML of the list,
and we can do that by doing list.innerhtml.
And then we can use the += operator and
this will add each of the songs HTML.
We can try and see if this render code works.
We should make sure we get rid of the example items in the ordered list.
So that we can make sure that our render code is actually working.
Let's go to the preview and see if it works.
And it does.
The only thing missing now is the buttons from working, so
let's fix these three buttons now.
We have three buttons with the ID of play, next, and stop.
Lets use the get element ID method on the document, and select them all.
So our play button Is document.getElementById("play").
And the same for next and stop.
Then, like in our dice simulator, we can implement the on click method on each.
We'll do playlist.play for the play button.
Playlist.next for the next button, and playliststop for the stop button.
So what we're doing here is we're implementing a click
method, Omnipotent.
So playlist.play.
And let's just copy and paste this for speed.
And next put in, and
we want to call next with this.
And for the stop button we do a similar thing.
Because each one of these methods, play, stop, and
next, alters the state of the objects, we need to refresh the UI.
To do that we call the rendering element method on the playlist and
pass the playlist element again.
So we do this again here.
Here, And here.
Now let's test out these buttons.
And as you can see, it works.
Wow, that's a lot of JavaScript!
And you've used all sorts of objects.
You've used JavaScript native objects, like strings and arrays.
You've used host objects like the document object and
all of those HTML elements returned by the get element by ID method.
And finally, and
most importantly, you've created your own elements, the playlist and song.
Great stuff.