Let's get back to doing some JavaScript and I'll do some fun stuff. Let's say that I have a button here near the dog. Let's do find the IMG here, the Dalmatian dog. Let's add under audio, add a button here. Then let's say, pet the dog in some emoji, and then add a dog emoji, just for fun. What I want to do is when I click the button, I want the audio to be played that the dog barks. If you click that, the dog barks. Is it possible? Yes. Let's do it. So first, we got to add and on click and add a function that we would like to execute when we click the button. Let's call it bark and then call the function with parentheses. Now you have to define the function bark by going to the JavaScript file and make sure to define it outside an existing one either here or there. I'm going to define it at the bottom here and function space bark, that's the name, parentheses. I don't have anything as input, so it's empty inside. Then finally, the body, we add the curly braces. You might have noticed we always add some spacing, at least two, whenever we open a curly brace, and that's called indentation. It's kind of the same concept we did for HTML when you open a new tag, and it's just for us to understand that whatever writing right now is contained within the function that is between the open and closing curly brace. You could have written like this, but as you have more and more code, later on, you realize it's really hard to understand visually as you read the code where things are, so that's why we always have indentation, and VS code by itself will always add automatically when it press enter. Anyway, what we want to do here is to make the barking sound play, you have to first find this audio element and then ask it to play. Now how do we find that? Well, there are different ways. The way we've learned so far is by element ID, but there's also other ways. So here's the element. We could add an ID here and do get element by ID, that's fine. Let me show you a different way. You could also find this by class name, you add a class, and usually if this class is not something for styling, but for JavaScript, people traditionally would add the suffix js- to the class name. Let's call it the js-audio-player. Now to find that, we can call in the document and dot, and there are different ways. If I say get element, you see there are some suggestions by VS code, like get element by ID, by class name, by name, tag name, so on. Now the one you could do is get element by class name, but did you notice there's a nest, plural for elements? That's because multiple elements could have the same class, which is different from ID. Only one element has that specific ID because it's unique. So if you were to do the elements by class name, and you would have to give, okay, what's the class name? Well, it's js-audio-player. But then this thing would return not one single thing to you, but many things. Now we'll talk about that in a bit, but to access the very first thing in this list of things, you have to use square brackets here and give it the position of this element. In this case, we count from zero, so the zero position. So assuming there's only one element with this class, js-audio-player, and that one will be this one on the page, okay? If there's multiple, and if there's one before that, it would be the wrong element. But anyway, that's the assumption. There's only one element with this class. So this will return us this audio element, and then we can actually call on that by saying dot, and then call it to play. There's a play function that belongs to that element. So if I click bet, I hear now the dog barking. What's happened is basically the audio auto plays when I click, okay? Now other people might be wondering, is there a different way to select that other than ID and elements by class name? Yes. There's also query selector. Let me show you. You can do document, the dot query selector. Now there are two versions. The one selector, which is to select one thing, it goes through the document, and the first one that it finds, it gives you back. Now if you do all, it's going to give you all the elements that match your criteria. So it's a list of things. Now I'm going to use query selector, and the argument here to the function between the parentheses is actually what looks like a CSS selector. So if you're familiar writing CSS selectors, just put under quotes the selector here. In this case, we would have to select by the class name, which in CSS we write dot, and then follow with the class name, js-audio-player. And this will give you back that audio element. And then you can just say dot, play, parentheses, semicolon, and try again, let's test. Click the pet the dog, and I hear the sound of the dog barking. Now the sound's probably not in the recording, but if you click the button, you can hear. All right, so that's the first fun thing I wanted to do. Now let's move on to another thing, and that's images here. How do we make a button here to make it show another image when you press next? Kind of like an image gallery. But before I do that, I forgot to tell you, what's the point of having the other player there? Can we hide it? Yes. Go to the audio and remove the controls attribute, and now you don't see it. And then when you press pet the dog, it's still here to sound because the other player is there. It just doesn't have a user interface of visuals or controls, but it's actually there. And it's controlled now by the button, right? Okay, that's cool. Now I want to show you how we can make kind of an image gallery here. Let's add a button after the image. I'll call it next image. What I want to do is when I click next image, this image will change to another one of by choice. Now, what controls the image? What's showing? Well, it's the SRC attribute, so we use JavaScript to manipulate this element, the document, the attribute SRC will have a different value, right? If we change the value of SRC, it will appear. Another image will appear. Well, that's what we got to do. So let's add a non-click and then let's say next image parentheses go to JavaScript outside the curly braces of the other functions, add another definition of function, next image, is empty because no parameters there. And then here what we got to do is first find the image. Now the image is there. It doesn't have an ID. You could have an ID, get element by ID. We could add a class and do get elements by class name or query selector of the dot. Now let me try to show yet another way just for the sake of education, but usually the best way is probably query selector, but let's say document dot get, let's see what we got here by name, tag name, how about this one? I wonder if we can give the tag name IMG. And because this is plural, it will give you many things. So to access that is bracket zero. And to change, assuming this is the correct way to find the image, that gives you back the IMG element. So I can just change the attribute dot SRC by saying dot SRC equals sign a new value under quotes. Now for the new value, we got to find another image. Let me see if I can find another dog image. Okay, let me try this one here. So I'm going to use this image. If you can find any image you want, just go to your search engine, image search, click the image, view image, copy the URL of the image, or right click the image, copy image link. Anyway, this is the image URL. Let's see if it's working. Yeah, there you go. When I click next image, it's actually working. So what it does is, okay, we click the button, it calls next image, next image from the top to the bottom. Once we call a document, please find all the elements by the tag name, which is the element name IMG. So it finds this one IMG and access because it could be multiple images on the same document, it's going to get the first one, which is sub brackets of zero. And then for that one, this back, this one gives you the IMG. And then the dot RC gives you access to the source attribute, and you can change it equal signed by hand side being the new value. Now this is the assumption here is there's only one image on the document that in practice, that's not the case. So this is a really bad way to find the element, okay? So I recommend either add an ID or use query selector with a unique class name that you assume nobody else will use, usually JS-prefix. Okay. Okay, now let me show you how it can build like many images. For that, we got to learn about arrays. So let's go to the browser. Let me clear this. I mean the browser console, by the way, press F12 in any browser, go to console tab. I can clear with this either trash icon or this negative or denied circle, circle of the cross. So let's learn about arrays. Like I showed you before, there are different ways we can store information in JavaScript to learn about numbers, there are strings, which is sequence of characters, there's object, which is basically pairs of key and value, that is property, and it's value separated by comma. And arrays is basically a list, a sequence of values start grouped together. So we already learned about variables, right? We can hold things in what's called a variable to use later. But so far we learned that variables for example a equals two only holds one thing. Let's say word equals hello, and that's only one thing. Can't we just hold multiple things together in a single variable? Yes, with arrays. So let's say you have my favorite fruits. Equals, let's define this variable as a list of what we call the array. That's the official name. And the syntax is square brackets. Remember curly brace is object, square brackets is array. So you write the elements, what we call elements, the items to this list, separated by a comma. So if you have nothing, this is an empty array, empty list. If you have one of them, for example, apple, you can place it like that. If you need more than one, separate of a comma, let's say oranges, orange. And if you want more comma, banana, like that, and then enter. Now you notice the browser has this nice interface, live visual, it can expand and I can see this is an array. See prototype array, and it has one, two, three things. Now those things, those items to this list, they are called elements. So we have the first element, apple, which is a string, a sequence of characters. We have the second element, orange, and the third element. You see the dot length here? This is the attribute of the array, is three. So whenever you say the variable name dot length, it gives you back how many elements the array has. This variable is holding an array, okay? If you want to access each individual element, you have to use the bracket notation like this. Variable name that holds the array, brackets, square brackets, the index, which is the position of the element. Except here we got to count from zero. You don't count one, two, three, we count zero, one, two. So the first element is actually counting from zero. So if you say zero and close the square brackets, you got back the first element apple. If you do fruits, square brackets one, that's the second element. Remember, count from zero, zero, one, therefore is the second, which is orange. And then fruits, brackets two is the third banana. And if you try to do three, which doesn't exist, it gives you undefined. Now scrolling back here to the nice live visual, you can see zero is the index of apple, one is the index orange, two are banana. So if you ever forget about the counting, just make it a list like this and expand and see the indices here. Okay, so that's how you access. So that's why we saw just now when we do document get elements by class name, for example, and I say, for example, GS audio player. This is actually giving me something that looks like an array. In this case, it's an HTML collection. You see the square brackets to indicate it's like HTML like. Now I think what's going on audio player? I think I might have, I need to refresh the page. Let me refresh so we can see it actually. Let me save all my files in the VS code and refresh this. Now I think if I point to the DOM and check the other player is still here of the class, right? Now we have it. It wasn't finding before because my code was out of date. Okay, going back to that, you can see when I paste back, you can see it's HTML collection of one thing here. But if I do it like that, I get the collection. If I expand, it's like an array. So you see the first index has this element, which is actually hidden right now, right? We can't see visually, but it's there. So length one, meaning you only found one. And if you want to access that first element, remember, brackets sub zero. And there you go. You've got the actual audio thing. Let me do the same with document get elements by tag name. And let's do P because I think there's at least two P elements on the page, right? Get elements by tag name. As you can see now, this one is an HTML collection with three things. Now it's not necessarily an array per se, but it's an array like structure. Therefore, we can think of it the same way. So we have zero, one and two there. See, if I kind of point to it, it highlights in the content. And like that, and like that, this one is, I think, here. So there's three elements, so that is three paragraphs on this page, this document. If I want to access, for example, the second one, this one, how would I do it? Well, you have to say, by the way, I pressed the up key in the keyboard to access whatever I typed before. Brackets, square brackets, the index count from zero. So zero, one is the second. If you don't remember the county, just put, okay, second element minus one, that's index one. And that gives you back the paragraph. Now, this notation here is nice to investigate the properties of the elements. So if you expand the first or the second one, you can see all of its properties, because it's actually, you can think of it as an object. So an object has many properties, and can investigate all the stuff. Oh, there's a property for properties. So you can think of it as an object, and you can think of it as an object. So you can think of properties, and can investigate all the stuff. Oh, there's a property for class called class name. And remember we did text content? Let's see if we can find it. Dot, dot, dot. Oh, there you go. This is the text content property. It's what we actually see in there, right? This thing. It's very powerful to debug and understand what's going on. Okay, so now that we know about arrays, let's make the image gallery going back to VS code. What I want to do is I want to actually make an array of image URLs here. So we can either do before all the functions or anywhere outside the function is fine. So let's add a list here. Square brackets. And for the sake of readability, I'll break a new line. So the first thing I want to get is the first image, and I'll make a list of image links or URLs. So the first one is that one, but I got to have quotes because it's a sequence of characters as they are, nothing special. So that's my first image URL. I'm going to separate a comma, okay? Comma there, break a line. Now it could be in one line, but it's very long, so I'm separating into multiple lines. Now the second image is the one we just used here. And we're going to put it here as the second element, comma. Okay. Now we've got to find another image. Let me see if I can find. I'm going to go to bing.com, some dog images. How about this one? Like this one, quick view image. Now I got the image open, I can copy the URL from the address bar, control C, my case, or command C on Mac. Go back to VS code. Now the third element will be that URL. And if you want, you can add a dangly comma here. It's totally fine. I usually add it because, you know, I don't want to, it's good for get diffs. And in case, you know, getting to the habit of never forgetting. Anyway, so this is an array of three image URLs. And I'm going to store in a variable that I'll call images equal sign. Now I need a constant for the syntax of the language. I only defined it once and only once. I don't need to redefine it. So it's a constant variable. Great. Now why did I make that? Because I want to be able to switch to a different image every time, meaning first it will show the Dalmatian. When I click next, I want to go and fetch the second, the next element. It is the index one. And then when I click next image again, index is two. See that the index starts from zero. And every time I click the button, the index will go increment, right? It goes from zero, then one, and then two, and so on, if you had more images. Therefore, I must keep track of the current image index here. To create a variable for that, let's call it image. Let's call it current image index for the sake of being descriptive about variable names. I initialize that to zero because that's the first image I want to show. And let's make it lat not constant because I want to change this value here. That the variable is holding every time I click the button. Let's make the variable be changing over time, not constant. And I usually like to finish semicolon if you want at the end of everything. Anyway, so what's going to happen here when I click the button for next image, I want to go to the array and get the next one. But before we do that, let's first increment current image index, change the value to the next one. And to do that, I can do some math, right? So I can take whatever is in current image index, initially it's zero. I can add one plus one, and I usually like to add a space. And then I can store that as the new value for current image index. So remember, the thing on the right becomes the new value for the thing on the left. So what's happening here, initially current image index is zero, zero plus one is one. Therefore one becomes stored as the new value for current image index. Okay, keep that in mind. That's what's happening here. Now that's great, semicolon usually. After that, we have the next image index. I'm going to use that to access the URL. How do we access the something in an array? Well, what's the name of the variable holding the array images? How do I access an element, square brackets? What's the index? Well, it's going to be first zero and then one and then two. But that value is already held by this variable here. Therefore I can use that name here within the square brackets. So that way the first time it's going to be one here, right? And then next time it's going to be two, because every time before this line is changing the value of current image index. Finally, this gives me back the URL, but I got to assign that to the source of the image. Therefore I'm going to take this and put as the right hand side of that statement. So I find the elements by tag name. The first image, I change the source to whatever this is. And this whatever is just accessing images. Okay, the first time is going to go to images. Find the element index one, which is this one. So think of it visually as this value going here. Okay, and I like to finish off semicolon. Let's try worked next time. Remember current image index right now is one. When I click, it's going to be true. There you go. Now if I click again, guess what happens current image index will be three, but that's undefined. So broken image. Now I leave you to use an exercise to figure out how you could first add a previous image button. And that one would just just add a new function previous image. And instead of adding, you just subtract one. Now for the thing of next image, you there's different ways, right? One way is you could check. Okay, if I reach the end, I don't want to go to any other image. I can stop not do anything. Another thing you could do is what if I circulate back to the first and reset current image index to zero. You can do that if you want. Now to do that an easy way here is going to go here. Take this thing and that is just percent, which is the module operator with the length of images. And if you do that, click next, next, it goes back to the first, second, third, first, second, third. Okay, now what the heck happened here? Let's go in the browser. Let's learn about module. So when you divide like 10 divided by five, that's to remainder zero. So when you say 10% five, it's the division remainder, which is zero. When you have eight, let's say nine divided by two, that's if it's into the division is for remainder, that's the rest, right? Now, if I say 9% two, that's the remainder, right? Because if I divide nine by two, I can only put eight. I cannot put four, right? Four times two is eight, but I have one remaining. So that's what the module is for to get the remainder of the division. So when you have index zero, one, two, and you want to reset that back to zero, because first it's zero, the index, right? Index zero, and then index is now one, index now two, and then the next time it would be three, right? But if you percent that with the number of elements, number of images, which is three, that gives you back zero. So it goes back to zero, that's the way to reset, right? If you do like zero, that's zero, no remainder. If you do one itself, if you do two, two, then if you do three, it goes back to zero. Okay, so it keeps circulating. So that's what's happening here. And make sure to add the parentheses. I think that is important. Otherwise, you might mess it up. It's mathematical precedence. First, do the addition and then do the module. And the reason I put always image length here instead of three is because what if I had another image? I had another image. The length is four now. I would have to manually change this, but usually you want the computer to figure it out. So if you put always image length and I put another image, another image, this value will change to five automatically. So I don't have to manually go and change it. So the computer adapts. Nice. Okay. Now with that and all that understanding, let's go and actually build a message board. Like when you post to Twitter or X, when you post to a Facebook feed, when you post a comment on Instagram, how do we do that? Let's implement that. So I'm going to go here. Index page. Oops. Index page at the top. Let me add a link a href to messages dot HTML that we're going to build. Now let's create a file under SRC messages dot HTML. Let's add a part of play. I'm going to type HTML tab and then got a head tab title tab. Let's call it messages. That's what appears in the browser tab body and just something there later. Let's do each one messages. Let's add a doc type here for the sake of specifying HTML five. Let's add a text area text area. That's what you're going to type. Let's add a button. Let's enclose that in a form. If you want to use the form group. We can do that. Now let's see it working. Let's go here and add our link. Actually, I want to add a link here that goes back home to index home. Save that go back to index. I want to click messages and this is what we just built. Basically, there's a link that goes back home. There's an H1 for the title and there's a form with a form group here. Last text area and the comment button or submit for the form. Let's add a type for the button for foreign submission. So type submit and you notice the style of the form didn't change. That's because we got a link to CSS from global that has a definition for form group. Let's go here before the closing head tag add a link to global.css. Now it got styling. Okay, now what's going to happen is let's add a name for the text area. Okay, let's take a look at what we call it. Let's add a label, label comments. Let's add an ID to the text area. Let's say message form dash comment and associated with a label, message form dash comment so that way when I click comment it focuses the text area. Great, you can add a name here. Let's add comment. That way the back end will understand that's comment. Now for the form action here, let's see. We don't have a back end yet so let's leave it at that. So what we're going to do right now is when I click comment, I want to add it to the bottom here. How would I do that? So let's go to the form add an event handler on submit actually. And let's call add message function just like we did for click. This is a submit event so when I click submit this function where we called. Now we need to define that function somewhere. Now let's create a JavaScript file just for the messages. Messages.js to match the file name messages HTML. Put it in the bottom here and I'm going to include it. Go to the before the end of body. Add a script source messages.js. Whoops too many assets. And add a closing tag. That way you can write the code here it's going to be late. Okay, let's add a function add message. And then let's see if it's working actually want to show you the DAV tools. So one way you can see it's working is if you can print a message to the console in the browser and to do that you do console. Object dot log method or function and parentheses you can put the message. Hello, this is add message function call. Okay, so let's test it external browser after saving everything. I'm going to go here refresh click messages. Let me open the browser DAV tools at 12 go to console. Now when I think it's going to mess up because going to submit somewhere let's see. Yeah, it's messing up but there's a message appearing there. So by default the form submission will usually load a new page so we have to prevent that from happening. So what we do is typically in a JavaScript function when we submit the form, we have to say event dot prevent the fault call it like a function to prevent the default behavior for the form. But the problem is I don't have access to the event object but that's actually always available to the handler functions for events so you can actually add event here as the parameter. That's what we call the input to the function. So whenever you have on submit it will call this function with an event argument there as the input. Now you have to explicitly type it here otherwise it won't work so make sure there's event there. Now the name is arbitrary I could add whatever there and have whatever here. Okay, but usually we call it event. So when you call click there an event object will be provided with information about what just happened. And through that event object there is a method or function called prevent the fault to prevent the form from loading a new page. That's the default behavior. Okay, going back to the browser externally. I'm going to click comment after refresh. Actually I want to go remove go back because I had some stuff in the URL refresh click comment. Oops, what's happening something. It's not saved here. I didn't save my file in VS code. Let me refresh again. Click comment. There you go. You see when I click that's a submit event. And what happens it calls the function that we define and message and it calls the console dot log to print a message to the console and the message is here every time I click the message here you don't see that there's this too because Chrome kind of consolidates them all but every time I click. It's actually printing three or five of the same messages. Okay. Let's put it one here and click again. You see it's appearing. Okay, so it's working now let me show you another way you can debug this using the DAB tools if you click sources in Chrome. It's another tab in Firefox. Let me sequence show you Firefox. So share Firefox window here. So Firefox opened up tools of 12. I think it's called a debugger. Yeah, and press control P. Messages.js to find a file. Yeah, there you go. Now back to Chrome. In Chrome is sources and you press control P. And then you type the file name you want to investigate. In this case is messages.js. And here we see the source code for that file. What we can do here is I can put a break point to stop the execution of the program at this point. For example, if I put a break point by clicking the line for when I click comment, the program, the script will stop in line for and you can investigate what's going on at this point in time in this particular location. For example, if I hover of event, I can see what's inside that event object. And I can see there's target. That's the form itself that trigger this. I can see all the other stuff. Okay, there's more stuff here from the prototype. And the prototype of the prototype. And there's prevent the fault there. You see it's F. It's a function. So that property is a function. Anyway, you can investigate stuff there. And you can also go to console. I think you can open console with control back tick here. Yeah. And you can type event to see what's inside there as well if you don't want to hover. And you can open that and do all kinds of stuff here. Okay, so press if you want to continue to the next break point, you would press play and it would resume. So every time I click, it's going to pause in the break points. You want to remove it after debugging. So you can click the break point again, or it can on the right hand side, right click and remove break point or all of them. And click continue. Okay, so that's debugging the dev tools. Now let me show you how we can do the message here. Add to the body of this thing. So to do that, we're going to add a container for the messages after the form. Let me add div here. And this will be the container for the messages. Let me add an ID. Let's call message list. And what I want to do is when I comment and click comments, right type something, click comment. I want to add a new div here with whatever I typed. If I type ABC, I click comment, I want to go to message list, inject a new div with ABC like this. Okay. And then there's going to be another one every time I click comments. How we do that in JavaScript. Well, we already have the hookup for the add message here. And the console logout comment out, but for the reference, I'll keep it here. So first we got to first go to the text area, find that, read the value, take that value, pregate or fabricate a new div, inject that value and finally take that new div, inject into the document under the message list. Okay, those are the steps. How do we access the text area value? Well, we can use the ID. That's the straightforward way here. So for the sake of time, we're kind of running out of time. Let's just do that document dot get element by ID message for a comment that will give me back text area. Now to access the value, I can say dot value. That's whatever the user type. Okay, so that's going to be whatever the user type. Now we can put this in a variable for later use. That's totally fine. Let's make it, let's call it comment equals and put the const there. Now whenever I say comment, you get what the user type. Okay. Great. Let me call. Now we got to create a new div. How do we do that in JavaScript? We can create elements. Yes, we can create an element first going to be in memory. Nobody's going to see it. And then we take that inject into the document. So we can say document dot create element and then pass the name div as a string. And we can put that in a variable. Let's call it the div element equals and then we can do whatever that let's say I want to change the tax content div element dot tax content equals something. Let's add comment here. What is comment? Well, go to line six. The definition is whatever the user type, right? Grab the text area, grab the value, which is whatever the user typed and then inject to the tax content for this new div. Finally, I want to take the new div and inject into the div of message list. Well, to do that, I've got a first document yet element by ID message list. That's the ID, right? And then I got to do the following dot append child, which adds to the end of the list to the end of the div. And what do you want to append the div element itself, which is in the variable development? Let's see if it's working. There you go. And if I do comment again, keeps adding and adding and adding. Let's do bug and doubt tools so you can understand what's going on. So DevTools in Google Chrome. Make sure to save everything. Save, save, save, save. Refresh. Refresh. Okay. I got sources, control P, messages dot JS. I got it here. Let's put a breakpoint line six. So I'm going to press type ABC type comment. Now let's investigate this. So if I hover over. I got events. If right now it's comment is undefined. So if you want this line to be run, you can go to the next line by pressing this icon here, which is basically F12 in the keyboard. So it goes to the next line. Okay. Now we got to comment defined and it can see it's ABC, right? You can play around if you open the console. And if you copy this code here to understand what it is and press enter, you're going to get the text area. Oh, that's the text area. Okay. What happens if I say dot value? Oh, it's ABC. What I typed. So you can investigate what's going on just by having this here and opening the thing. Great. Now we see comment holds ABC. Now we can go to the next one and investigate what this div is. Oh, okay. There's a lot of stuff there. Basically it's an empty div and then go to the next line. Now before I do that, see the div here element, the variable that holds the new div. If I look at text elements, sorry, text content is empty, right? Watch what happens when I press F10 and I investigate div again. I can either hover or type it here. Let's type it here. Easier. Oh, I want to dot text content. Now it's ABC. And if I hover, scroll down, should also be ABC there for text content. There you go right here. Great. And then you can keep going and investigating stuff. Look at this. Copy this one. What does it give me? Well, it's going to give me the message list, which I kind of can't see, but if I hover, increase there. It's right there. It's kind of empty. You see there? It's pointing to it. All right. So after that, it's going to add that and you can resume. Before you resume, you want to stop debugging. Just remove the break point. Play. Now let's investigate the DOM. Click elements. And you're going to see here. Oh, by the way, there's a, I forgot to do mess up. Something's messed up in the DOM here. I think I messed up. Let me see. Going back. I put the closing tag. I forgot to slash. That's why the DOM is weird. Make sure it has a slash here. Okay. Put the closing tag of the, otherwise thinking everything was under the A, which is wrong. So I saved that and fixed it. Anyway, going back to Chrome, you see it's weird. This shouldn't be like that, right? Let me refresh. Now, now the A is there by itself and the other things are outside. Great. Let me type ABC again. Comment. See what happened here? Notice ABC was added. Yeah. If I do it again, watch what happens. Keeps adding more and more divs. Now, obviously it's hard to distinguish the comments. So you want to add a class and style it. So let's do that very quick. So basically I'm going to go here. I'm going to create a new CSS for messages, messages.css. I'm going to link it. Let me put it down here. I'm going to go to messages.html, link here after global, messages.css. Now I have access to this file. Let's add a .message list item and define that with some border. Like that. And maybe some padding, 16 pixels. And, yeah. And if you have message lists here, I want to add a space after each. So I want to go to the hash message list. And any .message list inside will have margin bottom, let's say 8 pixels. So they're not close together. Anyway, make sure to add this class when we're creating the new divs in the JS file. I would have to go here before we append. We add a go div element, access the class list. And then .add the new class, message list item. Basically, okay, div element that's in memory. I want to add a class. Please check the class list property. And then to that you're going to call on add and pass the class name you want to add to that. Okay. And then when I comment ABC, you see now it's like that. And then when I comment not a one, there's a space between. Let's go to the browser investigate. Refresh ABC, see now there's a class there. And if I go here on the side dot CLS, oops, select the div. See the message list item without and with the class. Now if I add another one, it's there. Why are they separated because I added some styling there like this. Like there's an element of a class message list item inside an element of ID message list, which is the this one. I want to add margin to the bottom. So if I remove it, they're close together at another one, remove this close together. That's why I added that typically want to separate the things and instead of looking from the perspective of the child, you want to look for the perspective of the container of all these list items and you want to set the spacing there instead of each one. Okay, because these could be isolated anywhere could be placed anywhere and they could care less what they're being surrounded by. That's the way of thinking. So you want always the parent of these children to be setting the spacing between them. Okay, great. Now notice when a comment doesn't clear this usually want to clear that and remove that. So how do we do that? Well, after I add the comments, we can go here and say, okay, what which one is the text area. This one, right? So I can copy that. Okay, get them by ID, the message for a comment gives the text area and I say dot value equals empty string. Just double quotes or single quotes with nothing between. So when I do ABC comment, it glad's cleared. DF. It's as simple as that. If you want to create a variable for this, since we're using twice, you can do that. Let's add a, can add some style to separate the button there to kind of ugly glued to the list. Maybe add a H2 here. Latest. I think it's possible if you want to add to the top. Let's try. I wonder if there's, yeah, there might be a function can add to the top instead of a pen child to the end. Anyway, I think that's it for this lesson and I hope you like this and I'll see you in the next one.