Okay, like I said, everybody should go to jsfiddle.net, I'll be doing the example here. In this environment, if you click the top right settings, you can choose the layout. I will choose classic and keep as it is. I like to disable auto close HTML tags and auto close brackets. Since we're beginners, we want to type everything manually instead of auto complete. And there are other settings if you want to change. To run the code, we click run the top left, you'll see in the bottom right the empty white space here. That's what you're going to see as the result. Every time you change the code in any of these panels, HTML, CSS, or JavaScript, please make sure to click run, otherwise you won't see your change. Okay, with that, today I will talk about JavaScript, the programming language that's used to make websites interactive. We use JavaScript to manipulate the document. Whereas in the beginning of HTML and CSS, we used to have only static websites with just text, scientific documents. But now they have evolved to something greater than that. We have social media like Facebook, Instagram, TikTok, and all these other websites that are highly interactive. People are clicking a lot of things, touching a lot of things, moving, drag and drop, typing into comments, and so on. There's a lot going on now these days. In any case, today, I want to do this example of since we learned about the audio HTML element in a previous session, I want to leverage that so we can learn how we can have a playlist of some, and then we can click any of these list items, and it will play the audio for that specific music file or song, and I'll give you the links to the audio. I start them on GitHub so that we can use in this lesson. This will involve learning about JavaScript, how we can listen to click events, how we can use JavaScript to manipulate this audio, and then how we can use it to play a different song every time we click a different. Let's go back to JS Fiddle. Let me just put the, let's start off with the audio tag like this. If you do it, it's run like that, nothing happens, so you put controls there, something will appear. This from HTML is the audio element, it allows us to play an audio file. Now, it needs the source, right? What song are you going to play? So SRC argument, so SRC attribute, I mean. Now, this is nice, we can just type it here, let me find a song for us. One moment. By facing the Zoom chat, URL, you can use that, you want to try to quick run. When a player's play, it will play this audio file, you cannot probably can't hear it in the recording of this, or when the audience, but if you click it yourself, you'll hear it. Now, this is the music that I myself made it, so it's nothing copyrighted, copyrighted to me, myself, so safe to play here. Anyway, no, this is nice, but we want to learn JavaScript because we're going to build a playlist later. So, I'm going to have something like a URL here, and then later we're going to have some allies. So, you want to play this thing here, and I'll be able to click this and it will play there, and then there will be another one. Let me take the other link here. And then another one. Let's copy. Obviously, you would have much nicer things here replace all these things with the name of the audio file. I just keep it simple with the name of the other file, but obviously, if you want to do songs, it would have artist name, it would have the song name, fence here, but just let's just keep it simple to start off. Anyway, this is the desired thing, but before we do that, we've got to learn to manipulate things in JavaScript. Let me click run again. I can remove these numbers. So, let's say I don't have this source there. It's nothing to play. How can I use JavaScript to manipulate this element so that I can set the source attribute? So, first, every time you want to manipulate an element, you must make sure to find it first. Now, there are different functions we can use in JavaScript to target or find an element in the document. The one I want to teach you is the find element by ID. So, how that works is you go to the element you want to target. That is, I want to target the audio element here. Give it a unique ID attribute. Let's call it audio-player. Now, in the JavaScript panel here, I'm going to call document.getElementById. Now, document itself is an interface through which we can communicate with the computer so that we can do things on the HTML document. Now, this object, if you think of it as a real-world object, the document object has attributes and it has what we call methods. So, the attributes, for example, of a car are its color, its make, what year, and so on. However, the methods of a car are things like drive, you know, change the gear, turn it off, that kind of stuff. So, it's like an operation on an object. Now, this getElementById is called a method. We also call this a function, okay? You're going to see that interchangeably. Function is when it's isolated from the object, but when a function belongs to an object, which is the case here, getElementById belongs to this document. Hence, we have a dot. The dot means the thing on the right kind of belongs to the thing on the left. You can think of it that way. So, we call it a method. In any case, we want to ask the document, hey, can you get me an element on the document by its ID? Now, make sure to type the characters exactly like I typed. Lower case and then uppercase E, L, elements, uppercase B, uppercase I here. Now, this naming convention is called camelCase, and it's widely used in the JavaScript world. Okay, the first letter is lower case of the first word, but all subsequent words, they are joined together simply by making the first letter of the word capitalized. So, goes like this. You can see I capitalized the first letter of every word that I add on to this chain of camelCase. In any case, when you have functions in programming language in general, not just JavaScript, we can do what we call call a function. So, a function is a set of instructions that a computer does. So, we call it or execute the instructions. Basically, we call it with the open and close parentheses. This means, hey, I want to execute the set of instructions, which means getElementById. I want to getElementById. Okay, but it needs to know what's the ID you want to get. What's the ID of the element? Well, it's audio player, right? So, we must pass that between the open and close parentheses. And these are what we call arguments. Okay, so the argument, the one argument here is audio player, but you have to put it under quotes, either single or double. It doesn't matter in this context. Because if you don't have quotes, it will mean something else. If you learn later on in JavaScript, there are things that are quoted and there are things that are not. So, if you don't have quotes, it will interpret it as something else like a variable that we might have defined. Now, you learn about variables later. It's just a way we can store information so we can retrieve and reuse it later. But in any case, when you have quotes here surrounding a sequence of characters, this is called a string. Okay, a string, think of it as a string, and then many characters hang from the string. Now, this is so, we literally mean the letter A, letter U, and so on. It doesn't have any special meaning. In any case, this must match the value of the id attribute there that I gave to the audio element through the id attribute. So, when you do this, it's the computer program is going to go and go through the whole document, and it's going to find, oh, this element has the id audio player. Therefore, this element will be given back to the user who called the function getElement by id. So, you can think of it as this whole line as the audio thing being replaced here. Visually, you can think of it, oh, that's what's happening. Actually, it's just giving you a reference or like a hook pointing to that audio element. But you can think of it that way. Substitute the audio thing right here. Okay, now that we got that, we can operate on it. In this case, I want to set the source attribute, and it's very easy to do. Now, this thing, the element itself, we can think of it as an object. Okay, HTML element, this is audio element. We can do .src, . meaning you can think of this as something on the right belongs to something on the left. So, there's surely a src attribute on this audio, and we can actually set it. If we just have it like this, it will give you access to what is already set for the value of src. But if you want to change the value, that's when you have to use the equal sign, and on the right-hand side, you assign the new value. In this case, I'm going to use the audio URL that I had. But make sure to add quotes, either double or single. Otherwise, you're going to interpret it as different things. So, this is just a string, a sequence of characters. You literally mean every single character that's written to appear as is. Okay? So, like that. So, I placed the zoom chat again in case you didn't get it. Now, this equal sign means attribution or assignment. Change your value, okay? Be careful. It's not comparison, you know, between one value and another. That's a different thing. In programming languages, that's usually two equal signs. Okay? In programming languages, a single equal sign means you want to assign or attribute a value to something. In this case, it's always the right-hand side goes into what's on the left-hand side of the equal side. In this case, the source attribute of the audio element. If I click that, let's see. You can see when I click run, what's happening is this document HTML will be run, will be parsed, and the computer will parse and read the document, and then will apply CSS styles. And then finally, as that is loaded, it will see the JavaScript code here and execute that line by line starting from the top. So it's doing the get element by D. It finds this audio, and then it replaces the source attribute with this value. And you can see it automatically reflected the audio player being run. If I click play, I can hear the sound. And you can see the timers updated. If you remove that code, click run, because it doesn't do anything, right? Because there's nothing. So this is just a demonstration how we can use JavaScript to manipulate the document. It's kind of a silly example. If you think about why not just take this and put it in the source, right? That makes a lot of sense, but it's just a silly example to teach you how to manipulate it. So that later, when we do the clicking of this item in the list, they will use JavaScript to change it to the source of the specific file because we have different files. Okay, now for the code here, you know, it's kind of messy to have everything one line. And I like to add some space between the operators here before and after the equals because better to see. Okay. So the computer doesn't matter if you have like this, you have like that. It's all the same. Okay. Just so you know, the spacing there. But it's obviously nicer like this. Any questions so far? Oh, good. Okay, so the reason I did this is because we're going to learn about events now, because I want to be able to do the following. This list here, I just made an order list with list items. And each one is just the name of a audio file or song or whatever you want to think about it. And I want to be able to click them and set this player to auto play the whatever I clicked. Okay. Now let's let's do some CSS work on this list because it's a bit ugly. So those who want to rush up and CSS. So I have the other player here and then have the URL. Now to the URL, I'm going to give an ID. I'm going to call it playlist. And I want to style that. Okay. So here in the CSS panel, when I want to style an element, I want to first define a selector. The selector will find the element. In this case, I want to find this URL element and I'll do it by the ID. And CSS start the prefix with hash. And then playlist make sure this name is the same as you typed for the ID for the URL. And to this playlist, I want to do some touch up here. And let's make it a little nicer. Feel free to be creative and change it to your heart's content. Now let me make it. If you want to be more specific about this, you can add the URL here as well. But it doesn't matter. Because ID is unique. So there's only one element that has the ID playlist. Let's add some border to pixel solid black. So you're going to see if I click run, there's a border surrounding the list, the playlist. Let's also add some div here or same playlist. Just for the sake of having a title there. Okay. Now I got the border. I don't like the bullet points. So let's do list style none to remove the bullet points. Now there's still some space to the left. I don't like that either. So maybe let's do margin zero padding zero. Remember, margin is the space within right inside margin space without outside the border. Right. So there you go. Now it's more normalized so we can style to a heart's content. And I'll do more of the style in each list item instead of the URL. Okay. Now I want to have some border radius. So let me add a border radius around the border of four pixels. So click run is like that. See it's rounded a little bit. And I want to add some space under the audio player. So I'm going to do another selector. The audio player is the ID audio player. So I'm going to use hash because that means ID find the select the element that has the ID audio dash player. I want to add margin bottom just margin to the bottom of eight pixels eight px. Now click and there's a little bit more space under that. If you want to add to this playlist, feel free to do so using either ID or class. Now I went a little bit faster because this is not a CSS class. But if you have any questions, let me know right now about the CSS. All right. Now I'm going to style the each list item. Maybe we have allies here. I want to add a little bit of space surrounding it. So that's the padding. But to do that, I must think, okay, how am I going to select every single ally inside this URL here? What's the selector for CSS? Okay. So the URL has the ID playlist. I can start off like that. Okay, there's an element whose ideas playlist, but I want to target the things inside. If I do inside, and if I could do ally like this, if you have a space ally, it means any ally anywhere inside the element whose ID is playlist. Now it could be directly as a child of UL or it could be somehow if there's, for some reason, there's an ally inside an ally, although that's weird. This would also match. But I don't like this. I want to only match the direct child of UL. I don't want to match any nested ally here inside some other element within UL. So I'm going to use this greater than here, which means direct descend or child of the playlist, the element of the ID playlist. Okay. You want to look more about that. Look up CSS selectors and you understand what that means. Anyway, that will target the allies. So I want to add some padding of eight pixels. So that you see there's now spacing top, right, left, bottom in each of these. If you right click inspect with the dev tools, if you want to find them out, you see there, the purple area is the padding that I just added for all of them. In any case, I close the dev tools. And yeah, I want to add some border to the bottom of each as well. So border dash bottom to pixel solid. And this is the color CC, CC, CC. Now red CC, green CC, blue CC. This is like a great color. Like that. You see under each list item. Now notice there's also border on the last one. If you want to eliminate the border on the last one, you can do this in CSS like this. Let's do the same selector, except I put a colon here. And I say last child, meaning I want to target only the last ally in this URL. And I don't want the border bottoms. I put border bottom zero like that. That way I eliminate that last one. Otherwise, because they're already a border there, right? I don't need it. Okay, that looks a lot nicer. I want to be able to change the cursor to be pointer when I hover over them. Each ally. So I can go to the selector for the ally here under that. I can say cursor pointer. So it changes the mouse pointer. You see right now it's like the text highlight pointer and the pointer normal one. If I click run and use this cursor pointer and move and hover, you see it's not like the hand with the L shape. Even when I put over the text. That's just to indicate to the user, hey, this might be an action if you click this. Just a silly thing. That's nice to have CSS. Another thing is when I hover over this list item, I want to highlight it so the user has some feedback about what's my that is clickable. So for that, I'm going to go outside and create the same selector lay list greater than ally. Oops ally, but I want to use the colon hover. So the selector, which means if you hover the mouse over this. Do the following for styles. I want to change the background color to this kind of gray as well. A red is DD, green is DD, blue is DD, semicolon. Now if I hover over it, you see it changes color right background color. That's the colon hover. So the selector. I can teach you a little trick. If you want to simulate that with the dev tools highlighted, you see this colon hub here toggle pseudo classes. You can also toggle it like this. That's a quick trick. If you cannot make it hover when you're debugging. Okay, so you can use that. Anyway, I'll close the dev tools. All right, so I think this is nice enough for styling. For now, let's go back to JavaScript enough for styling. Okay, so I want to be able to click this first song. Okay. And something's going to happen. Now let's go here. If you have JavaScript, and you want to do something when you click on element, find the element you want to click. This case, the first ally. Add the attribute on click. Define with the value here. You have to make what's called a function. A function, like I said, is a set of instructions. We're going to define our own function right now. Let's call it a play item. Now functions need to be called with parentheses. So put a parentheses there. Now we're going to define in the JavaScript code here. Function, space, play item. Now this name play item has to be the same as the play item in lines five of the JavaScript panel. Now parentheses, and then the function has a body that we define with the curly braces, curly braces, and between them, we type the instructions to be executed if you ever call this function. Okay, so this is a function keyword from JavaScript. Space, the name of the function. You can choose your name, any name you want. And then parentheses, and if you have any, remember I said about arguments, like get element by ID has the argument for audio player. That's what you would place between the open and close parentheses. If this function play item accepts any argument. Right now, I don't have anything to put there yet. So let's leave it blank. Okay, to keep it simple. And then a curly brace for the syntax. Notice I put a space here. It doesn't matter. It's just that I like putting space after the parentheses. And I usually you can obviously define this in one line that that's very ugly. So we always like to break lines like this. And I always have the curly brace like that. And then whenever you open a curly brace, you add what's called indentation, which is this one, at least two spaces on the left hand side. And you start typing the instructions here. This is just so it gives us a depth that whatever I type here is contained within the play item function. In any case, when I click the ally, it's going to call this function, the set of instructions. What I want to do is change the source of the audio to whatever the song URL is. In this case, I think it's this one. So let's move this code inside. Okay, I just took the code cut and put inside play item. Because this code here, this line of code, this statement, it changes the source of the audio to be of this song number one, which is this first one. Now, if I click run, there's no song right now. I can click nothing happens. But I want to click the first song. And you can see the timer, the time here to change to one colon to any two so I can play that. Right. In any case, that's okay, but I want it to auto play, right? This sucks if I just click here, nothing happens. I just changed the source, but I didn't play the song automatically. So let's make it play. Okay. So what you're going to do is after this line here, you know, I didn't mention this, but usually when programming languages in general, most of them require you to type the semicolon at the end of every statement here. Let's add a semicolon here, JavaScript is optional. But I always like to put it because there might be times when the one line might conflict with another. And if you're not aware of this semicolon, it might cause a bug. Okay. So if you're unsure, I just recommend always placing it until you understand better when you need it in those places to de-conflict. But in any case, let's do the second statement in a new line here. And that statement is going to be used to auto play or play this audio automatically when I click. So first you want to find the audio element the same way we did in the previous line. So we're going to ask document dot get element by ID past the string. Remember string sequence of characters audio player quotes, either a single or double doesn't matter. Now, when we do this, we get the audio player. Now we're going to ask the other player to load or actually play, right? Remember, an object like I said before has attributes and methods. Methods are like the functions that we can use to operate on the object like a car can drive. So the audio player can play. So we're going to say dot play. This is a function or method. So you need a parenthesis to execute here. You're going to say, hey, audio player element, please play whatever song you're assigned in the source attribute. Okay. This is the play function. Make sure you have the parentheses. Now click run in the top left. Let's try again. Oh, now it's playing automatically when I click. Okay. How's everybody doing so far? And make sure put a semicolon at the end. Better safe than sorry. All good so far. Okay. Now. Okay. Now I want to tell you this problem that we're trying to solve here. You can do it into many different ways. Okay. I'm going to try to teach you in a way that you can see that JavaScript can be used to manipulate the documented HTML document, right? But there are surely better ways to do this, especially a way that's mostly JavaScript, purely JavaScript code, not so much as HTML, because JavaScript can also be used to create HTML elements and inject them to the document. So you don't have to have everything laid out. In any case, with that said, let's consider the problem here. So this is great and all, but what if I click the second one, the third one? I'm going to know what to play, right? The source is different. Every audio file has a different URL. So I need to keep track of that some way. Okay. One way is what if each ally had an attribute that had this source, right? Maybe I take this instead of being here. I put it as an attribute of the ally so I can create my own attribute in HTML if I proceed, prefix it with data dash. Okay. These are custom attributes that we can assign to any element. And I'm going to call this URL, data dash URL, and I'm going to paste simply paste the URL for this song, this file, right? mp3 file. Now, when I call play item here, I need a way to access this attribute value. Now, the way we do it through the click event is the following. When I call on click, there's going to be an argument called event. So type event here, play item parentheses event, close parentheses. This is from JavaScript. So when you click, you're going to be provided with what's called an event object that has information about what happened, what kind of event was it? In this case, it's a click event. But in JavaScript, it could be in any other events, right? People are pressing the keyboard. People are moving the mouse around, either entering a region of the document, entering a box outside the box. They're hovering. They're doing all kinds of things, touch on the smartphone. There's all kinds of events. This one is just click. So it has information about the event, who was triggered, who triggered the event. In this case, it would be the ally, right? Because we click it. And many other things. Because we have information about who triggered this, in this case, the ally, we can access it and then access the URL attribute here. So here in play item definition of the function, add the event. Okay. Now, when we're defining a function, we call this parameter. Okay. But when we call the function, we pass an argument. You know, there's always two names for the same thing. That's technically not exactly the same. But it's the same, you know what I mean? So you're going to see these names a lot. So when you're defining a function, these are parameters. If you're calling the function like I called in line five in HTML, this is an argument. Event argument, event parameter. Okay. In any case, so event gives you access as an object. So if you say event dot target, that's the thing that triggered it. In this case, it's going to point to the ally or list item element. And the ally has an attribute data URL. Now there's different ways of getting that attribute. The one is with the function dot get attribute. Data URL. Another is you can use what's called data set. Okay. I was too fast there. Okay. This is one way you can do it. That's fine. Another way is if you say date dot data set dot URL. This is pretty much doing that. What I just thought, right? It's going to get the data dash URL value. Okay. So knowing that if you type it like this, right, you get that value for this. So we can use this here cut and the right hand side of the SRC. Now, if you remember, in this case, there's no quotes. Okay. Let me make it bigger there. There's no quotes because all these things have a special meaning. They're not literally the character E V E and T and so on. This actually means an event object that came from the function parameter that was passed as an argument when you clicked. And this event object has an attribute. That's the target which points to an element. In this case, the ally that target that triggered this event. And then we have dot data set, which is an attribute of the target with the element. Okay. Meaning data set is all the data dash, whatever. Okay. All the data dash attributes will be placed in one single location that we call the data set. Okay. And this data set, we can get that dash URL one. Okay. So this data set object dot URL, you can see objects in JavaScript. If you read more about it later, there's always the dot thing, which means the thing on the right belongs to the thing on the left. You can think of it that way as a beginner. In any case, let's test it out. We change the code, click run and want to test to see if it's working the same way. Okay. Let's click. Okay. It's working the same way. Okay. So what we just did, which made a change to the code, we're going to test it again to make sure we didn't break anything. Always make sure to do that. Okay. Okay. All good. So knowing this pattern that we just defined, we can do all of the others. Okay. We're going to add on click to the second ally. We're going to do the same thing, play item, call the function play item of the event. And here's the data URL is defined. And I'm going to paste the next audio here. Let me get it for you. I think this one. Yeah, that one. I paced in the zoom chat and I'll use it here. I think that's the one. And that's running again and click the second one to see if it works. Okay. It's working for me. I'm hearing the beat. All right. Any questions so far? You can see the same pattern, right? It just changes the URL. I know it's a bit hard to see. Maybe if I add a line there for you or something like this, make it easier to see. All right, then let's do the third one. I'll add what I want to something to happen when I click so on click attribute. I want to call the function execute the instructions from play item and I passed the event as the argument in closing the parentheses. Okay, great. By the function when we execute the function, it needs to access the URL. You need provide the data dash URL equals and let me paste the third one. I pasted the third one to the zoom chat. If you have any audio anywhere, you can use that as well, but I make it easy for you. I have already something that I got beforehand. Now click run. Click the third one. That's working for me. I hear the beat. Okay. Any questions so far? All good. Okay. Let's see. Can I do a bonus before we go? There's so much you can build upon this, right? You can add a next button. You can add a back button and all the stuff. What I want to focus right now, what if, okay, I click the first one. I want to keep this highlight here. Why not, right? I want to know what song is being played. Otherwise, I don't know what song is being played, right? That's the user. I have no idea, right? There are different ways you can do that. You can play it now playing. You can add something like now playing. And when you click one of them, you replace the text now playing something and that text comes from whatever you clicked. That's one way. Or another way is visually you can highlight permanently as it's playing. Okay. When I click, let's try to do that. So to do that, one approach is if I am click this, I want to keep the permanent highlight by adding, it could be either a class or a data dash attribute that indicates this is the active or current song. Let's demonstrate with, let's see, let's try with a class. So let's add the class to the first one. And I'll call it active. And that's pretty much going to be the same style as background color DDD for the hover here. So I can add that active comma with don't forget the dots because you want to target. Okay, so this means target element that has class active dot means class and the comma means or. Okay, so instead of me having to type active background color DDD the same thing, right? I don't want to type the same thing again. I can reuse this thing by just putting the active here with a comma. Okay, same thing. I want to reuse that. So if I click run, I can see the first one is permanently highlighted right, but that's just a demonstration we don't. So every time I add the class active to the ally, it becomes highlighted. So that's the what we have to do we want to use JavaScript. When I click, I add the class active to whatever I click. Okay, so let's learn how to do that. Okay, going back. When I click, it's going to call play events, play items, sorry, play item function. So we want to be able to also take the audio player right document hey document get element by ID. The audio player, the element that has the ID audio player. Oops, that's not it. Is it? No. Sorry, we don't want to add active to the audio player want to add active to us to the ally right. So to get access to the ally, simply say events dot target, because that's what triggered even now I want to change the classes so I can say dot class list. Like this, to access the list of classes, and it has a function to allow me to add. Okay, they can see dot add or dot remove. If you don't remember it. Let me show you how you can find out. You can either Google it how to add a class using JavaScript, or I already know it's class list, JavaScript. So I can look at the docs and eventually you find this very handy, either the best ones are W3 schools or the empty and they're always at the top. Mozilla developer network gives you a lot of information about this element class list read only property returns whatever examples this is the example. So there's you see there's one to add a class not want to remove. So just read the code and see what how to use it. In any case, let me paste it in the zoom chat. That's a good resource going back there. So we're going to do dot add. Okay, Matt. So we got event that targets the ally. It has an attribute called class list. Think of it something that belongs to that element right list of classes basically what we typed in the class attribute. So I can call to add the operation to add something to that list. I want to add the active class name. Make sure this quotes because this is a string click run. If I click that, see it's permanent now. It plays a song and then after that it adds the active class. If I right click it inspect with deaf tools. I can see that I see this class here active. You can also click this dot CLS. And you see these are the classes applied to this specific element. If you click uncheck this is before the class with the class before the class with the class. Okay, so it's there. So you can try clicking another one. It's highlighted click another ones highlighted. But it's nice but you see the problem right. I didn't remove the class from the other ones. That's something we have to fix. Okay, one approach is you can just go through every single list item remove it. And after that finally you add the current one. That's one approach. Okay, so if we every time we have to go through all of them and remove all the class. Active. One way of doing that let me show you how we can target multiple elements. So we can use before we add active okay before so break a line before okay. Not after before we add the active we want to remove the active from whatever one was before. In this case we don't know exactly which one that's why I've got to go through each one of them. So the we're going to ask the document hey document can you get elements plural okay elements by class name. And the class name here. Is active. Okay. So when I do this is going to go through the whole document find all the elements that have the class active. Okay, now this in practice not very good because the doc could that could be multiple things in the document multiple areas of your website with the same class name active. So you want to narrow it down a little bit maybe make this not more unique. Maybe play audio player active or something, or even use a different selector that allows you to narrow down by element inside only this UL with the ID playlist. We can use query selector all for that. But in any case I want to teach you about get elements by class name let's assume there's no other element outside this thing that has the class active okay. Any case this will return every element. What's called the HTML collection. Like think of it as a list of things in this case list of all those elements those allies that have the active. Last name. So let's take this. Now I want to teach about their was I didn't talk about a lot very to kind of outer time, but I can store this value to use later. And to do that, you do it like this. Let's call it collection. This is the name and equal sign like that you don't need the spaces just for you can have it like this, but I like to add spaces and then the keyword here before that is cause because this very is only defined once. Okay, meaning this value here I only assigned once I don't need to change it later. This is from the JavaScript syntax. Now I can give any name to the variable this case they call collection. Now I can go through all the items in this collection using what's called a for loop. In this case I'm going to use a four of. Now the syntax like this I know we don't have time to talk about it in depth, but just do it like this for const. Now give it a name, maybe item or whatever I'm going to call a playlist item of collection. And then curly brace close curly brace. Now for loop is something we can use to go through a list of things repeatedly repetition. Okay, in this case I have a collection that could be multiple things and I'm going to go through each one of them. Okay. So every time for every one of them, I'm going to do something that's defined in this eight line eight here. So I can say, okay, the first one is going to be the first list item. The second time is going to be the second and the third time is going to be the third. So it keeps repeating these instructions between the curly braces for every element. Okay, it keeps repeating. That's called a for loop. All right. In any case playlist item gives me access to the ally. So I want to take that playlist item. I imagine this ally here is replaced here. Okay. That's what playlist item is referring to. If you imagine that you can say, okay, I want to access the class list. And I want to remove the active if there is one, right? If there isn't, we don't care. It just doesn't do anything. But we want to do this because we don't know which one has active class. So we got to go to each one and possibly remove it. Is it the first one? Try to remove it. Is it the second one? Try to remove it. So the third one, try to remove it. Okay. And then finally, when we do, after doing that is when we add the one, the active again, but to the one that we clicked. So you can see I'm wiping everything clean. And then I'm painting again on the one that I clicked. Okay. The reason I have to do a wipe clean is because I don't know exactly which one I clicked before. So that's something we could improve on, right? This is a very simplistic way where you could keep track of the last one that was clicked somehow. But I'm just keeping it simple. And it clears. I'm click. You see what's happening? I no longer have that permanent thing going on. So now I know visually which song is being played. All right. Now as a bonus, like I said, we can also add a text saying what song is playing. Let's go here and before the playlist, actually after the name playlist. Let's say, let's add a div saying now playing colon and I'm put a span here. Now the span has nothing inside because I want to replace that with, I want to put the name of the song here. Name of the song. Okay. But for now, there's nothing. Let's add an ID to that. Let's call it current song. Click run. Now playing. You see that? Now there's nothing. Now the moment I click one of the allies I call play item, it's going to call this function. It's going to go out through every line from the top to the bottom between the curly braces. It's going to set the source to change the song in the audio player. It's going to play so we automatically press play instead of us having to press. Then it's going to go through every item, every list item, remove the class active if it has the class active so that we remove the highlight. And then it's going to add a highlight. Then after that, let's let's do the change this now playing right now. I want to change what the text content of the span that has the ID current song. So let's go document. Please get me element by ID. The ID is current song. That's the one I define here for the span. Okay, span element as an inline HTML element. Okay, of text. We can add some text now and say dot tax content to access the text. This is an attribute. Okay. And I can reassign it or assign a new value with the equal sign. For example, new song with quotes. Okay, if I do that and click run and click one of them, you see new song appear there. Now, obviously we don't want to say new song, right? We want to say the name of the thing we clicked. So let's copy the text content of the ally and place it there. So to do that, instead of saying new song, how can I access the ally event a target. So event a target. If I want to access whatever tax content it has is the same thing dot tax content. So I'm taking the tax content from the event a target that's the ally right the name of the song whatever I type between the open and closing tag for the ally. And then I assign to the tax content of the element has ID current song, which is this span here. That's the span right after now playing colon space. Let's try that click run. See now playing is changing. Now we have a visual queue and a textual queue. About which song is currently playing. All right. So with that I finished this lecture.