Lesson Summary

Welcome back to another lesson. Let's keep building our web app. So, we just did some styling. And I actually had some reason we did that. That's because I want to add a narrow message to tell the user that something went wrong with his submission. A whatever the user has written. Remember that we added that validation on the front end so that when you click write it wouldn't add a new entry in an empty text? Well, remember I said, okay, as a user I click write and I don't know what's going on, why doesn't it work? Well, obviously because we are developers we know that the user is trying to write nothing at all. That's why it doesn't work. So, you want to let the user know that something went wrong with his submission or her submission. And that's through an error message. So, let's add another message next to the button on its left. So, let's just make believe there's an error and let's make a draft first. And later we figure out how to show and hide that error message. And so, before the button in the container here enter submit button container. Before the button let's add a span element. A span is like the equivalent of div or something that doesn't have any specific meaning, dramatically. But it does have its display as inline, meaning it will not take the whole line but not occupy the whole line. It won't occupy as much space as it takes. So, let's give it an error message right here. Let's say you need to type at least one character. You need to type at least one character. Save it. Go back here. Now, if you highlight this, you can see the span only takes as much space as it has characters inside. As content inside. You can see the div takes the whole line but the span does not. And that's because of the display property. So, that's a property in CSS called display. Let me show you here. If you go to the div container and there's a filter here under the styles, I can type display and it's going to tell me what's the display value for this div right now. It says display block and it says user agent style sheet. By default, the browser is considered div to be a display block. Now, if you look at the span and you click computed instead of styles, okay? Click computed and you can see the display right here is inline. And if I were to change the display, I'm going to remove this. Of the span to be block, which is the same as div, then this span will behave exactly like a div and will take the whole line, space of the whole line. You can see now that the button was shifted to the next line and the span took the whole line. That's what display block is. Now, if you put it back to what it was, which is inline, then all it takes is space as needed. Let's keep it at that. So I don't even need that because of default. Now, it would be nice if the error message had some kind of red text. That's the typical standard pattern. I'm going to start color red, but maybe that's too red. I don't know. You can change it here with the color picker. It's going to be less or darker up to you. How about around here? And then you can copy this. Now, we need to create a new class for the span and apply it. So let's do the other way. From the index.html, add the new attribute to the span cloud class. Let's give it a name. New entry error. For example, save it. Go to the styles.ess, add a new class.new-entry-error. Corresponds to the same class we gave to the span. Paste that style color, that kind of red. E1, 0F, 0F. That's my choice. You can choose whatever you want. Now, the text, the color of the text is going to be that red. Well, that's nice, but it's always showing. The user hasn't interacted with the text area yet. So we need to not have the error there yet. So maybe you want to hide it for the time being. There are many ways to do things in CSS. There are many ways to hide things. I'm just going to show you a very simple way. But you might want to reconsider these depending on the situation. Maybe there might be other concerns such as accessibility or something like that. But this is the easiest way. I'm going to use the display property with the value none just to hide it. Okay. Now, I could add the property here, display none. And it would initially appear hidden if I unchecked it adds. That's totally fine. But I want to be able to control these styles using different classes. And that's a very common pattern you see out there. So instead of having one class with the style to hide, I'm going to create a class, say, Neo-entered-error-hidden. And I'm going to add display none. The reason I do this is because I can easily control whether it's a display or not, simply by removing or adding this class. So initially, we want to have it, right? Because we don't want to show it by default. So I'm going to copy and paste this into the span node dot. And one thing you have to notice is an element can have multiple classes. That's something that's very, very common. So to apply multiple classes to an element, just place them separated by space. So this span element has this class, Neo-entered-error. And also, with the space there, has this class, Neo-entered-error-hidden. The first class applies the color kind of red. The second class applies display none to hide the element. Okay. Now let's refresh. You can see there's two classes now. One thing I want to teach you is how to toggle classes for elements. That is how to turn them on and turn them off. That is add or remove them. Under the DevTools under the Style tab, next to the filter, there's this dot-cls element classes. Your browser should have something like that. And then it shows you what classes are applied to this element. You have two classes, right? If I toggle here, checkbox uncheck the hidden, the error will appear because this class is no longer applied. But if I check it, now the class is applied. So this is the behavior we're going to use through JavaScript to mark the error there after you click the button right. So let's do that. Back to the text editor, script.js file. Remember we had this front-end validation. We are here in the Add Event Listener for the Submit button. This is the Handle function. Front-end validation. The texture tracks is nothing, empty string. Return from this function, meaning everything afterward will not be executed. We're just going to terminate early and return nothing in particular. Fine. Before we do that, we want to add show.ad-error message. Now how can we show.ad-error message? Well, you have to remove the class new entry error hidden from the span. Okay. Well, you can target an element by ID to grab it and then you can use the class list.remove instead of add to do that. But in order to do that, the span has to have an ID. That is totally fine. You have to have an ID do that. What I want to show you is how to target an element by its class. I'm not saying this is a good practice here. I just want to show you that it's possible. Okay. So I'm assuming there's only this one element that has this very kind of unique class name called new entry error. And that's my assumption here. So just to show you how to target an element by class name, you're going to say document.getElementsPluralByClassName. And then you get the name of the class new entry error. Now, this is plural because class is not unique. So there could be multiple elements with the same class. I'm assuming here there's only going to be one. That's my assumption. So that's why I think it's going to work. Now, when you do this, you don't get only one thing. You've got a collection of things. So you've got to do additional stuff. Let me show you that in browser. Sometimes if you want to see something in the browser, you can go back and you can use what's called the console. Go to the console tab and paste that code. And you can execute that code here. And I forgot something. I missed a word from the function name. You can see here immediately told me uncaught type error. Document.getElementsByClass is not a function. Not a function meaning like it does. It's not something it exists. It doesn't know what it is. And if you look here, if I remove that, notice there's a name there. That's the one I wanted to show you. But if I just do document.getElementsByClass, it's saying undefined there. That's because it doesn't exist. And actually what I meant was by class name. I missed the last word of this function. Now it exists. If I type enter, it's there. And if I try to call it now, try oops. By class name. Now you can see I press enter. It gives me something back. That's the return value of this function call. It's an HTML collection that contains many things. Let's expand this collection. You can see the length is one because it only found one thing. Now the very first element of this collection is that spend that's hidden right now. Okay, back to the console. So that's what we want. But because it's under HTML collection, it's the very first element of this collection. Collection is like an array. A array like object here. When you count elements, like when you reference them, you access elements in an array. You always start counting from zero. So that's why you're seeing zero colon. Because the very first element whose index is zero is this one. Now start to count from zero. In any case, so we got the whole collection. We don't want everything one the very first element. So we have to use the notation. Square brackets. Give the index of the element that you wanted. In this case, elements of zero index zero, the very first element, close the square bracket, and that will give you the span that we're looking for. Okay, of course, I assume that existed in a page. If it did not exist, it would get undefined. And that's something you have to be careful about. You have to handle that problem. Okay. So sub zero here back to our code script.js to grab the very first element here. So I'm going to add that to a variable. And I'm calling it the error message. Not the error message. It's the error span. Whatever you want to call it. The message inside the span. But you could say I don't mess with this one. Anyway. Now, I told you I assume it exists, but it might not always be the case. Let me show you how to handle if it does not. So you got to always check if the error span. Do something that means it's just going to check if this is defined. This value is so called truly. In this case, if it finds anything at all, it will be truly therefore the condition is true, and everything in between the braces will be executed. In this case, I want to target the error span. And I want to change. I want to do class list and remove the new entry error. What was the name hidden, right, the class semicolon at the end. But if this didn't give me anything, probably gonna return undefined. Let's try it out. If I give it like a different class that does not exist. It says undefined. So that's correct. So if it were undefined, this would have been falsi. Which in turn is false. So if condition is false, don't do anything. This will not be executed. It goes to the next slide returns. And that's fine because we did not have any error message there to show. To remove the class. Of course, it's not the behavior we want here, but this is just a guard against having the error propagating this error of something that does not exist. Let's try it out. Click right. And what did I miss? I missed the name again. Get element by class name. Class name. Get elements by class name. Don't forget the suffix name. Refresh, right? Now when I click right it says you need to type at least one character. Great. Now let's type something. Oh, nice. It appeared here by the error message still. That's not great, right? We need to clear the error message if things are successful. So to do that, let's go back to the source code. When you come to the part where you clear the text area, you also want to make sure to clear the error. Clear any error message as the comment for you here to show you. You don't need these comments, by the way. All the text after the slash slash is just the comment and it's not necessary at all. I'm just putting it here for your own to be helpful to you. Anyway. So how can we clear that error? Well, all you have to do is hide it again. How did we hide it through the class? So you just need to add back the class that has the style to hide it. Remember how many did Airspin class list remove? We need to do add. Now we have the element here inside the if statement. But if I try to do a Spen here.classList.add the same name entry, arrow, hidden new entry, ever headed. It's not going to work. Let's try it out. You got uncut reference error in the console. Airspin is not defined. And that's because of the scope of the local variable here. Airspin does not have scope under this block of code. In this case, the block of code is defined by the braces opening here and closing. There is no definition of the error spend there. It's actually inside this if statement here. Airspin is only available only in scope between this open embrace and that closing brace. Okay, so how can we fix that? Well, we could copy and paste the same code and put it here. Totally fine. Since I don't want to repeat myself, what I could do is move this definition to outside the if statement. Right before that. Now it's under this block. See this block here that starts with this brace. It ends at line 31. And I'm referencing it in between those. So it's totally fine. Notice if you open a new brace, you define a new scope here. That's why I cannot reference this error span, even though it was defined under the outer scope, but it's inside an inner scope. And this inner scope will define a whole new scope for the local variable. So be careful. Now with that, I have the error span defined outside, which obeys the scope of this one. The closest opening brace. And it will now work. Just fine. Click type. It cleared the error message after adding a new entry. Okay. So that's it for now. See you in the next lesson.