We are back to one or less. Let's continue building our web application. I reloaded my file. I don't know why my editor had the wrong highlighting or had no highlighting at all. I added the script. That was no problem. I just reloaded the file. I reloaded my file. We have the script. We don't do anything yet. Let's write what we should do here. Let's just comment on what should be done. Then we'll do it. We can write what's called a comment with space slash slash. That would just be something for us developers to read and get some grasp of what's going on. It's not really going to be executed or anything by the script. Just a comment. First, we have to click, we handle the event. It's going to come here. We had to find out what the user typed in the DAX area. Once we have that, create a new entry element. For that element, we need to inject the DAX into the new element. We have to style the new element with entry class. Then that's all in memory though. We need to inject into the page. We have to append what's called a pen. New entry to the list of entries the user sees. Then finally clear the DAX area so the user won't see the remainder of what you typed before. Maybe forgot something. Maybe not. We're going to do a later. How can we find out what the user typed in the DAX area? Well, we know how to grab elements. Maybe if we grab the DAX area, we can find out what's typed there. That's a good idea. We can do the same thing with this for the button on line one. We can do a document, call on, hey, please get the element by ID. Let's give it a name. Give an ID for the DAX area. Maybe new entry DAX area. About that. Well, I'm going to put in some variable. Create a variable const name of the variable equals to assign the value on the right hand side to the variable. Whose name is on the left hand side. I will call this, we can call it DAX area, whatever. That's the name of my variable. Now how can we get the text? Const entry text. Let's create a variable to hold the value of that entry. I'm creating a variable const name of the variable equals a value on the right hand side. That is somewhat can be obtained from the element we grabbed. But how, what's the name of the property? Let's find out in a very useful way. I'm going to show you how to debug using the DevTools from your browser. Very, very useful. Do it all the time. You need to know this. What I'm going to do is a following. I'm going to click the button and I want to find out what's going on in the program, in the script. By the time I hit line four. Line four will be the line with the break point. Break point is going to be the point in the code, in the source code that the debugger is going to stop. And then we're going to let you know, hey, I stopped execution at this specific line. You can investigate what's going on right now. Then tell me when you want to continue. Let's learn how to do that. So I saved my script. Go back to the browser. Now there's one thing I need to tell you. The browser likes to cache things. Caching things mean saving it and not having to load it again because you already loaded it once. But you don't need to retrieve that again. So to be efficient, the browser does caching. It likes to store things so it can be reloaded or reused later without the need to actually retrieving it again. So because of that mechanism, sometimes your script, the changes might not be reflected right away when you reload the page. So I always advise you, go to the network tab of your browser and disable the cache. It's probably unchecked by default. I recommend you put disable cache as long as you are developing your application. When you're done developing, I recommend you flip it back so it becomes efficient to retrieve web application, website resources as you're browsing the web normally. But while we're developing, I'm going to disable the cache. So every time it downloads the script over and over again instead of looking at what's already saved. With that, I'm going to reload. You can see, I can see in the network tab the resources I downloaded. The index, HTML, the styles.css and the script.js. Great. Now go to the sources tab, locate the script that you created in the case script.js. Now I'm going to place a breakpoint in the line here. Now another way of loading if there's too many files, you can say ctrl P or command P for Mac. Type the name of the file script.js. Enter and it will open for you. For example, I'm here. Okay. Now, this is going to open up the file. I want to place a breakpoint in line four. So I click on the number four and it adds this circle that's kind of red. Now if I click the button, you can see pause and debugger. It paused the execution of the script at this line. It hasn't done the line yet. It's about to do. You can see on the right hand side there are controls to tell. If you want to go on, resume F8. If you want to use step over next function called next line, for example, F10 and so on, other controls. If you want to deactivate the breakpoints that you said, if you want to see a breakpoint here and all other stuff. Anyway, focus on the breakpoint in line four, click the button, stop the breakpoint. I want to investigate if there is a way for us to get the text that the user typed. Well, it's not very useful here because I didn't type anything. So I'm going to click this play to the script to go on. I'm back here. I'm going to type something. I'm going to click right again. Pause at the line for line for. Now if I hover over text area, it's undefined because it hasn't executed yet. I can press F10. That's the second icon here. And it executes that now I can look at hover over text area. Oh, it says no. Why? So we could not find the element. Do you know why? Did I miss something? I wrote a name here for the ID, but does that element really have the ID? Look at elements. Text area does not have ID. That's why I could not grab it because it doesn't know about it. So go back to the editor, text editor, index. You need to give text area an ID. That's the same thing that we type in our code in script.js new entry text area. Line for. That's the ID of the text area. So it will, it would be possible for document.get element by IDs to find the text area. Nice. Save the file. The browser. You can reload. Grab something. Click button. Now we're in the pause at the breakpoint in the debugger. We can let it go. Have 10 execute the line for. Now you can hover over text area and it's telling you a lot of stuff in here. So it really did find the element. You can see on the left hand side. It highlights that element as I hover over the variable name. This variable is pointing to the element. Text area you can see on the left hand side is highlighted and it has many, many, many properties. I'm looking for some property that will give me the content of that element. Now we can just find out the dsa sds, wherever that text that I type by just looking here. Sometimes there's a lot of stuff. So. Look at that. Value is a property called value. Whose value is ds? AES so on. What I typed. This is the property we're going to use to access to get the value of what the user typed. So that's nice. We learn to debug and find out what's in the text area. Let's go on. Back to the script. I now know that the entry text is going to be text area dot value. This is how you access a property on an object. Dot value give me that entry text. Nice. Now we need a new element, a new entry. Let's create a new entry. We can use document dot create element. Create an element is a function that allows you to create an element. Now you need to give as a string. String is a sequence of characters under double quotes in this case. And I want to create a div. Like all the other entries. It's just a div. It's an element with no particular semantic. Now nice. I have this element in memory. I'm going to put in a variable. Okay. I'm going to call a new entry. Let me call and I usually like to add. Now inject text into the new element. Okay. So the new element there must be a way to inject text. Now we knew that text area has the value. But what about the div? Well the div has the text in between the text right, the opening and closing tag. But how can we set that? What's the name of the property that has to be set? Well, I'll tell you it's not value. Something else. How do I know? Let's go to the documentation. And do an exercise of looking for the property. Now go to MDN for example. That's the one website I recommend. I want you to look for. Let's see. Shumella element. Let me put it in. I know there's this object called HTML element. And there's many on the left hand side that are the properties. And I want something that's, oh, inner text. Might be something. It was something that's inside the tag, right? Maybe inner something. I'm going to search inner. Represents the random text content of a notice of the sentence. Maybe that's something promising. Click there. Interproperty HTML element, random text, content of a notice of the sentence. I can set the inner text. Syntax. This is syntax. How to do it in a value DOM string representing random text content of an element. The element itself is not being rendered. The return value is the same as node text content. This text. Text on a property of node interface presents a text content of the node and its descendants. Let's see some examples. Inner text might also be something interesting. Inner text aware of the random appearance of text by context content is not. Wait, wait, wait. I wanted to get to inner HTML. Sorry. I'm just doing exercise for you to do certain things. Where is that? Inner HTML returns HTML as the name indicates. Sometimes people use inner HTML to retrieve right text side of an element. The text content has better performance because it's value node parses HTML. Moreover, using text content can prevent XSS attacks. Cross scripting. I already know that one good way of changing the text is with text content. I already validated that it's better to use that here by reading this. It has better performance because it's value node parses HTML. Meaning we just want the text right. Just plain text. Moreover, it can prevent from these secure attacks called cross side scripting. That's a good thing. We're going to use actually text content. All right. Go back to Adam. We'll have the new entry. To that, the text content will be now the entry text that we grabbed from the text area. Let me call it. What this is doing is the following. To this new div that we created, the content, right, the text content. Dot text content equals as assignment operator. Assignment. We are assigning the value of the entry text variable. That contains whatever we typed. Whatever the user typed is going to be assigned to the text content of the new entry div of this div. So whatever in between the tag layer, it's going to be this whatever user typed. That's great. Finally, we need to style this thing. Otherwise, it's going to look ugly. So how about adding a class? But how do we add a class to a given JavaScript? Let's look at the docs. How about class list? We already knew it. Anyway, let's look at this doc for class list. Class list gives some examples of how to add a class or apply a class, right? We have an element. That was the attribute class. Now you can add classes or remove them. You can see it gives an example. It's using document creator element like we used. Oh, you can set the class directly with the class name. That's nice. I can also use this thing called class list or to remove add class. I think this is better because if you use class name, you might overwrite classes that were already applied. The thing is, you can apply multiple classes to an HTML element. It's not just one. So that's very, very common that you have an HTML element with many, many classes applied because you have different kinds of styles mixed together. So because of that, I don't really want to use class name. Otherwise, I cannot keep track of the other classes that are already applied. If I say class name, my class is going to overwrite all these other classes. It's going to take away all the styles and make a mess. You might not end up well. So I want to use what's called a class list through this interface. I can add and remove classes just by giving them the class. So what we want to do is add a class to that div that we created. We can use dot class list dot add and under as the argument to this function call you pass a string with the name of the class. Back to our text editor. We have new entry dot class list to this class list. I want to add. What's the class we defined before entry, right? That's the class that is applied to each entry. That's going to add the border to padding and the margin at the bottom. Save it. Great. So we have that in memory, but we need to add that to the page somehow. One way we can do that was called a pen child. Now, a pen is used to add something to the end of some other element. Now I could add to the end of body, but doesn't make sense. And it will be coming right after the script here, whatever we typed like this. That's not good. We want to have it right under this last entry. So because of that, I want to make the following. I want to enclose all the entries in another div. And this div will be used as the entry list. List of entries will be here. Now I need some amount to grab this div and then inject at the end. That's called a pen. And a child, a pan child. I'm going to give this div an idea. I'm going to say it's going to be entry list. Whatever you want to call it. Or you can call it entries. Whatever. Anyway, so I'm going to target this element here, document get element by ID. Then I am going to add a new metric to the end. Let's do it. Let's try the amount left. I'll skip on the right. So I've been new answer to list of interest uses these so document get element by ID to grab the entry list. And then I want a pen child. Now I don't want to create a variable here. I don't have to. You know, I created a variable before this case was justified because I use it multiple times more than once. Now this case here wasn't that justified by created anyway just to make it clear to you. And maybe it didn't find the element so we have to handle that we don't care about that right now. We just assume it's there. Anyway, you can change the call here. So I started putting that in a very you don't have to just say pan child and then you enter what this is doing is the fall to the document get element by D to target that list. So it's targeting this whole thing. Now you're going to say a pan child. And you give some elements. So this element is in memory right now, meaning it's not in the page yet. We take that go to the end of the list. And we append that we add that new element, whatever I typed. And it's going to be there. Now you can see the div comes from the creation of create element. The class here comes from our class list add the content inside comes from the text content. And the appearance come inside under the deal at the end comes on the append child. Fine. So let me just delete the illustration of what it does. Finally, we need to clear the text area. Oh, that's it. I really need this after all. So it was worth it putting in a variable. Clear the text area. How do we do that? Hmm. Remember that the text area text was inside value. Maybe we can just say the following text area value. Thought value is going to be empty string. That means whatever was typed will be now nothing. That's it. Let's try it out. I'm going to save everything. I'm going to go to browser. Now I'm going to remove this break point right now. We don't need it anymore. You can do it here right click remove all break points or you can click one by one. And I couldn't remove all. Okay, so let it go refresh. New entry content. Like right and you can see we have a new entry. New entry. And if you go to elements, expand the entry list. You can see it's right here. That's the new thing we added. Are you excited? Well, there's a lot more we can do to make it so much better. Now the thing is, as you type new things, you can even type something empty. So it's a lot to improve. We can validate whether to use a type something and if the user didn't type anything, we don't want to write. And that's the actually pretty easy to go to your code. Do the following. You can see the event listener here. Let me expand. Right after you grab the text, you can do a validation. You're going to check, did the user type anything at all? If the user type nothing, we should not do anything here. Okay. So what can we do? We can just say if. Now I'm going to use a control flow. If statement meaning if this condition is true, do something. The condition will be if the user type nothing. The user type nothing. But what does the user type nothing mean? It means the value of the text area is empty. So text, the entry text in this case, right? Because we assign text error to the value. If the entry text is empty, like this, you're going to return meaning get out of this function. We don't have anything else to do everything after this. If the condition is true, it will call return and everything after will not be executed. Now what I did here is the if statement. If the condition is true, it executes whatever is in the body of the statement. The triple equals means if this value is strictly equal to this value, meaning not only in value but in type. You can use double but it's better to use triple because not only does it check the value, it also checks the type of the things you're comparing. Sometimes in JavaScript, you can be comparing a number with a string that contains a number character. And if you use double equals, it will try to compare those two as though there were kind of numbers. And that's not really a good thing in the long road. It causes a lot of bugs. So I always make sure to start with strict comparison. Your only comparison strings here, you don't want to mix types in the comparison. Anyway, that's right. I don't see it. Now let's try typing nothing at all. I didn't type anything. I click right. Nothing happened. Very nice, right? It is nice but the user doesn't know what happened. He's like, okay, I clicked but nothing happens. Well, we should put a text, a message there saying there was an error. We can do that in the next lesson. I'll see you then.