Okay, let me share again. So today I want to introduce you to JavaScript, but I thought thinking what I would do, usually I do a different thing every lesson, so I want to change a little bit. I'll start off just with the basics, how to change style for a specific element like a box and how to change the color and CSS attributes. And then today I want to teach you how to work with forms. For example, we want to type a password. Like any website today you go in as an email and a password. So how would we do to, for example, there's usually a button to hide or show the password. There's also validations. How do we validate? You know, I type some password that might be kind of weak. Then I click outside and then I get an error saying that's invalid. Something like that. So, all of this we can do with JavaScript. Okay, so let's start off here in this environment just fatal.net. You can click settings at the top, right? If you don't like this layout, there's different layouts you can pick from. And then there's some settings here, I'm going to turn off auto-close HTML tags and auto-close brackets because it's kind of annoying when we're starting out to learn. It's better if you manually just type that, okay. So here we have the HTML panel, we'll rewrite our document. We have the CSS panel for the style and had JavaScript here. And then you can click in the top right, sorry, top left to run and you can see in the bottom right the result of the code. Okay, so I want to start off just making a div element and I'm going to say hello inside and then I'll close it. This basically is an error container and you can see the bottom right, there's hello. And I want to add some CSS to that. So let me add a class to this. Let's call it square and then define in the right hand side under CSS dots for class square. So all the elements that have the class square will have the following styles between the curly braces and I want the width to be 100 pixels px, the height to be 100 pixels px because it's the square and then background color, I'll make it black initially. You can see it's just a black square here. Now I want to show you how we can change the CSS attributes of this element using JavaScript. You might ask, oh, why not just write the CSS style sheet? Well because what's the purpose of JavaScript? So today when you go on a browser, you access a website or web app or whatever, the structure is written in HTML, hypertext markup language and then the pretty things, the colors and all the positioning, all CSS, cascading style sheets. But then today we have a lot of social media interactivity in the websites like people are clicking things, people are writing on things and interacting with the website very dynamic. So things in the document are actually changing in real time. It's not just static like the beginning of the internet, it's just text like scientific documents. Now you can just click things around and all stuff, all right? So JavaScript is just for that, JavaScript is a programming language that originated in the browser. So people are looking to add dynamic interactivity to the web pages and then they build JavaScript into the browser and then you can write some scripts, some code that will manipulate the document, the HTML, manipulate CSS classes and all this stuff. So that's what we got today. It has evolved so much from the beginning that it's kind of HTML and CSS kind of deviated from the original purpose of just sharing scientific documents. But they didn't expect all this stuff about social media apps and interactive and all the stuff. So anyway, so in JavaScript here, let's say the moment I run this, I want to use JavaScript to change the background color of the square to red. So basically, first of all, what you have to do in JavaScript is you have to first target an element that you want to manipulate. Now in order to do that, there are different ways. The easiest way is perhaps by getting an element by its ID attribute. So what you would do is go to the element that you want to target and just add ID. And then let's call it the dash square. So it could be any arbitrary name. And then we can go here and then say document dot gets element by ID, parentheses, and you put under quotes the square. Now what does all of this mean? So document is like an interface through which you can ask the document to about things. For example, you can do an operation, hey, I want to find an element in this document and the ID is this. So this get element by ID is called a function or a method of the object document. You can think of it that way. Now you can notice the first letter is lowercase of get and then followed by element is the first letter E is uppercase and then B and I is uppercase as well. This is called the camel case naming convention. And it's predominant throughout the JavaScript language. You're going to see everything named like that. So make sure you're typing lowercase and uppercase accordingly because the case matters. Make sure to look at every character as you're programming. Look at every character to make sure they're the same. So here I'm going to say document dot. Now the dot means that something on the right kind of belongs to something on the left. So this get element ID function belongs to this document interface here. So that means we're asking document for an element by the ID. Now I have to provide the ID. The way we do that is by adding argument and the arguments are passed in between the open and closing parentheses. So in this case it just expects one thing and that one thing is the name of the ID that you specify for the element. In this case I type the dash square for the ID attribute of the div there. Now make sure it's exactly the same as that value for the ID. Now you want to add quotes there because this is what's called the string. It's a sequence of characters. Now if you don't have quotes in programming language JavaScript this means something else. It doesn't literally mean the characters that I typed. So if you want things to literally mean what you typed you must add either double or single code. Because later on we're going to learn about things like variables, functions and we can use arbitrary names for them but then if you want to refer to them that's why we don't have the quotes in that case. But when we want to actually literally say the character t followed by h followed by e dash and so on we need the quotes. Alright so this thing when you call it, so when you have functions, functions are instructions the computer execute. So this is a set of instructions to get the element by ID it will return something to give you back something and that's something think of it as a hook. Like you're hooking this element div here. So it's like referencing that whenever I type this whole thing it's giving you that hook that you can use to do whatever with the element. So and that whatever we can just say okay that returns an HTML element object and the interface through which we can change the style is called a dot style here property. So this thing is called a property when it's not a function it's called a property because I don't execute anything it's just like an attribute of the object. Now the style we can access all the CSS stuff for this specific element that was returned by the get element by ID and I can do dot background color and this will give me access to the background color of this element div here. Now if I want to assign a new value I must use an equal sign and then on the right hand side it's the new value. For example if I want it to be red I would say under quotes red like that. Now make sure there's quotes okay usually programming languages sequence of characters make sure there's a quote this is called the string okay. Now if I click run there you're going to see immediately when the page runs that the background color of the square became red. Now some people like adding a space before the equal sign and after the equal sign just for style it's not necessary but I like to always add because visually it looks better. So what's happening here is when the browser loads reads this document parses it and adds the style it then runs the JavaScript code and the first instruction is okay document please find me the element that has the ID the square and then it gives me back that and then you can change different size operations or change the properties in this case we're doing dot style okay I want to access the style for this element and for this style I want to access the property background color and I want to change that is I want to reassign a value when you have an equal sign like this means the value on the right will go into what's on the left in this case the background color and if you notice the name of the property it's pretty much like CSS except we don't use dashes in JavaScript world it's always usually the camel case naming convention meaning if you have two separate words for one property just make them together no dash but make sure that the first letter of the following word has the first letter capitalized okay. Any questions so far yeah like I said before the reason I'm doing this is to demonstrate that we can change and use JavaScript to change or manipulate a document obviously this is very silly example I can write just write in CSS you're right I'm just demonstrating to you that I can use JavaScript to manipulate anything in the document so the CSS style be not functioning anymore basically it's being overwritten basically initially the document you don't see it but initially the document loads the background color black for the square and then when the JavaScript code executes it changes it to the red color I can demonstrate that to you briefly there's a function in JavaScript that we can use to defer the execution of a statement for example if I want to load the JavaScript in wait for example three seconds before I do something and that function is called the set time out and you call it like this so it's a function meaning a set of instructions okay it does something to you an operation and the parentheses is the arguments now it's two arguments the first is actually a function as an argument so we can save function here you don't know this yet I'm just demonstrating to you you don't have to worry about it and then the second is how long it should take before execute this the milliseconds so I'm going to put three seconds to demonstrate to you what's happening when I click run so I'm going to put my statement inside that so when I click run you're going to see it's black and after three seconds it's going to turn red so that demonstrates that the initially the document that square is actually black but the JavaScript code after three seconds executed and then it turned it into red all right okay great now I want to teach you another way of I don't want to execute this when I run the document I only want to change the color when I click so remember when you have documents social media apps or whatever you're doing lots of clicking and that's actually what's called an event so there are different kinds of events like the mouse is hovering over something enters an area of an element or exits out of the element you're pressing a key in the keyboard you're clicking the mouse and you're pressing a button you're submitting a form you're changing text in an input and so on so to do that attach an event to any element you just go to the attribute and say the name of the event in this case on click so I want when I click this square element I want to do something so I just add on click double quotes double quotes so this is the attribute now the value is going to be what's called a function so you have to give the function a name now the function can be any name you want I'm just going to be descriptive and just say change color now I must add parentheses here so it executes the function when I call it when I click this now when you have this name change color you got to go into JavaScript code here break a line in the beginning you're going to define a function a function is a set of instructions that you can have define and then later you can call them meaning you can execute them whenever you need so let's call a function by writing the keyword function and then space the name the name has to match the on click so change color and then it needs if it if necessary you can pass parameters or arguments like input things that it may need to process whatever job it needs to do in this case there's no argument so I'm just going to put empty parentheses but if I had any argument I would put them within the parentheses separated by a comma now I'm going to define the body of a function with curly brace open and then curly brace close and between the open and close curly brace is where I put all my statements meaning whenever I need to execute these statements I can call this function so here I'm going to move this code to change the background color red there so what's happening I define the function of change color that has the instruction of changing the background color of this div to red but the function as it's written here is just a definition it's not executing anything okay it's just there whenever you need to call it hey I need to change color hey please change color that's called the function call and to the function call you would say change color to name the function with the parentheses like this okay now I don't want to change the color call the instruction right away when I load the document I want to actually make that only be called when I click the div that's why I put the attribute on click and the name of the function here change color with the parentheses so when I click the div it will call this function that means it goes to the code okay here's the definition of function and here are the instructions execute one by one from the top okay let's try it click run you see it's black the square I'm going to click the square of my mouse with the left click and see now it became red any questions so far so all right so continuing whenever you open something maybe curly brace or open tag in html we always like to add what's called the indentation to the style of the code now this doesn't matter for the computer it's just for us humans to better see or read the code so whenever you have an open curly brace what you want to do is everything between the open and closing you must add some space on the left hand side it's at least two spaces or you can use the tab character I like adding one two spaces this is called the indentation it's very common in programming language and you're going to see it a lot whenever you open a curly brace everything between the open and closing curly brace we have two spaces to the left at least so that that gives us like a sense of this instruction is contained within the body of this function change color okay so you can go further and if you need to change in CSS property for example the the color of the text here you just do the same thing you would go first we need to target so document dot get element by id what's the idea of the element you want to target within the quotes in the parentheses that's the dash square now an axis dot style and then dots the name of the property in this case for the text color just color now if you want to assign a new value to this if you just say like this it will give you the value back in this case will be I think black by default but if you want to assign a different value to the color that's when the equal sign comes in and then the right hand side is what the new value should be in this case I want it to be white for the text and then I finish off a semicolon now I didn't talk about semicolon semicolon it's kind of optional in JavaScript you don't have to type in here but it's just a habit from programming language other programming languages that always require it whenever you finish off a statement now most of the cases you don't need it in JavaScript so it's up to you to add it or not since I'm like I've worked without the programming languages I'm just very used to this and in more advanced cases it might conflict if you have a statement before this one and you don't have the semicolon it might combine them into one and do some unexpected things that's why I always add it so we'll just keep that in mind so semicolon I always finish off a statement it's kind of the same in CSS right you have a semicolon after every definition of a pair of property value same concept click run now click there you can see the text color changed to white somebody asks if we want to change the color again to a different color when you click it you add another method now that's a good exercise for us to do actually I wasn't thinking about doing that but now that you asked let's think about that so every click we'll add a different color so you can do that but there's a problem how do you know what color to add right so that's the big problem here if you have just a predefined color we can have make a list of colors and then keep a very keep like shifting between them another way is creating a random kind of color that might be a little bit of events for this class so basically it would involve you you generate a random number with the math dot random function and then you use that to somehow turn into a color because you know colors can be built with red green and blue values so you can generate random numbers for that and then build it and anyway an easy way to do uh shifting is maybe let me try to explain here so in order to understand that we need to understand what our rays are so I'm going to open the javtools here by click pressing f12 or you can right click and inspect and I'm going to go to the console tab and clear everything with a trash can now we need to understand what rays are and then variables actually let's learn about variables first so whenever you need to keep track of some information to use later we use variables it's keep think of it like a storage you store it somewhere so that you can reference it later so the way you do variables is you just need a name any name you want for example person's name I just call it name now to assign something it's always equal sign the right hand side is the value for that under quotes this would be let's say it's john so I define the variable name with the value that's a string like sequence of characters john and then whenever I need to use that I just reference that by the name of the variable which is just name right it could be anything but I call that name and when I type name here and press enter I get john back whenever I do that I always get john back because that value has been saved for use later now that's why I told you whenever you need to literally say the word the characters you need quotes because if you don't have quotes it would think it would be a variable that you define somewhere right so let's call it age and define it 47 and then whenever you say age it's not saying the word the letters age and e it's actually pointing to the variable age that has stored the value 47 so whenever say age it's always 47 but if you want to say the words the word age or the characters age and e you have to add quotes that's why I told you we need quotes for string to literally show the characters as they were typed okay now now we we know variables let's go back here we can actually use a variable to avoid us typing the same thing twice or actually finding an element twice you can see line four I'm looking for the square and then line five I'm looking for the square again so if you find yourself doing repeated actions for the same thing that's when a variable comes in that might be good thing to have or define so instead of looking for the element twice I can just do it once so what I do is define a variable here now I can say okay let's call a square element for the name of the variable I use chemo case many the second word has the capitalize e and then equal sign whatever now this whatever is document dot g element by id the square so what is doing line four okay I'm going to get the element the hook or reference to that I'm going to start the variable square element and then I can use it whenever I have five or six right I have this thing here I don't need to find it again do the same like work to find it again I already found it and I started the variable four so I can just use square element here the literal name of the variable and that will substitute this thing there you can think of it like this thing when it's run it goes in there somehow think of that visually but that's what it means so you can do the same for line six so now this is very different from before before we had document get element by d twice meaning you have to go and find the element once and then twice now we only do it once and we save one operation that's a little bit more efficient using the variable now to finish off we need to fix the syntax here because in javascript you know every programming language has a syntax meaning you have to add some sort of keyword to define a variable some of them don't need it and the reason I didn't need to type that when I was doing the console is because this is this is like a prompt or a rappel and we type something get something back but when we're writing the actual code here you should add the constant keyword before the name of the variable so you want to define a variable that's constant meaning it only is defined once and it doesn't need a new value later on now there are different kinds of keywords there's the last one where you can define a variable and change its value later but for the purposes of this one I'll make it constant because I don't need to change square element to anything else I just want it to be fixed to this get element by id return value okay now we can click run there and test it click there everything's okay now I got a problem because I type this thing here it's wrong right so I just tested and it's not turning white for the color because I forgot to delete this now it's correct if I click run click again we have the text turning white so let's make sure when you change your code to something else make sure to test it that is run it again verify all the conditions in the statements that is did the background turn red did the text color turn white ask yourself those questions as you're testing things after changing your code because you might find bugs like I just found right I forget to delete something when I was replacing the name of the variable there so I just fixed that bug that's what we call fixing a bug okay now let's learn about arrays let's go back to the dev tools with f12 now you might notice one a variable can hold one value here what if I have multiple values do I have to define one variable another variable another variable maybe I have a list of things right list the colors for example yeah we you could do that but it gets very tedious imagine I have a hundred like I don't know 100 colors I have to 100 variables that's not so nice so instead of doing that we do what's called an array so an array is a list or sequence of things okay now let's define it let's say I have different colors red green blue let's start off with that so I have color red comma color green comma color blue now I add space between the comma and the color because for style you don't need it okay I just like having space after punctuation now let's say we have these three colors and the purpose of doing this is to teach you how we can shift the colors as we click click click multiple times so I want to shift between red green blue um so you add these square brackets in the beginning and the end of the list and this is called an array in JavaScript the syntax very easy square brackets separate the elements by a comma now the element can be anything can be a number can be a string and other data types now we only learn data type string so far but actually you can have a number is that red I can add a one there notice the numbers don't need quotes because they're treated as numbers you know we can do one plus two that's three and so on you know I can add one plus two here you can see the output when I press enters three for the first element element is the name of each thing in the list so the first item is the first element the second item is the second element and so on okay let me revert back to red green blue and let's take this and put in a variable I'm going to call it colors equals now whenever say colors I can get that back right now if you want to access each of these elements you need the bracket notation on the right hand side of the name of the array so I can say brackets here and then you have to give the index or is the position of the element now it starts counting from zero so be careful the first element is sub zero so if I type enter that gives me back the first element being red because it's that index zero now if you do index one that's the second element that's green if you do index two that's the third element that's blue now I can see this is an array and I can change the color names by changing the number right the index and that's precisely the mechanism we can use here we can start off with zero and then go to one two every time I click I increase the number so let's go back to the code here so I'm going to add the final variable outside of function now this this value is going to be a click a counter right or index let's call it index I started at zero meaning the first element now I need to add constants here but the constant if I need to change the index later every time I click I want to add one to this I cannot do it so I must make it let meaning this variable the value can change over time so whenever I click it's going to call change color and then I want to go here and say that index the new value is going to be index plus one meaning initially it's zero right zero plus one is one and one goes into the new value of index so it keeps changing every time I click it's going to be one and then two and three so on now I need a list to keep going through the colors right so let's make a variable here called colors and an equal sign and then brackets for array let's make it red green and blue strings okay now when I click to change color I want to be able to reference the array of colors to see where I'm at initially I am the zero right so first what I'm going to do okay the background color here where I see red you see that I'm going to change that now how do I access the element the first element for colors that's colors the name of the array that holds name of the variable that holds the array and then brackets now I what's the index that's zero right now if I do this one it's always going to be red here because the first element is red but I need to change this so that the instead of being zero there is going to be something that's changing over time and that's the index variable because it holds a value that's initially zero and then becomes one and then becomes two and so on so instead of zero that would call us subindex now click run let's test it out red green blue every time I click so it goes to red because index is zero color sub zero is red and then the second one because of this line eight right so the second one be initially green because index would be one and the color sub one is the element with uh string green and then blue and so on now if I click again something's going to happen right it's going to kind of break yeah yeah because there's no more elements there so there's no you know zero one two three there's no three right there's no more color there now I leave that to you as an exercise to figure out what to do in that case because I want to move on to just briefly talk about the form validation but if anybody had any questions let me know all right let's talk about I don't know if I have time now that we talk about that I just want to talk about validation of forms let's just have a password field like this so let's do it let me make it before the code you can ignore this code for now just put it down there uh let me make a label or password I'm going to be very fast because I'm going to omit many things in HTML because we're running out of time that's input type password like that okay just like that just comment this out here for now comment out is this is a common meaning it's ignored you can press control uh slash here to make it ignored or not with a comment okay if I don't have anything there is the password let's add an initial value so just we have something do we don't have to type every time but we would remove this later let's say it hello there that's the initial password now when I'm be able to go here I know I'm going to type a password when I go out I want it to be validated but before that let's talk about the show and hide let's add a button here type button and we're going to call it show and if I click this button I want the password here to be shown but what controls this password being shown or not right it's this type of the input the type attribute if it's text right it shows but if it's password it hides so we can manipulate this element the input element when I click this button target this input change the type to text now how would you do that okay first you got to go to the button when I click the button right add the attribute on click to the button now we need to define a function for this set of instructions to do when I click show so this would be let's call it toggle password about that then we must call it with parentheses now go to the JavaScript type function space name toggle password parentheses we don't need any arguments right now so put curly braces body of the function add indentation now okay I need to target the input type password there what I can do by ID I could do by others I could do by the element name assuming there's only one input on the document but that's not very good because in a real world there's so many input elements so there are different ways you could add a class but classes are usually not unique so let me just for the sake of demonstrating this adding class here let's assume this is unique but it's not it could it couldn't be unique I'll add js-password dash input so I defined this class here just for the sake of selecting this element now I'm going to teach you another way of finding the element that's not yet element by ID and that's called query document dot query selector now this is nice because I can write kind of like CSS selectors here so remember CSS menu type dot something it means any element that has this class so I could just do that just here dot js-password-input so this means hey document I want you to query for one thing meaning find this one thing with this selector meaning okay any element that has the class js-password-input now that I get this back it will be this input and then I can change something about that maybe I can change the value let's try that if I say there and I want to make it just just so you see it just type text for now so when I click show you see hello changed to there because I changed the value of the input but the value meaning this attribute there okay just say dot value right and if you never you need to access properties or attributes on an object in JavaScript dot something right the attribute here is value any case I'm going to revert that and revert my type password here let's try what happens do you think type would do anything let's try oh so actually you can do that you can say dot type to be able to change the attribute type of the input and then the right hand side is always the new value so we can click show there if I click run at the top left it will reset I can click show again to show to you there you go now this is nice but the show is not longer it should be hide right now right how can we change the label this button when I click show well it's actually targeting itself right now I'm going to teach you how you can access the thing that triggered this event well when I click the button the button itself triggered it so the argument of this function toggle password is actually there's an argument that it could add is the event argument it gives you information about the event that just happened this case being I'll click so you can say event dot target to access the thing that triggered it meaning the button itself and I can change the the label for that button right in this case I think it would be the thing between the open and closing tag and I think that might be tax content let's try it out let's make it hide it's not working let's see debug this so how do we debug this I see I tried something it doesn't work well one way is very simple way is doing what's called a console log let's see if it works here so you would console dot log meaning a print a message to the console of event dot target what is that thing let's try it out click run I think this one click oh you see this error in the console when I clicked can't access property target event is undefined oh so it means I'm trying to access a property of something that does not exist is undefined so event here is the defined why is that well you actually have to type event here in on click value that's something you know silly but you have to type the event there and ask me why just the way it is now let's try again oh now it's working okay let me add an annotation here so we just learned how to debug with a console log console is basically an interface or object through which you can log or print a message to the console here every browser every website you can access the console in the dev tools tab tab console tab to debug things and I just print out what what is event the target I was trying to figure out what that is and it told me okay target was trying to be accessed with something that doesn't exist I conclude okay event was not defined so I must define it so I actually have to put a type event there in the on click value that's I figured out any question so far okay let's proceed and okay what if I want to hide well it's not working if I click let's close this so usually after you debug you can remove the console log you don't need that anymore I'm just gonna leave it there for the reference for you but make sure to always remove it when you're done debugging you don't want that in the production websites appear console logs anyway so the next time I collect this I must I need to figure out okay if it's shown I must hide but if it's hidden I must show so if I click there I need to find a way of knowing that but you can you can know that just by accessing type that's one way you know there are different ways to go about this problem one way you can just check the type of the input if it's text it means it's shown so we must hide so let's learn about doing that okay so after the console log I need to check okay if I go and document career selector this input to access this input I'm going to check the value of the type okay as you say that type to see this value now I must compare this right for something okay let me do this triple quotes sorry triple equal sign now the equal sign single is to assign or attribute a value now if you have double or triple it means comparison you're comparing left to right hand side be careful with that okay the number of equal signs changes things totally now why am I using triple that's because javascript has a triple thing too it's like stricter than double equal sign two equal signs so I would advise you always use start off with triple if it doesn't work out for you you can look about using the other one but anyway so what we're going to do is compare that to the string faster I can be double or single quote doesn't matter if the input there the type attribute value is password that means it's it's hiding it so in that case I would make a show right which is basically what I wrote here so I must have a condition if this do this else if that is not true do something else so that's the if statement and the syntax is if and you put the thing in parentheses that you want to check and then curly braces and then you put else here like this let me make this bigger so syntax is if keyword parentheses you don't need the space here it's just optional but I always like to add and it's something to to that returns true or false it's called a boolean programming language so this comparison here will return true or false and then the current braces the statements you want to execute if this is true but if this condition is not true meaning false I'm going to do whatever's in the else block between the current braces for the else okay so if the input type is password meaning it's hiding I want to make a show therefore I'm going to cut cut the and paste the code between the open and close for the if but if that's not the case meaning remember if I click show it changes the type to text so if it's any other type that's not password let's assume it's just not password meaning is text right then okay in that case I must okay event.target.text content I change that to what okay I got a show change the label of the button to show and then we're going to get the input type basically the same thing there right here selector the element has dot meaning the class js-password-input and then dot type change that to password so it's hiding it okay you see the same pattern except here show and here's password now if click run show and click hide it's hidden right go hide show hide any questions so far okay okay now one more thing I don't think we have time to do all the other stuff we did the first time but let's just think about okay how would we make that let's say I type some text right I'm typing hello and I click outside I want this to be validated meaning if it's good or not good password so the event here is okay when I click an input that means a focus event when I click outside it's called a blur focus blur so what I'm going to do is the input I want to on blur do something and that gets me validate and I call this function validate let me make this bigger then you can do the same approach here you can do function validate you know like this now for the sake of time we don't have time to do a very good solution right now I'm just going to assume it's invalid right now and just I would just want to change the background colors to red whenever I blur so what I want to do okay who's the the thing that I need to change it's the input background color now I can access that because I have on blur here associated with the input so if I want to access that that's the event dot target so add event there and then add the parameter event to the validate function and then you can access event dot target that's the input itself the one that triggered this event on blur and you can see dot style dot background color and that's red then semicolon to finish it off click run click there click outside it's red the rbs okay how do we actually validate well you just check the value of the input remember event dot target is the input and then dot value is whatever it was typed you can change you can check here okay is the value you can check or compare to something to see if it's invalid let's assume okay let's just do a very basic check right what if I don't type anything for the password it's empty and I click outside that's invalid right how do I check that well you can say event dot target that's the input then dot value is whatever was typed now you can say dot length that's the attribute of the string many how many characters there are if I don't type anything I delete everything there's zero characters so if this is the triple equal zero if that's invalid right so in that case I'm going to execute the background color changing to red but only in that case otherwise if I have typed something right the length is not zero it's it has to be one two or three and so one in that case I'm going to say event dot target dot style background color let's change it to green how about that just say oh you're good and then click run let's write I'm going to delete everything click outside is red now if I type something now it's green when I click outside okay let me click top left run again so if I click inside if I it's valid mean it's going to check hey how many characters were typed if it's not if it's equal to zero change background to red else in this case it's else right because there's five I think characters there it's going to change the background to green all right sorry for going too fast because we're out of time but if you have any questions let me know and I'll wrap this up and finish