Okay, today I talk more about JavaScript. We do more exciting stuff using what we call vanilla if you ever heard the term vanilla JavaScript. It's pretty much JavaScript without using any framework or library to help you out. And let's go. So I'll be using the source code I've been working on. This is the repository, and I'll be opening Visual Studio Code. If you recall, we have a source directory, SRC, and we have the HTML files, CSS, and now .js JavaScript files. Last time we worked on this, if I live-review that, it's like that. Today I want to work on a message board application. Basically it's like any kind of, if you're going social media today or any popular website, you always have some text box where you can type some comment or leave a message, or even if you're chatting somebody else, right, you're doing DMs, you're a WhatsApp or e-message or whatever, you're always like, there's a box, you press the button that submits a message and you see the message list appear. So I want to do that, and we'll leverage some fake data to do it. So to do that, I first start by creating a file, SRC slash messages.html. We got to do the boilerplate, so if you forget about HTML, remember. So I was the same, you got to doctype first. If you don't remember, you can always right-click any one page you have already made, and you can open that somewhere else. Let me see, view, split down, and then I can open index, and then I can recall the structure from there. Basically, less than, bang, doctype, all caps, space, HTML, greater than, that tells the browser we want to use, HTML version five. And then we always have the HTML tag, always close it right away. And inside that two things, the head and the body. So open those flags and close them. And the head typically have the title tag, too, that will appear in the tab. Let's call that messages or message board, about that. And then the body, we will have, let's say, H1 message board. And then let's add a generic container. So a generic element in HTML is just a div. Let me remove my thing here. Sorry about that. Restart, there you go. Going back, we got the div, close the div. So I'll use this div as the container that will contain all the messages. So I'll give it an ID, call it message list, separated by a dash. Make sure the ID has no space, okay? No spaces. Okay, so for example, I could have like a generic div like this with some message, hello world, there. And then to make it pretty, we can add a class here. Let's call it a message list item, how about that. And then we can define the CSS later. Okay, let me preview this. So as we go through, we can see it look, what it looks like. So if you recall, what I use is Visual Studio Code's extension called Live Preview. So if you haven't installed that yet, you can do a search for Live Preview, install the one for Microsoft. And here you can go to View, Command Palette, and type Live Preview, call and show preview internal browser. That's what I use right now. Or you can open this file in the browser of your choice. Okay, so we got the message board there. I want to make this have a style. Otherwise, I don't know if I have like multiple, for example, if I copy this by highlighting and pressing Alt Shift down. Now I have two messages, but I cannot distinguish one from the other. Obviously, I know it is different, but maybe the person wouldn't know. So I want to add some CSS. So typically, we add a new file. Let's call it messages.css. I will open it at the bottom here so we can kind of code along. So I wanted to find the styles for these elements that have the class message list item. So I say dot, that means we want to target elements that start, have the class message list item all separated by a dash. And I want to add some border first, one pixel solid black. Remember, I'm using the shorthand property for CSS. That takes three values, in this case, the first for border width, and then for border style, and then for border color. Of course, you can always do three separate properties, but that's just too tedious to write them out. Okay, let's see how it goes. Now remember, we can write it here, but our HTML5 doesn't know about it, so we have to link it. So to link CSS, we typically go to the head and locate the end tag, the closing tag. So before that, we add a link tag, right? And inside as an attribute, remember attributes in HTML, we add to the right hand side of an open tag name. And REL is a style sheet. And then we got href. And you have to provide the path to the CSS file, in this case, it's relative. So in the same directory as messages.html, so I can just say that. It works off the bed, because link is a self-closing tag, I don't have to say the last-end slash link greater than. Okay, that's great. I want to add some space inside, right? That's called a padding, if you recall from CSS. Let's add a padding shorthand property for the top, right, bottom, and left. So that's 16 pixels there. If you want to decrease your curve, maybe eight, looks like that. Or 12 looks like that. You choose whatever you want. Remember, you can always open the dev tools and calibrate to your heart's content. Something I also want to do is, maybe I want to space them out. I don't like them together. So what I'm going to do is I'm going to go to the parent, and I'm going to add a class, message list. Now notice the class is the same as the ID. So I could technically use the ID, but I don't want to make it a generic thing. So you could have multiple ones on the page, because the ID is unique. There can be no other element with that, so. And the reason I do that is simply to separate them out. This is a technique I often use. Basically, if I want to space out the elements in a certain container or list, I actually go to the parent to do that. So as long as the parent has this class, I can target it like this with a selector. For example, if I have the class message list, but I want, inside of that, I want all the elements that have the class message list item to have margin bottom, for example, 16, and that would add a margin bottom to each of them. That way, I don't have to do for each one of this. Because the reason I don't put that in list item, it's because the way I think about user interface or UI, I think of it as some piece that I can kind of plug into wherever it could be. So this message doesn't necessarily have to be part of this whole list. It could be elsewhere. But in that elsewhere, in that context, the spacing could be, it would be the different, right? So that's why I always delegate the spacing between items in a list to the parent, okay? And I guess we can now add some more stuff. Order radius to make it rounded, four pixels is a little rounded there. And it can add more stuff as you see fit. We don't have much time to go over that, so you're welcome to add your own styles. Okay, let me save everything. Another message, how about that? And then let's add a third one here. I'll copy by pressing, highlighting it and alt, shift down, arrow. Oops, my keyboard just changed. Okay, now that's great. Now let's add here, so if you want to add a text box that's multiple lines for the user to type a comment or message, that's usually the text area element. So before at the top, I'll add text area like this. And I have to close it because it's not self-closing. So you can see there's a multi-line text there. And then you're going to add some button. Let's say write or send message. About that, write message. And then we close this in a form like this. If you recall, HTML form, so we can close that in a form. Let's give it a name for the text area. Let's call it a message. Actually, I've got to think message, content, text. Got to think about names because usually messages might be too broad. Because I'm thinking I had, usually messages have more metadata about not only what the person said, but who sent the message. It could have an ID identifier of the message when the message was written, all this stuff. So that's what's going on in my head as I'm thinking about the name. So it probably would be better to call this content or something, or comment, something like that. Anyway, that's okay for now. Okay, so we got that, but we won't do this just yet. This is just a placeholder. We can kind of make it better, maybe add a class there to add a space under it. But I want to focus on this part here, the messages. So let's go step further. So what we're going to do ultimately is read these messages. Hello, where are the other messages? Hey, from a backend server. So usually what happens is when you have a website and you have all these comments, they're stored somewhere, and it's somewhere called a backend. In the backend, there's a database, and the database holds all that information. So in order for that to get to the user, the client in the browser, so the browser will make what's called HTTP request to ask for that information to a backend server. That server will be responsible for asking the database for the data and then giving it back to the user. So let's take a middleman of sorts. Obviously, the server usually has to check first if the user is authenticated into the system, and later if the user has permission or authorization to do that operation. So you have to keep in mind in actual app, those things are happening behind the scenes. Okay, but ignoring all that stuff for now, we're just going to focus on retrieving the data. To do that, we have to understand how can we hold the data first in JavaScript so that we can later ask the server for it. And we already learned about that. If you recall from our previous exercise, we had an image gallery, where you click next to go and you change the image. We learned about arrays there. It's a way of storing all the image URLs. And this is precisely how we're going to start the comments. It's basically an array or list of things. Okay, we could initially have a list of strings list like the image images here. That's totally fine. So let's get to doing that first. And then once you establish that in JavaScript, what's going to happen is we have to manipulate the document and construct all of these divs using JavaScript. So right now we have a declarative approach in the sense we kind of declare all of them here. But when the user loads the website, there's no way of you knowing exactly what these messages are because they're dynamic, they're always changing, right? Somebody could be commenting right now, another person. So it's always going to change every second, every millisecond. So we have to ask the server for the information and build a list ourselves. So that's the challenge here. And later on as we learn about React, we kind of invert that paradigm and let the library or framework do all of this building for us and then we can go back to being declarative. But for now we have to be programmatically in the sense we have to write every single piece of code. Basically we're going to build a div, we're going to add the class, we're going to change the text content, and finally we're going to inject into this list, something like that. Okay, let's create a JavaScript file for this messages HTML, messages.js. I usually name the file with the same name, a prefix, so it's easy to know which one corresponds to what. And then let me put it down here so it's easy for you to see. Okay, so first I want to go here and link these two. Usually in the case of JavaScript, people like to add before the end of the body. Whereas CSS is before the end of head, JavaScript usually end of body. So we add a script here. Source will be messages.js because it's relative path and don't forget to close it because it's not self-closing. And then what I'm going to do is in the JavaScript file is I want to first hold all these messages somehow. And remember when we do JavaScript and you have literal characters, you have to start them in strings, which is a sequence of characters. So the way you do that is with quotes, could be single or double or back tick, let me use single. Let's do hello world, that's the first, right? And then we got another message. Like that, and then we got a here. Now you have to follow the JavaScript syntax. You cannot just write them like this. So we're going to create an array. If you recall, arrays are created with a square bracket between the things you want to hold. And then you have to separate them with a comma like this. And let me break a line so it's easier for you to see, but it doesn't matter if you have space, could be just everything in one line. And I always like to add to the beginning of line every time I either open a colored lace, square brackets, or open a tag. We add the what's called indentation, which is at least two spaces. And it's going to look like this. And then we start this array in a variable. Let's call it messages. And JavaScript, it's optional to end a statement with semicolon, but I always added just in case there might be some problems in some situations, but most of the time you don't need it. Okay, so this is pretty much the concept from last class, right? An array is a sequence or a list of things. In this case, we have this list or array of three elements separated by a comma. And each element is a string. A string is a sequence of characters. And we hold them in a variable. If you recall, the right hand side gets starred as a reference through the messages word. And the reason for having cost is we only define this once, you know, you can you don't have to, you will not redefine it. So if you want to redefine it, you have to use let. Okay, now we got to build this thing. So how do we build a div? Well, you got to use document as the document for something. If you recall, we use get element by ID to find something and query select or get elements by class name. Now the document object if you press dot has a lot of other things. And one of them is create element so it can literally create something new for you. And it's a function. So create element being a function, you need to execute the function ask for the instructions to be run. And every time you have that you have to have the parentheses. Now between the open and close parentheses, you give the input to the function if it needs any at all. In this case, as you can see from Visual Studio Code, it gives me some helper text here that tells you what the argument the function expects. In this case, it's the name of the tag. So if you want to create a div, you would pass the name div in quotes because it has to be a string. Remember, if you don't have quotes, it will interpret that as something special like a variable. In this case, messages doesn't have quote because it's a special thing. It's a variable that holds this in memory. So when every same message is it's actually pointing to this. Okay, so create a div. That's nice. So we want to kind of add stuff to that div. So let's keep that in a variable so we can do stuff with that later. So let me do a variable here. Let's call it div element equals and then we add the cons for syntax. And I like my semicolons at the end of the statement. Now whenever I reference div element, it will get the actual div that was created in memory. Now I have to keep in mind when I create element, it is creating in memory, meaning it's not yet in the document. So the user won't see that. So we only do that at the end after building everything after adding the class and the text content. Now to add the text content, you would say change the property of this div element. So if you think of div element as an object, it has attributes and one of them is class. And then we have another one, which is the thing between the tags. And that's usually called if in the world of reactor is going to learn later, it's the children. But in this case, it's the text content. So we can say div element dot text content to access whatever is between the tags. Now in this case, I don't have anything as empty because if you recall, we created a div. So we want to assign something to that. And that has to come from this here. But if you recall, if I want to access this first element, I would say messages, brackets, and then you have to give the index, which is the position in the array. So you always start counting from zero. So zero index is hello world. One is another message. And two is hey, right? I always have to subtract one, right? If it's first element, that's one minus one zero index. So if I were to do the first one, I put zero there. Okay, to get the text hello world replaced here. Obviously, I can hard code it, but I want to work through the exercise because things will come from an array eventually later on. Anyway, we got that down. Now we can add a class by doing div element dot class list. So if you access the class list, we can call on that to add. So you have to say dot add like this. You see it's always like the dot notation, right? If you recall in the very first exercise we did, we could change the style, right? By saying the element dot style dot some CSS property name in camel case. Here's kind of the same concept. So here we're accessing the list of classes. This element has obviously empty in the beginning. So we're going to add a new one called message list item. So what I'm doing here is rebuilding this except in JavaScript. Instead of declaring HTML, I'm doing JavaScript. So first I create the element. I assign the text content, which is this and then finally add the class, which is that one. Now that we got that down, we have to finally inject that into the list. So we would go and find this div element and append to that when I say append as add to the end of the list of children. Okay, so we're going to call document get element by ID message list. Recall if this get element by ID, we'll go through the document and find this div here because it matches the ID we pass as the argument to the function. And then from that, we're going to append child, which means it's going to take something as input and add to the end of this list of children here. Okay, so we're going to do div element there. And if you look here, what happened, right, it added hello world down here. So that's what it's doing. Now we have to repeat this for every single one of them. Okay, but that's tedious to do, like, I just copied the same code, right, I copy this, and I have to do message sub one to access another message. And then I copy this, and have to message sub two to get Hey, by the way, let me remove these. So you know, it's actually being there. So I remove all of them here. Okay, so I would have to copy and paste now the reason it's giving an error because I redefined div element. So I would have to make that let to define it again under the same name otherwise you have to call it div element one two and three so on so let me do let and then you remove this so you're redefining it. So if you do it that way. I can see hello world is there. Another message is there. Hey is there. But it's tedious imagine if you have like thousands of them and we don't even know how many there are because we're going to retrieve from backend service. So we have no way of knowing that. So what we do is when we have this kind of repetitive stuff with we got a loop. L O O P repetition. Okay, so we got a through go through all these messages one by one and do something of that, and which is basically the same code over and over we just change the index here. That's all we change. Okay, so let's see what we can do here. So I'm going to go and delete all this repetitive stuff. Move this back to cost. Now we're going to loop or repeat something. We're going to use a for loop. Now there are different kinds of for loops. The one I'm going to use a simple one called the four of. Okay, so for a value of something in this case for a value of a list that is a list item. So let's do it for a cost message of messages. So what I'm saying is I wanted to repeat the following between the curly braces for every message. So what's going to happen is going to take the array, which is messages, and then first is going to take Hello World. It's going to store that in message. So imagine there's Hello World there, and then it's going to do whatever you specify between the curly braces, which is this, right? And it's going to do that three times because there's one, two, three elements. So it's going to do as many elements as it has. Now, if you notice, they already did the loop there, one, two, three, but it all have Hello World because there's always messages sub zero. So I want to change this to actually be what message because message is holding the element. So if you just change that to message, it will be Hello World on the message and hey, so the first repetition is with message being the value Hello World. The second repetition is message being having the value another message. The third and final one is the one having the value hey, because we have finished all the elements, it doesn't repeat anymore and continues for all the other code after. This statement here. Okay, so that's the four of loops. So it's always the same pattern for parentheses, cause some name of the variable that will hold every element in every iteration of some sort of list. Many things. Okay, so what changes is this you can give any name you want and what changes is the right hand side of our can give any name. It has to be the variable you want to iterate or run through. And then you can use message here to access all of these. Okay. Now I want to think about usually a message has a person who wrote it. There's the date it was posted and many other kind of data so just the text is not sufficient for to hold this. So we got to make it better. How can we hold more information here. So I got to teach about objects. So let's go to browser. So let me teach about objects. So we learn about a race. It's a way to holding sequence of data. How can we hold arbitrary kinds of data, like make a structure where we can hold like, say, I want, I want to store the author of the post, the message, the idea of the post, I want to store the data was created and so on. So for that we create objects now to create an object simple and JavaScript if you see curly braces like this, it's an object in that so. So let's call this. OBJ. And then objects. They hold a key value pairs. So what, for example, if I want to hold that message, I could say the name of the key which is could be message and then colon the value. Let's say hello world like this. Okay, so this is an object with the properties message having the value hello world. Now you can hold my information. You can add a comma and then repeat the same pattern. Let's say I add an author. Random person. Like that. So property name, colon, and then the value, you notice the property name, you don't have to add quotes, that's optional. However, the value is a string in this case, so you need to have quotes. The valley could actually be something else like another object, or even an array. And you can keep going like that. Maybe you want to create it at like the data was created, you can give it a name like that. In this case is going to be a date so usually we use the date object for this. Or typically it's stored in the back end just as a string in a certain format like 2024. You're nine, and then there's just some patterned RT, whatever. Something like that. Anyway, press enter and you see the fire I'm using Firefox and same thing Chrome. You'll see it allows me to expand this and see each pair of property and value. Now, when you talk about object oriented programming, you're also going to hear these properties being attributes of an object. Okay. So how do I access information like the message from this object. So like, like the array we use square brackets, you can actually use that for objects too. If you do like objects, square brackets, and then you give the property name as a string, you can do that. And it will access the value. That's a bit that's in the property message. But many people like to use the dot notation, which is OBJ dot the name of the property like this. And this dot notation is the thing that we've been using so far when we do document dot, get element by ID, and then dot style or dot class list. It's because we're accessing a property of an object. Okay, that's why we use the dot. So now you know where that comes from. So basically somebody defined the document object, you have that that style object and class list object and so on. Okay, so if you were to access the author, you would say the name of the variable that holds the object dot author, which is the property name, and that will give you a random person. And finally to get the created at dot created at and all these proper names are arbitrary by the way I just chose them, but you can choose any name you want for your property. Obviously you want to be descriptive and choose a name that makes sense right you don't want to name things a b and c otherwise don't know what the heck they are meant for. Okay, now you know about objects let's improve our code. So let's add something better here so for each message will not be a string but an object so I add curly brace here to each, and then that has to be a part of a property I'll call message. Now you see why I was a bit skeptical putting message otherwise we have like message dot message, which is weird. But you could choose another name if you want. Anyway, if you want to put author you can do here, but might be awkward later. I'll leave it out, you get the point. Let's add an ID that could be something interesting. Usually there's an identifier for each. You see that a lot that's records come from the back end because two messages could have the same content but you don't know which one is which so that's why there's always in the unique identifier ID. I'm just adding that to get you used to it. Okay at the curly brace ID three message colon curl close the curve race at the end. People usually like also to kind of write it this way seems clear to them. I like it too. Basically, they could open curly brace and have one property and key and property value for line. That's also nice notation. Easy to see. And by the way, in the in the JavaScript, you can have an optional comma here so you might see a lot people adding commas at the end of the last element that is optional. And the reason for always adding it is for version control get like we learned. Whenever you add something new property, you will you would always have to add a new comma here so create kind of diff noise. So it would change the previous line even though nothing really changed just adding a comma. Anyway, that's a bit more lines but easier to see. Now because we have this new new structure for messages, we now have a list or array of objects no longer strings. So here when you say message here line 16, we are iterating over objects not strings. Therefore, the text content here has to change to message object dot message property value, which will point to this. Okay, and then we should fix the problem here. Okay. Nice. Now let's do something here. How about we write some message there handle it about we do that. Let's see. So I want to be able to type something here and click write message and add to this list. Now this is usually what happens is you click write message and makes a request to the server and ask the server. Hey, I want to post this message. Hello. And then the server will decide do you have permission to do this. If so, I will change the database and insert that new message. And then that's it. You can update your front end and let the user know there's a new message here at the end. Because I don't want to do the back end yet. I want to just show you how it can do right away. Adding that message without back in. So what we got to do is we got to go to this form. We got to handle an event. I'll submit here. So remember we handle on click when you click something do whatever I told you to do in this function definition. It's kind of the same except is when I click the submit button which is this one you see this as type submit. That's important because this is the button designated as submit button and that would trigger the submit event. So let's create a function here. Let's call. Let's call add message. That will be the name of the function and remember parentheses there. Then what we're going to do is go to the JavaScript part. Define the function add message like this. Remember Zos keyword function followed by space and then the name of the function parentheses and you got to define the inputs. But we don't have any right now. So I leave empty and then the instructions to be executed from the top to the bottom between the curly braces. Now what's going to happen is first I got to learn what the user type. So to do that I got to capture this text area value. So if you go to the text area here we need to be able to get that using JavaScript one ways via ID. Let's add an ID. I'll call it a message form message. I know it's weird. I put message there again. So I'm going to get this ID. I'm going to go here to add message and say document dot get element by ID parentheses quotes and then face that same ID. So this is going to get this text area now provided it exists. Obviously usually I'm always doing happy path which means I'm not handling any kind of errors. What if that element didn't exist for some reason. So I'm not handling that but usually we have to do it. We have to check if the element is present. It's not undefined. Then you can continue otherwise stop trying to add the message. Okay. So let's hold this in a variable. Let's call it text area element about that. And typically if you want to test if it exists or not you can just do like this if this area element return. So what's what I wrote here is it's called an if statement. So basically if whatever is between the parentheses is a true expression truthy. I want you to execute everything between the curly braces. Now when you have text area element defined. It will be like an object. But if it's not to be something not defined or no. Okay. So that is what's called a falsi value. So it's in this exclamation as a logic not. So basically if text area element is like no are undefined it would invert or flip that undefined to a truthy which would be true. And these values are called Booleans. Let me talk more about that might be confusing to you. So in JavaScript we have what called Boolean values which is false and true. So basically they just mean something is true or something is false. Now there's some values in JavaScript that can be considered false. They're the falsi ones and that's what kind of makes some people hate JavaScript because it's not so strict. So if you have empty string that's falsi. And if you have no that's falsi. And if you have undefined values false. Okay. So if you try it for example document get element by ID. I don't exist. It gives me no. Now if I take no and I put a bank before that that means it's going to invert a flip that so no is falsi. So the opposite of false is truly which is true. So that's why it gives me true there. Now the mechanism I use there is to just to check. Okay. If I don't find anything that means if it's true I want return from the function not to anything at all. So that's what I'm doing there. Okay. So if this is true return returns a key word to return from a function usually return something back but if you don't have anything could be empty return. And it immediately stops the function everything after the curly brace will not be executed. So that's the point here. So if I don't find a text error elements I don't do anything. That's the point. That's the handling of the error. Okay. But obviously here we are going to find it. We are very sure it exists. And anyway, enough about that. So we're going to take text area element and there's a property called value the attribute that's whatever the user typed. And we got to take that and then do the same thing we did here pretty much copy and paste this code. But instead of message dot message, we got a past text area element dot value. Now if I have repeated code I don't want to repeat myself again. I can actually isolate this in these instructions into a function and then call that function to do whatever we need that to do. Okay. So there's me. So we're going to do is the final function here. Let me see. We already have add message that makes a namey hard. Let's say let's call it a pen message or add message to list about add message to list about that. This function will actually take an input. It's something that's always changing these instructions here. Let me copy them between the curly brace is this part here. And that's actually what I want to take as the input because it's always changing. So the input here will be the message itself. I can say message text right about it or just message whatever. Let's just call it message. And then here I get access to the message object and that will work just fine because I named the same here. Now this name could be something else right you could name it something. You have to name there something. Okay. Just confusing having the property name the same but it's like that. Okay. Now from here I would call add message to list with that argument. So what's happening? Okay. You have a function. You're calling it with this input or argument. This value here will become this parameter here. So you can imagine that is there. Okay. And then from there is going to go here. Something like that. All right. But there's a very small detail. It expects to be an object. So this has to be an object, not just a string. So we have to actually build an object here with the message property like that. So it works off the bat. Otherwise I have to change the definition of the function. Okay. And because we're using the same thing, we can also change this to that. But before that, let's just test if it's working because we don't want to do too many things at the same time. So I change this. I add add message. Let's say working. Let me see ABC write message. So something is not right. What's going on? Let's go to the browser to debug. I'll teach you how to debug. So I'm going to open an external browser here. Let me, I'm going to use Chrome for debugging, by the way, for the Chrome people. Give him one moment. I open slash messages.html. Okay. Let's go Chrome people. I'm going to use the F12 to see the dev tools. So to debug JavaScript, you're going to click the sources tab. In Firefox, it might be called debugger tab or something like that. And you can see you can either control P and look for the file like messages, jazz, or you can click the side here. And what I want to test is, okay, what's going on? Every time I click add message is not working. You know, what is going on? Let's first think about this. So the first thing I expect is when I click write message is it submits the form. So when you, it's going to call add message. So I think I know what's going on right away because if I type ABC tried message, I notice everything got wiped out. And that's because the default behavior of the form is to make a gap request. If you recall from an HTML lecture, and you can see there's an actual something added to the URL there query parameter. So I already figured it out even without the dev tools, but basically would go to here sources. And where you have add message, you would have what's called a breakpoint. So here's the function I expect to be executed. So I click here. And every next time I try this going to stop the code, the program right there to see it stopped. And then kind of go run through it. If I press to go to the next line is this arrow here or F 12, sorry, F 10. And now it's in the next line so I can hover over text area element and I can see the value is no. Okay, so right away something is weird. So get element by ID, it's not finding message for message. Why, let's go to elements, look at the form. Oh, I don't have the idea here. Why not? That's weird. So let's go and check it out in our code. I'm back here. I don't know why but I wrote ID here and it's not appearing. Did I save my file? I sure did I control S. Oh, look what I did. I wrote the attribute in a closing tag. That is wrong, right? So I take this out of here. I have to make it to the open tag, not the closing one. So I do that, save it. Then I'm going to go back to the browser. I'm going to refresh. I should expect the ID to be here now. See that? And then I'm going to try again to ABC, write the message next line with F 10, hover over text area. Now it's finding it. You can see it highlighted in the content. So the element is there. That's good. We already fixed the problem. I had my ID attribute in a closed tag for text area, which is wrong. Attributes are always defined on the open tag right hand side of its name. Okay, great. Now if I go down, if I look at text area element dot value, it's ABC. You see I'm hovering over everything and it tells me what it is. So if I hover text area element, that's the whole object of all these property and values. And if I hover over value, it gives me the actual ABC. Let me show you here. This is the object. And if I go all the way down to value, somewhere there is ABC. You see that value has the property. Value is the property and its value is ABC. Okay, so that is expected. I think it's going to work. However, the form is going to submit to the server in a traditional way. So going to reload a page, which is going to mess everything up. But if you notice very quickly, it actually did add to the end. It's just that it reloaded the page. So we have to prevent it from being reloaded. So to prevent the default reloading behavior, you have to go to message dot JS. And here in the beginning of ad message, the handler function for the form submission event, you have to say, stop doing what you were told to do by default. Now to do that, we need to access the event parameter that's always passed into event handler functions. Now ad message actually can take an input called the event object. And then from that event object, you have to say prevent the fault like this. So it's a method or function of the event object. So dot here. And if you call that, it's just basically going to tell the form, don't reload the page. I want you to stop doing that. But for this to work, you have to go to line nine and draw in the HTML and add event here. Literally add the word event there. Otherwise not going to work. Okay. Now let's test it out. I will go to Google Chrome again and debug it. Let me refresh ABC. Click write message. It triggers the on submit function. I can go and keep doing everything. I expect it to be okay. Right. No problem there. And I actually can step into this function if you want to learn how the object is built. I can step into this function by using this one F 11. So let's do that. It's going to go into add message list. And let's run each statement. Let's first create the div. Now I have the div here. Hover over that. There's no tax content. If you scroll down, see the tax content empty here. So we're going to change that in the next line. So let's go by the way, message here is an object with the property message value ABC. So expect message dot message to be ABC. Let's next line F 10. Now what's the div now? What's the tax content? Let's see ABC here. And finally, let's go to the class list. Let's look at a class list. Oh, there's one now. It's like an array. It's called a DOM token list. So if you look at div element, you can access it through the class list somewhere here. See class list. You can expand. And you see there's one element index zero, which is message list item. Oh, so that's working fine. I'll just let it play. But before I do that, let me just remove the breaking point. I can either go to where it was and click here. Again, the same line. Or I can, I think on the right hand side or somewhere with the break points, this one, I think you can trash it or you can right click, remove all break points and then play and close this and is ABC there. Let me zoom in for you. And I can try the right message. Great. However, I would like to remove this when I submit Mike. That's what usually happens. So for that, we got to change the value attribute of the text area after we submit. If you quickly go there, add message after adding the message to the list, we're going to take the text area element dot value and assign a new thing. That's to clear it is basically an empty string right equals empty string, which is basically two quotes, either double or single. So that when I say the F right message is added to the end and then finally clears the text area like that. Okay, so that's the submission there. Obviously, we don't have a back end. So what would happen is first is before you add message to the list, you would there's two approaches, right? There's the optimistic approaches basically add out to the list right away and expect the server will accept it in the back end. And then if it doesn't accept, we can remove it from the list. If it does accept it, we don't do anything we are optimistic about it. The other approach is only add when you're sure the server accepted it. So in that case, obviously, when you get a response all okay, you would add. But there's always before here actually call a back end server and submit the message that we have to do that. All right, I think that's it for this lesson. I'll see you on the next one.