Learn JavaScript In 3 Hours ( + Multiple Challenges ) | Gancho Radkov | Skillshare

Learn JavaScript In 3 Hours ( + Multiple Challenges )

Gancho Radkov, Lead Developer @ Radkov Academy

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
22 Lessons (2h 54m)
    • 1. JavaScript Class Overview

      0:31
    • 2. Displaying message on screen

      4:06
    • 3. The console

      6:55
    • 4. Selecting and modifying elements with JS

      5:08
    • 5. Simple Functions

      5:54
    • 6. Practical JavaScript Example

      10:04
    • 7. Variables

      6:54
    • 8. Arrays

      9:54
    • 9. Conditions part 1

      7:53
    • 10. Conditions part 2

      5:38
    • 11. Practical Js example Form Validation

      10:08
    • 12. For Loop

      7:25
    • 13. For Each Loop

      3:43
    • 14. While & Do While Loops

      6:30
    • 15. Booleans

      8:33
    • 16. Math

      5:57
    • 17. Function Parameters

      7:12
    • 18. Mini Project Multiple forms Set up

      9:49
    • 19. Mini Project Multiple forms JS

      15:56
    • 20. Tracking and Storing User Actions part 1

      10:41
    • 21. Tracking and Storing User Actions part 2

      13:56
    • 22. Tracking and Storing User Actions part 3

      10:59

About This Class

Hi there!

By the end of this course you will be able to develop exciting functionalities using JavaScript.

#note This course requires a bit of knowledge in HTML and CSS.

#note 2 This class is part of complete web developer course available here in skillshare should you wish to learn more!

You will be able to add, modify and style the content of your web pages dynamically using JavaScript.

The best way to learn is via practice and this course has planty - it is full of exercices, challenges and projects that will help you sharpen your newly acquired skills.

I've created this class with passion and I do hope that it will help you achieve your goals.

Best regards,

Gancho Radkov

Radkov Academy

Transcripts

1. JavaScript Class Overview: Hello and welcome to the JavaScript section of discourse. In this section, you get your first taste in proper programming. In the next lessons, you're going toe little how to manipulate change in interacted HTML elements using JavaScript. You also learn how to start dating your brother, how to create impressive functionalities and much more. I hope you're excited. And as always, if you have any questions, do not hesitate to contact me. Good luck. 2. Displaying message on screen: Hello and welcome. And what we're going to do today this video is you're going to learn how to display a message to the user with Chancellor. And let's go ahead by first modifying cower. I toast to showing a message with John School like this that safe, refreshed, perfect. I should have started by saying that I kept home empty with paging. You should go ahead and create one yourself. And if I actually me my spine but also overhearing of expert like you have just playing index weapons so you should feel the same. Wants to give the same. Just modify your title. Let's go get angry. A bottom just that button and our editor should out to complete this. Automatic it and let's tie inside Our bootle greet may like this Greet me with exclamation Well, can you? For safe and fresh perfect, we can see our but anyway, start kicking it. Not in Greeley Oh keeper, because we haven't configured yet anything to keep from when the button is clicked. So if you want to display a message to the user when the button is click, we can do so by adding can attribute form, please go here and click, and so you should have on click equals and the whole quarts. What does from picked us is it works is basically when we click the button this on click, it's bigger Pizarro and inside you can write our JavaScript port and in this case is not to display my situation. Use a jealous God function or functionality, but it's called alert, though Gore Get Back, I wrote. And after a low, as you can see, actually our editors suggesting it I left dysfunction alert brackets message and just working. I know it looks complicated at the moment, but in official Pleasants you everything will be clear. So after the go, get an open brackets and inside these brackets open single quote. So as you can see after own click, we kept double quotes, which are up everything. Any side alert, we want single quotes, and that's that. Okay, how are you doing on which? So if we save fresh, what is going to happen is that we're going to receive a pop up with this text. Anything click. We get the page. This page says, Hey, how are you doing? Any cook? Click. OK, so let's repeat what's happening here first because our bottom And then we set the attributes on Click, which triggers and executes the code that it said it on the inside the warts. So we have alert, which is Jaresko beauty in functionality. And it's going to display anything that its return inside inside the single quartz we can go get and maybe we can play. This is a simple message and it will be displayed. This and if we save and fresh frankly greet me, we'll get our message. So this is how guys you can display a simple message. So basically there number of Sue's on Instead of bottles, we could display a message inside paragraphs inside text areas inside, Many different mediums are different ways that we can display. But this is the very first, or this is the fastest way that you can display a message. Very javascript. And now it's time for the challenge. What? I want you to do it. So I wanted to create drank a bottle which is go up to display a message, for example, The message could be what you've learned today in web development. How about that? Okay. I hope you enjoy this. Listen and take care 3. The console: hello and welcome. And in today's lesson, I'm going to give you a brief overview off the JavaScript console. So go ahead and modify the title to the council. Okay. Like this. And let's leave actually our button over here because we're going to be using it for this Lesser. So what is the cause or? Well, the calls, though, is the booking. So that he hopes is developing, right? JavaScript, talk how we can access it. Well, you can do so. First back looking giftware off on your keyboard. Leslie s. So this is the cause of a particular which is for Java script debugging and also reason other here for developer post. So I'm going toe klik and ago, the device Tobar, sir, came at a temple. Normal, normal view. So basically, this is the consul, and what we can do, or what it's doing is displaying my madly down script errors. So if we have some error, for example, as you can see, we have this 11th function. You for mistake? Like this? Uh, if we're finished thing, we'll get on go reference. Ever alert is not defined. What it means is that it cannot actually executed because it doesn't know what this other look. Just so besides actually seeing getups? Because if we close our causo and just start clicking, we don't really see anything on the page. And the reason is because the errors have displayed to our council and another way that you can access the causes by clicking and clicking. Inspect. This is going to trigger the HTML viewer and besides, chm of your you can keep on council and also, as you can see once we continue clicking, will get the counter how many times this era disappear. And once we for this old never safe, fresh and start clicking everything, it's working properly in the camera messages here. And another thing that we can do with a course of African looking so actually displayed text inside. Also, we can have a job skill, but that is not a local. It sure actually can. Back with You are completed the left with the next time, and if we pick it, actually, if you press enter, we get a lot. Yes, you can learn JavaScript as you can any up for Page. It's very, very fearful to, and you will using it a lot. One of the ways that we can display or we can show next year from our Web page is by using that, Isn't that so? In other from Java script in our fishers, go ahead and create good. So just back skip like this, and you should get opening talk in closing time. And it's just Truby just before the closing track off your body. So should give your elements on top over you limits like text. So here should be on scripts on this just before the ending back of the boat, it so inside our sputum. With that, for example, over. And if we're fresh, this is going to be bigger automatically. So here what we made this that would trigger dissolute functionality when we click the bottom like this. But inside the scripts, everything will be around automatically for a fresh We'll get this Page says nothing because we didn't have any text. And if we have some fixed, like how to Riegert or auto run, if we're fresh, we get our text over here. So one of the ways that we can display text in our Bozo is by using, as I mention console loco So let's start packing also, though, and open markets again. And, as you can see we get Look, it's it wants message. So let's give it a message with the court's either double or single ports. It works both ways, and then we need to finish our statement because this is a statement and we can finish it by saying my home like this. So that's that. This is this consul message. Let's if if we're fresh, you should see the message immediately. As you can see, what's the difference? And we see this is Septus cause a message. And again, you can display anything here and the same thing. We can actually move this to our own click attributes. So let's delete are and oh, thank you. Let's open. Let's close Our that was any side. Let's based and this is why I created this. Now, if you've created the words inside to be double quotes, it's not going to work. So the *** is that they should be different. That course our side should be either double and the courts inside should be single or the other way round. Otherwise, it's not going to work, and you're going to learn when we get morninto creating actual called why this is happening . But the reason is because otherwise our editor or our browser does not know where one finishes and where one ends, because at the moment it reads, this is opening. This is closing quote instead off this is opening and just on TNT s closing, I hope it's not very confusing, but anyway, just go get them here. The single quotes outside on the double quotes outside. So if we say fresh, as you can see our message disappear and if you keep, we get our messages. And also you said you can see the counter inside. That is many times, says Weekly. Our messages show. Anyway, this was very brief introduction to the cause, so it's much more powerful. You can do many, many things, and you're going alone as we progress and learn more about school. But this guy can just play a message for the cause of and also your foot. Mr Jacque, for example, the causo they're fresh. Let's leave the bottom. We get also another and this is very careful because, as you can see, he tells you exactly what you on What line is the errors that appear? For example, in there is not a general line A. So you can go there directly with a plan and the budget and you can see Okay, there's there's a typo. So let's that causal any for fresh again when you actually do anything additional for the change Take effect on purpose to get everything working. OK, I hope you enjoy the system and get 4. Selecting and modifying elements with JS: hello and welcome. And in today's video, you're going to learn how you can access in modify HTML alliance and for this let's go ahead and modify our. I talked to accessing and modifying a general elements. Would John Scott Let's save refresh. Okay, our Paterson dated on. Let's actually delete our But in this well, let's leave the skills tags because they're goingto some court perfect. Now it just gripped. You can modify pretty much every aspect of your elements. What you can do it CSS and HTML. We could do it with JavaScript on the month, so let's go ahead and create a truck. A Trump list rental after Let's die welcome like this. Any for safe and fresh would get the welcome text. Political right. But what we can do is that we can We can select this a Tron withdrawal slip and you can change the text, do whatever we wish. So first thing, let's go ahead and given a digital this patron, let's say welcome. Welcome. Underscore here. OK, this is going to be our idea. Woke up. Underscore kidding, because you might give many feelings. The next thing that you want to do is Let's go two hours inside Script Act. Let's start packing document. So what dismisses that? They're telling Joseph that we're going to look inside the document, and this is our HTML pitch. This that don't and it's that get element by energy. As you can see, we get it subjects we have it suggested by our browser, and afterwards it's open brackets and inside his brackets. Similarly, toe Alert and Polozola flow. We open walls either single or double any side except like the idea off the element which we want to pass us. So in this case is going to be welcome. Well, welcome. Underscore hitting like this. What you wrote over here is going to allow us to access the H one and let me give an example that we can actually see it in the front row. Let's die brackets and let's are everything except the same Michael inside the brackets. So if we save a fresh is against, you would see in a also the HR. But the idea in this lesson, it's also to modify our events. So after selecting the element we can that dot and it's like you know, it's Gemma, this property is going to allow us to change the texture inside or the HTML because you can also at elements inside this element. So let's open court like this, and it's type inside. Welcome to my work pitch like this. So what is going to keep on here is first we're selecting the element, but document don't get element by idea. We specify the typical. She might have multiple elements ever worked will select only the one with I did it with some light here and then we're going to replace and please know that this is replacing basically in the HTML because and we're going toe to replace the current age channel. The element with what? They're gonna were rolled over here. So if we save it fish master refresh, you get welcome to my webpage. And this could be any day and I mean anything. And also if fresh off you get anything, and as I mentioned that this place is everything, that it's currently there so you can get some devilish. And when your user loves your beach, you get the text that you're out here. So I don't know why you would have gibberish in first place. But in case you do there many cases where you might want to do that, for example, you might shift. Hello. Welcome to my webpage. And when your user logs in, you might replace the text with Welcome to my webpage, John, for example, or the name of the user. And so also, when they enter your garbage, welcome to my webpage job or something. So this is how you can access elements by did there other ways that you can access them and we're going to learn and talk about them in the next videos. But this is how you can access them by idea. And this is Kogan Change or replace the age General off these alerts. And now it's time for your challenge. I want you to create a paragraph. I wanted to give it on a gentle this paragraph. Then I wanted to selected JavaScript and replace the contents or the original. This part of Can you do that? I'm sure you can. I hope you enjoy this. Listen and take care 5. Simple Functions: hello and welcome. And in this lesson, you're going to learn about JavaScript functions. So let's go ahead and first modify the title. Poof! John Screwed functions. And then let's delete the call from the biggest lessons and leave the script us because we're going toe our pork in sightless and fresh, perfect Well, John school functions. They allow you to execute court wherever you need, and with little dysfunctions, actually can do many, many complicated in complex functionalities. And let me just show you actually were already used functions. We just didn't know that they're called this way. For example, if you remember in the alert function. So this is called function basically well, no doubt our page something keep us in this case. Now, if you remember that we kept on voting over here, that's great. But click and get it on a tribute own click. So when the boat and quickly executed or involved in other way that you can say that you actually around the function and it's a alone. I also delete this arm. So if fresh and we click Denree invoke around this function. So this is just the invocation of the function, but we can create our own basically similar toe alert. But they're going to go for to implement whatever functionality will implement inside the function. So how can calculate our own functions? Well, first type function the cule, and then we give a name to dysfunction. Basically what we're go or how we're going toe invoke, for example, We get in there, show next. So this is a good name of the function, because when you read the name, you know exactly which is doing guest alert just by the name of the function, You know exactly what this function is going to be doing. So after with that function, then the name of the function and with that no more brackets. And after what you want with that curly brackets and inside this curly brackets, we're going to type our court. So this is the same thing. Just selecting with Jesse's just that company brackets and inside the curly brackets were going toe our court. So let's like inside a load, actually. Really Silly column. Any cycle. Look, let's type so fixed was in the vault and involved like this. So how do we take our function? Well, we can just go on. Invoke the name now. We could do so by replacing a love. For example. Show takes as brackets if we save and fresh Chantix was involved. Basically what happened was once replete just our function, which which inside hit ola and just so sore for calls or Lok or any actual JavaScript coat that would be executed. You can execute it in functions. Anything like actually we need to refresh so we can get out of text locked inside the concert. And this is how drastic, unclear functions. As I mentioned again, that's therapy. You start by the keyword function. Then you give a good descriptive name off what dysfunction is going to do at the beginning . It's a difficult to tinkle proper names, but don't worry. This will come as you gain experience or just name your function is wish both right and then there. Descriptive of what they were doing and decide to implement your court is love. Actually, let's elect our brought on by a idea. Let's give it another justice a short example. So let's say I did. But let's elect our Booker. Now go ahead and select the book. Did you manage to selected, So let's go ahead. And that document, though, get element by idea. Let's open holes, I bottom orgy idea of your element. Let's replace what we want to place. We want to replace the inner, actually, for what we want to replace. The in a fixed. Now the voters. Usually you don't really put HTML inside that you can, but you don't really do. You can just replace it takes equals. I clears, for example. So what was going to happen is when we click our bottle, we're going to trigger our short text, which is work to replace the text of our marriage. Not really descriptive because we our idiot, because now the function is not doing what it's supposed. So let's actually advocacy. I click the button, and a change in the things will change. So let's change the name of the function, change bottom, but next and also need to replace the on click here and this you're seeing. Actually, I'm typing the name. I started small letter and each work each sequent world. It's with a capital letter, and this is called Hammel case. Without the G, it's a good way to name your functions. So if we save and fresh clear frankly and this is how gas it can create functions now for your challenge, I want you to create an HTML element. For example, Text area. I want to talk the trigger bottom. Then I wanted to create the function that is going to replace the text inside his ex A. I hope in Georgia system and they care. 6. Practical JavaScript Example: Hello and welcome. Let's begin this lesson by first me sharing a short story with you years ago and I stopped at learning from Victoria just like you. I feel the problem where I learned something new, but I didn't know no how I could apply what I've learned in practice. I don't know what I could create with the knowledge that they kept and this was a big problem because even though I had sufficient knowledge to create many, many things, I just didn't really know that I could do these things. And this is something that I want O avoid. But I want to fix with discourse. So for this lesson, I go to give you a small practical example of what we can do it. Everything that we've done so far. And even though you might think that what we'll work with them so far is located sufficient for anything, I will show you that it is enough and you can do many, many things. And obviously when you learn a lot more, you'll be able to do many, many, all some things. But even now, with just the small knowledge that we have so far, you can really do all some things. And so what I want to show you now we're going to get the scenario where users go up to register in our website and we're willing to display two messages. So the fullest cases the registration will be successful and the second message is going to be using them. It's our take. We're going to simulate the situation. And what are interesting genius, how it can display these things with Jascha. So I'm not going to waste your time by creating a fully working form and how we're going to handle the former someone. I'm going okay just to button switcher going to trigger the functionality we need. And let's first begin by removing the course from the previous less and less time off our bottom. And there, let's remove our function as well. And also modifying the idol toe practical. That was good example. When you go job script example, that safe refresh Perfect. Now the first thing that I would want to do is let me actually create several impose just so I can check. It could be unbelievable thing in boots, just like it is just GOP and rules this one is going to take that is going to be possible, and then we with us. But on one on, let's get another one. So in the first button, let's type registration success and the second book under its time registration fail. So let's save. Refresh. Okay, So if our first user may feel possible, field and this is going to be our fingers under the registration of successful or the registration will fail. So what do you want to do is that we want to create two functions, so function one is going to be registration succes and is you remember after the name of the function, we open brackets and then curly brackets perfect. And then let's create another one. Swear to function registration, fail brackets and curly brackets. Perfect. Now let's just go with this that everything is going to be working together and other name of the functions in other. Yes, I love again and this country, and it's very good when you're right. A bit of court food test if everything is working together. And now let's figure that by adding Click and first is work to be Registration success Buckets Perfect and Danica on Click registration Fair Save Refresh and when we click, we should get the registration success perfect. A click will get registration fair now, As I mentioned, it's very good practice that you change these things when you're right small, be small piece of court. And then you write a bit more piece of court as someone because otherwise you might do a lot of changes. You're my feet mistakes, and it gets really the more go to care that you need to fix its. It's hard that, I mean, it's simple things. The market to fix its called So anyway, we kept everything here working. So what you want to lose you want to create. I want to create just which is going toe hold our error or success message. So let's given aid your message. Then we're going to care. Fire graph inside touches work. Kevin Ideo So this is going to be as a paragraph. Facebook messages will be message area this Don't worry about the names. What we want to do is when we click the registration success, we want our message area Tokyo Bury in the ground and our paragraph talking about text. Both Congratulations. You're register is going to be really cool. So is a mentioned in previous lessons that we're able to change any aspect of our elements , including styling system, also shouldn't be difficult. Okay, so once we click registration successful, what we want to do is you want to select our enough document, get enemy by year brackets and your job the other, and then we want to replace the it's Jamari site in a extra amount would when the relations congratulations you are now pledging start and then what you want to do is and drink. They drown through our message area, so we want to select it Document, get element by you Message radio message Does Syria and they want to say spy? Oh, because you want to change the style, this payment style big guns? Yeah, as you can see, actually, also the starlings off the naming, sighing camera case. As I advise you, toe name your function names and what we can do is you want to name for We want to set the big color too green, for example. So let's save the flesh. Let's test if everything is actually next, move your looks So if we save a fresh registration success. Congratulations. You're now register. And then I want to do the same thing for registration fails. Okay, Get intimate by idea. We want to send the message, which is our paragraph, you know html and want to replace it with Sorry, The user name is a cup. It's already they come. Okay. And then we want to select the message area and change the background color to red. Can you do it? Go. Okay. It's a small challenge for it. 321 Did you, Mitch? I'm sure against our let me change it is up. So one thing that you could cheat it is. But just by coping the court evolve replacing this with a threat. If you did it, wish you were developed, so we should be efficient is there's a fried think everything. And if you are able just to cooperate in your show it's working properly. Just go ahead and copy. So let's refresh. Let's imagine that our isn't like I add mean on admin and most likely, let's take us. Let's simulate registration fair. Surely the user name is power to take over. And if if you use a price news. Our name, new users and were given a sort of the same doesn't matter, and it's similarly now. Registration success actually left. Congratulations there now Regista Perfect. And this is very short example of what you can do it, John Skin. But you can mortify any HTML element. So imagine what you could do. For example, you, you might show hold just in my change anything. I mean on the pitch, you might show images to my height, something you might move elements out. There are many, many things that you could basically the the possibilities are endless. And now, after created this, it's the absolute charge. I wanted to create a logging pitch where you're going to display message two years on either the logging successful. This is the first case, and the second case. It's for example, the combination off user name and password is incorrect, or you cannot find it in the database or something. But first, it's success in the second despair. This is your challenge. I really hope that you're going to do it because it's going to be a great practice, and also you can come up with a cannon me and contact me Show me the solution of your challenge so I could give your feedback Or if you have any questions So obviously you can contact me at any time. I am online there. I actually have an application on my boy away. You can message mint pretty much any diamond. If I'm awake, I'm going toe ourselves. OK? I hope you enjoy this practical example and they care. 7. Variables: hello and welcome. And in this lesson, you're going to learn about JavaScript of arrows. So let's first delete a call from the previous, less and less daily dysfunction. And I won't give you I want to know exactly what are these variables and what you can do it that go okay. And a baker. I don't Oh, jar script. Adel's safe. Refresh. Perfect. Well, what are these variables? Will they allow you to store information? But you can later on access in years? Let me give you practical example with these horrible. So go ahead and create your script acts. If you deleted them so and inside our script us, go ahead. And I let this this car would define that. This is going to be for Ivo if you remember, when we define functions or when we create functions to stop ridicule, function and then the name of the function. Well, with my opposes the same year except you start with the you were let on then the name of your arrival, for example h equals that I equals Sign. Ever. Example aging. Now what is happening here? First again, we have the key work left. Then the name of the horrible in display. In this case, age equals 18. Now, if I save and fresh nothing really help us. But this value is our distort inside after our page loads and we can use it and I'm going to show you Now let's create new Vallejo. Let's say let, um this, but I was going to start in the assault name equals and, for example, my name, Gunshot. Now one thing is that you cannot just pack your ex's likeness. I mean, in order, protect extra new to put port either single or double quotes and then close this statement with, say, my column. So this is the correct way that you can die next. For the numbers, there is no problem. You can just like your number. So how we can use it? Okay, let's actually modify eight people say I'm not a Gina 25. So what are going to do is well about to create to buyers First paragraph. Let's do it on a video age and the second part let's give it a nadie off name. This and what we want to do is you want Oh, at this paragraphs, those violent Aggies Bibles are holding. So now what we should do is you want to select the variables and assign the interest technologies paragraph school just for hours. Now go. Okay. S elect the H paragraph blade. Did you do that? Do you remember how well we first started? Document then with that dog and get element by idea. Then your brackets quotes inside the portrait time Did you of the element that we want toe access Then with that thought, you know html waas and will replace the current in original the element with what we write on the right side off this table. So let's I just the name of the ram, or in this case, So h was it with some Michael. So what would happen here is that we're going to select the age element on the element with idea of age ever worked to replace the interest human with the follow that currently H it's holding. So if I say and fresh, we should receive all we should see 25 on the screen lets it fresh 25. So this is how you can up and you can see for information and I want to do the same with the name fire. So go ahead, select the paragraph will take the name and assign the inner HTML off this element over Ibo name. You know that. Okay, I'm sure you succeeded. It wasn't that bad, right? Especially when you give example can do it. So let's go, kid. In that document, get 11. My idea brackets wounds we want name. I do the dope in the HTML equals name After saving can refreshing. We should see the violent, the vulnerable name it's currently holding. If we're fresh, we get Guntram. Now, if you changed in there, for example, toe Oh, you mean and save it when the referential going to see dated. But if we're safe and fresh, we get a four color Perfect. And this is how guys who can stop valuables. This is how you can start violence in variables. Now you need to keep in mind that these vials in the change, for example, you can type age equals maybe. And what is going to keep on now? We kept age were initialize it over here. This is the correct term. We initialized this where I over here and gave it a one off 25 Now, later on online 70 we reassigned or replaced the viral age to 50 and you put a finish over here. We should see if you see basically talking the same way it's here when you say the viable name or when you write about him. It was toe something. This is what toe Replace completely. Replace the previous vile and this also works for the name is up name equals who is very useful, I hope. Let's see if we say fish everything it's replaced and updated is it? Should be so. This is a short introduction toe eyeballs. This is how you can use them. And now it's there for your challenge. What they want you to do is I want to do create X stadia. Then I wanted to create a Abou with some text you can copy Warren it from your long hair. Limit off the text that you're going to places that horrible. Maybe the limit is their memory of your machine. So just copy some text and I wanted to assign the text of this viable tool the next day. And when you refresh the page, I want you to see it. Okay. I hope you're in George's lesson. And thank you 8. Arrays: hello and welcome. And this lesson you're going to live about JavaScript race and what is our? Well, they're basically of arrivals on steroids and they allow you to start in a single orebro multiple violence. And that's why they called away so we can distinguish between one kind and yella. So first, let's delete the court from the previous lesson and let's let our powers I also want to update our fight. Opel jobs, good eyes. This, let's say for a fresh perfect now for this lesson, we're going to be using the console. So what? You can do it soup, leaking spec and then click on the causal. Or you can directly press if 12th and it's goingto launch the developer tools. So what we want to do is you want Oh, but first, let me give you practical example why you might want use a raise and not violence. Let's create a viable H is we did in the previous less and go ahead in creative Orebro age and give it a vital 20. Did you manage so again? We start with the Q word let than the name the viable age People's Bank and close it by semi Colon. Now what will happen if you have several pages, for example? And just we just think that's a I guess talking age, age to HD and this is 20. This is 30 and this is for now. If we want low get, we have to the console. Look, forage it. Then you have to do the same thing for H two and H day. And if we say that a fresh you should see them over here in the Congo. Perfect. But it's perfect. It's working. But what if you can't 30 different values for age? You have 30 different years. Or what? If you get 100 or 1000 which are want to do, you're going to write 1000 travelers. That's not really feasible. So it so and you're goingto be caring very fast time maintaining such things on. That's why I get a raise and how is solve our problem. So if you want to create a single viable that is goingto called oh, our violence that we need Well, you start again by typing. Look, you were let so instead of a trickle, say ages in multiple or plural. Oh, because we know we're going to be having much profiles and then equals. And here's the difference instead of type into the single Rallo like this, For example 20 You open square brackets like this and inside the sperm brackets you just like about us, for example. Thank you. 30 40. And then you finish with Sam a car. So, you see, was the difference in a single viable Let's say, when I am home. Actually, also, I didn't mention the comments and in javascript they're just so slash is next to each other instead of single viable this G uys, Are they saying you shall vice with square brackets and then you just pipe inside your runs separated by a comma. So if you want Oh, love, this follows register also the well ages when were a fresher going to see our values here unless they're fresh. Okay, so we'll do here as you can see that this breaking a single line forest here do you in brackets and then it's where brackets with your former voters will display is the number of the violence that we have inside our way. And if we have more, for example, for follow and fresh would get the number four plus the value over here. Then you are. Now, if we pick over here so it connects. Expand the list. We're seeing something strange. We see zero once, and the bar one calls on the block. So was the joke. Yeah, well, this zero wanted treats the position, the first values going to care, position zero. And this is very important. That are a starts counting from zero and from one, a serious stop. It takes a bit of time to get used to that. But don't worry, it's not that skin and all. I just come from zero. So the first value is going to get in position. Zero. The next values going to build position one, the violence going to going position, toe and so on. It's a bit counterintuitive, but you'll get you stay. So how do you access? Because at the moment I showed you how we can love the whole I. But what if you don't need the whole way? What if you need just particular final out of this, I Well, we can do that. Let's also look by the name of ages. And if you want to access particular value. What, you're going to lose your going toe open square brackets like this and you're going to die the position of the body that you want. So, for example, if you want the first battle, you're going to type ages zero. Let's close it with Michael in your foot fish that save it. Actually, we didn't save it. Okay, well, what's going on? It will save it, would get drained you and let's have a comment on a boat. This place the first vote in the eye. I think this. If you want to access the value on the second position, you need to type the look body off. Just the name honey Square brackets one. And this is one to display this the violent on second position. You don't know your hyping one, and the reason again is because you start from zero. I hope it's not very confusing. I know it's going to be difficult at the beginning to grasp it. Then you might actually make mistake's by typing the violent position five. But it turns out this is the sixth position is don't put about them and just try to memorize it. But we practice everything cool, get better and displaying about on this second or the volume. Yes, the second violin directness. And also we forgot our cement. Now there is one thing that I want to show you. It's all to happen if you try to access violent position that does not exist because at the moment we're practicing violin from positions that do exist. And that's that one's a little look. It just square brackets that now we don't get 11 virus. So this shoot throw on there. And if one place we just get the world undefined, I need to be careful because it received There is not really on there yet. If you try to do something with this is, it's not going to work because the body does not exist and JavaScript Radley throws a never . So it's very how to say, I mean, you need to take care of these things by yourself, But I mean, as you can see, our court is working. There is nothing really breaking at the moment, but you need to be careful because sometimes you might write. Watch is something that is not there, so you always should check, and I'm going to show you in the next year Lessons when you start talking about conditions , how you can do these checks. And anyway, now I showed a car. Okay, Kevin. Ari. With numbers. But here you could also care strings for X. In other ones, for example, you might type, but that's in city names. You just open quotes is read it in the previous example with names you just open quarter, for example, you can buy your New York wounding. Yeah, but it doesn't matter. I mean, just works with any number off. What I most of any number off violence. So if we said had a fresh, we'll get a one a day over here. We have seven inside the brackets. And the reason is because of the moment we have seven survivors and if we expand it, we can see that the violent position to read it's boosted the violent position for its New York s so on so you can have them mixed something. We just do not allow this such a job and so on. I mean, they're stick to type, and if you get a taste off, numbers is just numbers. If there are strings just stinks. But just don't worry about anyway. This is how I cannot use eyes. And now it's time for your challenge. I wanted to create brand new Ari, and I want you to list your favorite meals and also below them inside the console. Canada Up. I'm sure you can if you have any trouble, says the always and you should. So just want to say hi and anything. I mean, what they were. It's on your heart. You can conduct me throughout for cover me pretty much old. Thanks. I'm going to see your message and a plea and the reply as soon as possible. Okay. I hope you enjoy this lesson and take care. 9. Conditions part 1: hello and welcome. And in this lesson you're going to learn about conditions. And before we start, let's delete the court from the previous lesson. Let's go ahead and move the court in between s side and also getting a data battle with Justin conditions. Let's save refresh for effects on what On these conditions. Well, with JavaScript, we can execute different pieces of court based on condition that in practice, your world abusing conditions all the time, believing all the time they're one of the most used techniques in providing anywhere. Let me just show you very, very fast example for conditions side first little hope to you for the example that we're going to actually write the court wealth the marginal given website Anyone to display a message. Your ears are based on the wedding day. Visit your website, for example. They visit in the morning. You want to show Hello. Good morning. If they're visiting the afternoon, you want to show Hello. Good afternoon. Any day visiting. Do you think you want to show? You know we're giving now. Obviously you don't want to show the three messages one underneath each other and call that the user so ignore the incorrect once so you can use conditions for that. Well, let's get of arrive. Oh, so well, do we need to go? We need to have the key will let when the it was and this is going to go. The current kind of work will be tasting the different cases. So let's say the current time it's they're hoping them what? I'm just like Mrs Jar. Then one plots on break points. Basically, what we want to do is, for example, want to consider that morning's is everything before for football. After all, it's everything before six, and evening is everything before 24 ago, for example, in the 24 hour system. So the Americans Now let's get the first break point. So we let is it Morning, Morning Break point people's oh, then let's get for Ask the moon they want equals a year or six ago on lead. Evening break point equals 24. So walking due in this case, we want to check give the current time, in this case time that we're old here. Stan, if it's less than to offer cloak we want to display morning, it says in six oclock we want to display with after more than if it's less than 24 o'clock , we want to respect with UNIX and how we can go that well we can use conditions And how do we create conditions of their several times? But the most often use part is the if statement How do we create your statement? Well, you stop. Yes, then open markets and then couldn't rights. So inside this brackets is your shop inside the curly brackets, right? Your court similar to the functions, is the same here instead of if condition you can't function and the function there always between the credit markets are either court If you've noticed that pattern already And what is this condition? Well, this condition must evaluate toe through Now there is a two and force in program again You can think of Jesus correct and wrong but they're not really the same. You what? At the beginning you can drink off correct. There are for example you might say give signs just list them morning break point. In this case, if there it's less than 12 or in this case this is correct, So it must be true so What we want to do is if time it's less than morning paper. We want O a lot. Hello. Good morning, Lucas. Next thing what we want to know is if time he says the afternoon break point like this Good rockets inside. You want to other bulls? Don't forget the walls. It's difficult back today. Hello. Good day on this and that. If I It's less than evening break point. What we want to do is let me brackets. Hello. Good evening. Like this. So if we say they found a fish, we get Hello Good morning. Now obviously these are going to be correct. Is also they're going to run is also it can today and also he have with dealing. So how do we solve decision Because of the moment All these three a quick well, we can t statement. But also as I mentioned that we have different types off conditions and this problem we can solve it with the else if time now let me actually up comments on each type. So we have the if fires then give the sales. If that Well, what else gives us It's allows you to change much IPO you statements. Basically, what you can do is you can just like pills, give and change them like this. And these else if I worked lexical just single statement, regardless, if they if all of them are correct, so if it goes to the first time, it's goingto skip. That s defeat. Go for the second plans were to skip. That's and again, this is no. If we're a fresh, we get Hello. Good morning. And if you keep Okay, that's it. We solved our issues. So here you thought it was you. I I And then there is another language is it was like And basically what is happening is that you can give a nails, and just coming back is because you don't get a condition. Basically, you do. I mean, the conditions is here, and it works this way. If the previous if statement fails, we're musical the else statement or what? They were all here, so I would say a what? No, off the ball. So imagine your user works with 36 hour days and it comes it 32 o'clock. Magic realism months or something. If because we get normal, dear ball because none of their both are correct, and we go to the else statement now. Obviously, you don't need to use all three types of them. And there's actually fourth time that I'm going to show you an exhibitor because this is getting quite long. But use that the three main tax if he fails and he s this is how you can use conditions and we're not familiar with the three main lives. In the next lesson, we're going to continue with the four types of conditions. Okay, I hope you enjoy this lesson. I hope you'll, um and they get 10. Conditions part 2: hello and welcome to the second part of JavaScript conditions. And in the biggest video we learned about each time it was if that and the hairstyle. And now we're going to talk about the fourth time, which is called switch statement. And you might ask, Why do we need for thanks? Well, if in those statements work where we if you give 1 to 3 different conditions. But what if you work? If you get 56 or seven, you don't want to change this many conditions, and sometimes you might hear 20 different cases. Are there 20 different conditions and this is, well, this true statement cans candy. So how do you create street statement? Well, we started the cure switch. Then you open markets. This is your expression over here or expression policy. Then you open friendly brackets inside. We need to create our cases. Now is recall if else if else if else these are different cases in switch statement, you just like case. Whatever. It's your case over here, for example, let's create okay, lets one from the beginning. Let's create a viable oh whole fruit. So what is that Provo This on? Let's create This is what I got to be table. So our fruit, it's able in the moment. So let's I are fruit viable and then we need. And then we have different cases, too much our fruit. So in first case is going to be. But so if our fruit is Mama, we'll work to execute this piece of court. And for this example, let's alone the fruit is Bana and then after Amber case in Little Bay like this. And the reason is because you kept many cases and we need to go there when you tell the browser off the cold, when should stop. So let's have the second case in the second. The second K should be. I hope they that Komen's and then a lot the fruit is apple, as they don't forget the break. Because if you don't, if you don't shoot the break, we're going to continue that. And you don't want that. You want your case to be executed and that's it. And then you can change anymore from that lets up the case this day should be bitch If, uh if our proof is Petri, want to alert the fruit is bitch like this. Sen. Michael and our break and you have a default viral. It's not. It's not a mother daughter, but it's good to get it. And it will. You know, basically, if none of the cases of both much, we're going to go to the default and the divorce from the loved no off the ball, for example, you might think, is good talking girls you might even involve functions from You can do many, many different things, and you're going toe. See with practical examples and projects. What? You can do it jealously in the next lessons. But for now, let's focus on the switch statement. So after the default, you don't really need break point because you don't jeffcoat underneath the Jiff. Also, you don't need to worry about, But again, let's not forget. Well, you are Switch. This is the key world inside the brackets. Replace your Vairo. It is our Abu is going too much against each case before it. Much is if there's not much it work to go to the people case. So if we save fresh, actually, let's come in distinct. How? Because it worked on his own. If we refresh, we get the food it's about. Now let's update our I go to the beach. Let's save refresh on the fruited speech and if we may be state, look before fresh would get normal. Deebo. And this is how that smoking is the fourth time, which is street statement. And again, as I mentioned, this is usually used when we have many cases because you might get like this. And it's much more readable than giving a lot off your statements. No, Jake, Desisting and Jake distinct How much justice more needs. It's much more. Yeah, okay, I hope you enjoyed this lesson. We don't vote. I mean, it's a lot of new information, so need dental practice, but don't worry about it. I prepared for your small minute project where I'm going to show you a practical usage of conditions with foreign validations. It's going to be looking for I need you to hold your injured the system and they care 11. Practical Js example Form Validation: hello and welcome. And in this video we're going to put all the knowledge that will go so far from the few previous three years regarding conditions into practice on Want to show you how you can do basic form validation when it becomes available, so do many, many validations. But so far I'm in judges on assure your practical your world residual conditions on how JavaScript can help you make your websites much better for your users. And so so first thing. Let's go ahead and delete the calls from the previous lesson. As always, you can find the source cold with in the resource is off the videos. And also let's change our I thought job script. I mean it. We'll object. Validation this safe refresh. Perfect. Great. Okay, now let's prepare our page by first adding conform and then inside our former want out several fields for imports. Forest input is work to be for user, and there's all this out of you user name. Next youth input. I want the guy to be possible and let's give you just want and then we just at a summit. But input five summit and we find off summit Let's say if I refresh. I mean, this is the most basic form that you might get also lets up. But I have, let's say a user name. I liked Etsy's excellent safe refresh. Okay, this is again the most basic form that you might hear. But we just want to validate the future. Want to check what we use are active And if it's up to our standards, so what? We can go where we can create a function that is going to handle the form So quick challenge for you Create a function with the name kendo form. Go ahead a few minutes. So how did we create a function? Well, we first started the keyword function, then the name and though, yeah, but this open brackets and in the square brackets for our cold typing. Now what we want to do is you want to trigger this handle for more. We want to invoke it when we submit the function. And there is a property in the form on so many open sesame. That's is wonderful. The forms submitted we can learn javascript, and in this case you can go our candle. Yeah, function. And also the brackets. But since I don't want to submit the form twixt of No Page, I want just stop the submitting I want to stop its default behavior and I care toe overkill . Just type after me event and also here in our brackets event. So what this event is in this case, it's a function parliament that just don't worry about it. I have a dedicated lesson on function parameters, and so soldiers I packed a man don't get computer just like my friend event those But then But I default like this rockets and semicolon. So just in a few words for this is going to do is just is going to stop the default behavior off the form and to submit it for example, to where you are. So you are basically wanted. Their step, the submitting Can you want to do stuff? So let's check if everything could talking together by a little thing. So if I click submit, we should get another submit. We get on a perfect that's it. So now we want to start dating. Imagine your user wants to register. So actually live Change the volatile Who just bias? Safer, fresh, perfect. So your user wants to register, but we want to check what user name? Your use of it. Maybe there is a user name that was taken, for example, such a sum in pretty much every website. The admin user name is the result for the administrators. So, for example, use that packs a mean NGX register. But the weapons now what do you want to do is that I want to check what is the name time. But one way that we can do the check this weekend, save the value of the simple in a viable. So let's create a viable that Just call yourself. Let's user name equals. And how can we get the volume out off this symbol? Well, we can select people and they can get the value. Do you remember how well we select elements by going on by attacking documents? No. Get element by you open brackets. It's like worlds. Let's that I use a name and similar to the dog in the X chamber. We just time so far, greatness and the value of the simple truth. This port inside our user name. Let's elected to see that if everything is working correctly alone user name in this safe refresh. Let's like some gibberish register and we get our vigorous or working No what you want this ? We want to check either user if the user packed our men or something else, if he typed something else, we're going to let him in if I really want to stop it. So let's check how to eject. Let's create a new statement. Go thinking here, in your statement, Did you manage? Which was back? Youth open brackets inside. We should base our condition and the curly brackets to place our court So the conditions should be you user name equals and in JavaScript will check for something. If it's equal to thanking girls with double equals because single equals. It's used to assign the right side off the statement of the left side, and that week was check if the aging Sachiko. So if our user name, because I've been, we want to others or let's not let's create bar over here with idea message. Everyone said the message for something. So we said the message or something. If you remember from few previous lessons, we should selected document get element here. Selected by a message. Ocean said, You know, it's Jamil equals toe. Sorry. Just use a Paris take up like this. So let's save any fish. Now. If we that have mean and the register, we should receive this message. Sorry, the user name Statement. Perfect. But if we like something goes, for example, using their best and keep register. Nothing happens because we don't get any logic to Kent up to Kendall success registrations . But okay, this is what offer. The next thing that we want to do is we want to check off the passer. So let's select the password actually underwater over here. Let equals document. Get element by here back in schools. Ask you because it is the age of our temple and violent what we want to lose. You want to check if the castle is 123 is It's wrong country. It misses very simple, but certainly want our users to be secure. And that's why we should make them or tell them that they cannot register with such passwords. So audition truths better possible. So in the message, who should say Sorry. Sorry. Very simple switch. Jules, like this. So heartless preparation. You thought our possible want toe and we click register sort of a very simple possible truth You are. And this is for a drastic and no validation sick and many, many validations, for example, the pending how complicated your form is. Obviously you might check for age. If the user it's over 18 for example, you might not allow minor senior outside. You might check for the length of the password. You might take a look many, many things. For example, my objective on the date that something. Now there is a default validation that just show you you can tie required. I would just require fuel is going to basically justice html five validation If we're fresh , we cannot submit the form when we click register because your brother was say, please, few out just here. So this is very practical example of how you can validate the form. You can do many, many things. And now for your challenges, I want you what anymore fuels such as city, country and age. And I want you to vote today if your users are over 18. Okay, I hope you enjoy this practical example and take care 12. For Loop: hello and welcome. And this lesson You're going toe about loops. And let's start by removing the court from the biggest lesson that we learn how we can put conditions in to use with practical example. Inform validation. Also, let's go ahead and update our NATO JavaScript loops now similar to the conditions that safe and fresh perfect are similar to the conditions there. Several type of loops and we use look toe iterating over set off elements and why you would want to do that. Well, let me to show your first example. Let's create a marry with five elements. Go ahead and create a marry with five elements. The element should be users, so let's go get in time. Let use us ukuleles. Remember how how would created a raise by typing square brackets and inside weaken Taipower bounce off. The first value could be user one. This could be the user names, but we don't need toe. Tinkoff. Different user industries. Avalon user, too. Use a three use a four and user five user. Five. Legless. Now, if you want to display each of these, what we can do it. I calls up the work again. Look Oh, users. I see. Let's open our phones. Oh, so it can sit a fresh and you can see our users. And if you want to look each of these users, we can do like this. Bones, look, users square brackets, please. The position off the use of that we want to just pay. For example, these are in position zero, the user in position one and the user on position. And if we stay fresh, we get user one user to user three. Perfect. This work so far. But what are you going to do if you want to go over each of the users and you give 2000 users, for example, I'm going to write everywhere, use their users Square brackets, one user square brackets to two users, square brackets 2000. And what you're going to defecate 100,000 users. Well, this is Workgroups. Help us and humbly create. Look, let me show the first type. Will look that we're going to learn is going to be the four Look on going to come in South America, separated different kinds and for look okay with the cure for opening brackets like this inside, you need to specify several kings. The first thing that respects If I it's the counter and we're going to say Let I equals zero and then they're gonna goes it with Chemical. So what, this I was going to do this so vulnerable that is going to keep track of the count. 12345 and so on. They want to say that we should eat a rate as long Ghous I It's less than or equals who the length of the user. So this means that's type users dot lend well, the one apples, they have several properties, and one of them is this length property. And in case off, our race is going to return the number of elements that this a radius so as you can see here in the car so we can five elements. So what is going to keep minus that we're going to start start from zero. As you can see, I worked with zero, and each iteration is work to increment by one and actually the third element that we need to specify that the property should be I plus plus what dismisses we're going toe. This is the same dingus I equals. I bless one like this. This is the same. Basically, what we're saying is, all right in just a zero equals zero plus one in the next iteration is going to be one plus one plus one. And so and the short Curtis for this is I plus plus. Then we need the curly brackets like this. And there's remember between the curly brackets, right, Our co So what is going to happen again? Let's go over it for the last time. And then we're going to display everything where I for their creative arrival that is goingto be holding the count. You can name it found you can name it anything that you wish, but usually by convention, it's I and then we're going to go. So the second Baraboo, it's how long we're going to reiterate and we want to eat Irureta's longest. I It's less than the users land or the number of elements or values in psych users. And then, with a sigh, little goingto increment, I. So how do we access our what I'm most inside this look? Well, what you can do is we can say call So the law users and inside our square brackets weaken place I. So what is going to care about here is each time this sport, disputes of court is going to be executed over and over and over again. And each time I was going to be different number. So it's going to be 012345 on Do. It's less than the user slammed, and why this is important is because the land of the users is five, but the user five, its own position forces We started from zero, as you can see on position for, is the user five, even though, for it's actually the fifth position, let me not confuse anymore. Let's save let's refresh and we see underneath here this undefined follow and this here pants when we try to access a position where we don't get vomit, and the reason is because of this equal sign, because when I it's five, we know that we have five violence, so it's equal to the length off I. But we don't get anything composition. I saw enough that fixes the should just remove the equal sign, and if we save it fresh, Okay, perfect. Well, now you can list and access you Trudy's age of our use of for each of our virus in this world's, regardless of the number of users that you have. So you might hear five, but you might also here. Then you might also get 2080 for a fresh. This is how you get the rate over a Marais with for low and for your challenge. What they want you to do is I want you to create a money with your favorite movies, and you should give me more five movies. So at five movies or more perform anymore. And I wanted to create four hole that you weren't look each of the movies in the console, and in the next lesson, we're going to go for the next or the other types of loves. Okay, I hope you enjoyed it and 13. For Each Loop: hello and welcome. And the previous lesson. We talked about four loops, and now we're going to talk about for each low and with differential. This is basically the simpler version off the for low, and they basically the end result is the same. Just the four hope it's more advanced. You can go a bit more complicated. He's and with foraged up, you just reiterate over set off elements, and you're good to go in Rio Tokyo nine out of 10 times going to music for each load it we're going to talk about now. There some cases where you might want to use for low, but they're a bit more advanced. And there, for example, when you might want to access the current element. The user and also you want to access the previous element for the next element at the same time. But these are more advanced cases where you're not going toe in count of them in the next few months, so don't wanna bother. Now, let me show you American create for issue, and it's very, very easy. So first of type, you're a or your set off elements. If you want to beat eight over, then if I don't, and then you could type forage like this and you can see our editor is suggesting it so that for regional press it they're usually open brackets. And inside these brackets were going toe type of it, of course. And what? They're going to attack this function? Remember how we created functions? And then we should have the name, but not in this case. So there is a *** in JavaScript coat on money, most functions and what we need to that you just the markets and then the curly brackets so inside our brackets would want to. That is the element that we're going to be operating. So if we're going to be iterating over users over here, you should user, if you're iterating over movies inside here, should be a movie. So what you want to lose? You want to look on. So the look years and this is going to be our courage is on the same US users square brackets I and he said, Just use a loose ecommerce. Simpler. This is it is just you're a for each. You create anonymous function is it's called, basically function without name. It's anonymous function, and you can use it in such examples. You cannot create anonymous function here function and multiplying name. And the reason is because you cannot give walk it industry, you cannot. But this is especially designed to work in such ways, so don't worry about it. Actually, over here we forgot the semi Colon s. So let me just comment out. These guns are Look, this is our for Rachel, who is group. Let's save any for the freshman should seize. You'll see the same. There is no don't work here. Actually, I'm going to remove the extra fields, but you don't need that many. But the gang it works the same way, any further fresh. We get used around 25 This is how much simpler this is. It's very, very easy to use. Faster. Usually does the job. As I mentioned in very in more complex cases, you. My country's the formal book. Don't worry about enough. Okay, this is your for initial, and now it's time for the challenge. I want you to create a memory with your favorite video guests if you can. If you don't you creating a day with your favorite songs maybe 10 songs. And then I wanted to create for each look. And I wanted to display them in the console. Each of the songs. Okay. I hope you enjoyed your short listen and take care. 14. While & Do While Loops: Hello and welcome in the previous two lessons were learnt about the formal and the for each loop. And with these we use them so we can eat it over set off elements and this less and you're going to learn about the while and do wire loops. Well, the wild loops. It ain't over condition rather than set off elements ordinary. Now let's go are here they move the court from the previous lesson, or let's anymore on our title. OK, stew an element JavaScript looks. So let's say fresh. So is information. With the wild looks, we trade over condition how we create wild. Well, you just like while y o open markets. And here you have your condition, condition like this, then a cave goodly brackets and that's it. This is your wild. So now the think is that the wild loops, they're so very important, crucial things that you need to remember. Well, you need to find a way to make your condition. Force is I mention the conditions work with through and force. So this condition is going to work as long as it's true, and we need to find a way to make it force in order to spot. And let me just give you a practical example how you can use wiles. We might be eight. A viable is eight. Count equals zero. What we can do is that we want toe or it right while how this pleasant them. We might start looking now, is he? But look how well this is going toe. But it's going to break our browser and also your users browsers, and this is disaster. And it's cold, infinite look. And the reason is because count it's less than that. So our will stop but will never end. And the reason is because we never implement count or changes value. So it's always going to be less than that. This is very, very important thing. You don't want infinite loose because they're just going to crash your browser, and it's not very good user experience. So what do you do? Care for work here it If you remember from the full wolves, either you can say count plus plus all I would say count equals count, plus what, for example, and she's going to implement them with one for each iteration in the store, basically the same now legislative. The short version like this. And if we stop if we start now, our look worships you from zero that actually from 0 to 9 there goes our condition. It's the less than 10. So let's refresh Forget zero and our look stops now is I mentioned? If you don't give this condition that is going to turn our condition balls, we're about him a bedtime now, obviously you can create. For example, this could be 100 and we're going to receive 400 looks careless. They're fresh And get the pendant loss. You might be 11 500 lives short. This is fresh 100 musical fast. JavaScript is very fast. We'll get 500 lost someone here. So this is how can a while also, you can do many things with them. For example, you might want to work, or you might want to do some logic while something else is separately. But if this is a conditional loop and the other side that I was going to show that I am going to show you is that do I? Well, which is the difference between do I? Oh, well, the difference is that if our counted. The moment is let's go toe normal numbers, for example then And if our counties then this is not going to run because count, it's no place, it's equal to 10. So this is forced. Anything going toe around me for a fresh. We have nothing here because this condition fails and we do. I owe what is going to happen is your logic over on once, and then the condition will be checked. And how quickly do wiles basically what I do, you open your curly brackets and over here you type while and here it is your condition. For example, Do let's just copied instincts one look around as long as countless less than that. But also don't forget, because even in the wild groups with stupid this phenomenon, which is called Infant Loop. So let's our incriminating in here scrounge most loss. So this is going to be our breaks. They're very, very important that you need to Kevin exit all you need to make your condition fail. Otherwise promise. Anyway, let me actually current it is out so we can see what is going to happen Now let's and fresh as we get them Now we can make this 20 and you're going to be the same year. That's a fresh 20. Basically, our boat executes wants and then it checks the condition. And if it's zero, obviously we're going to get we're about to get then because our first book with still incriminating. So let me come in the South and if we're a fresh, we get 0.9. Basically, it was the same way, except he just throws the logic once and then it checks for the condition. Now the do, while looks to be honest in my professional career, I don't really remember a case that I had to use them. I either using the food issue very rarely. The four move on sometimes the wild, but again it's Yeah, just the footage in most cases will do everything in it. And this is how you can use while and do our loops, as well as the loss of the previous lesson. I hope you enjoyed his video and take care 15. Booleans: hello and welcome. And in today's video, you're going to let him about brilliance and let's go. Okay, remove the court from the biggest lesson. And also let's update our vital to John School Bull s notice. So let's save refresh. Perfect. So what are these? Bully us. Well, bully us our data tie that cable to possible virus through or force. I've mentioned bullets in previous lessons. And what they think I told you that they work us. Correct. They're wrong. Yes, no, on off. And this kind of things. Basically, since we started using conditions, we've been using bullets. Basically, the bullion violent expression is the basis of for comparisons, conditions. So let me give you a very fast example. Now would bullets are well, they're the result of expression. So if we do console the law, ever get given expression, for example, then is bigger than my. And what this is going to look in our causo is either two or four. Basically, just expression is work to be operated or executed. And the result it's bullying. Yes, a fresh who get through now. If we turn it around, then it's less than nine. I should let me fix it. It's working. If I safe and fresh, we get force and there isn't is because this is no through. So this works the same way. If we have a statement on this and you say, then it's bigger than my This is our condition. But this condition works on the basis off brilliance. Basically, if the conditions true it's going to be executed, Give the condition it's false, is not going to be executed. And their several things that you need to keep in my boot yous are the result. Off comparisons is low, so what we can do is, for example, we can hear what I lost. But it's let day equals who gets a among that. And then we can go home. Criticism you've they itwas with two equal size more there. So what? This will go well, just check if our valuable day it was just text on their listing. So if we save a fresh, we get through or force. If it's not, for example, our but I won't be Thursday. Let's and let's save refresh and we get force now so far, so we'll also the same way, Paul says. I told you earlier with greater than or less than you need to keep in mind everything with viral. It's true. So how it can change the sting stuff. We can use the function bullet let you destroy. Thank you can. Let's remove this. Let's move now What we're going to do is we're gonna have using the function boehlje So we're just bullion. Thus is basically that there's the bullion value of anything. So what we can do is shaking created for our whole. Let's say a equals if we want to see the Julian. Volume is why I hope. A If we save on fresh, we get through. And the reason is because everything that his value it's true. As I mentioned earlier, it just could be string, for example String, let's say and fresh, we'll get through it again. This could be then my five Any for fresh. This is throwing a now you need to know that everything without viol, it's force. So actually, let me on my comments here and also people. Howard, I don't under scrape no one's now if we have our Haram bow and we don't set value like let a equals Now we deal initialize someone, and if we safe and fresh, we get force everything without while its force. Also, even if you initialize look, what we can do is, for example, if a egos undefined and what undefined is, it's basically like it has no value. Basically, you need initialized it, but you did not the same time. So it's if the violence missing, let's say any further fresh would get forces are now. There is one thing that you need toe. Keep in mind that if you said a equals zero, it's also going to return force. And there is. It is because if you first off, how computers. So they work with once with one and zero so one people screw as you equals force. Some little just commandeers out, and if we save and a fresh twist, you get force. And the reason is because zero reference force and one returns, and also you need to keep in mind that minus zero also return force. It's a fresh we get force so you might encounter it somewhere, and you might wonder, what's scary but minus one is going to return. So these things we need to keep in mind, but we need to know that all comparisons for examples three equals two story returns, a 1,000,000,000 video and also you can check about your volume was, for example, you might give, let's say of our IBO off use A simple let's let me give you a very fast example. Let's create an import in books by next. Let's give it a nadie off, okay? And then what we want to do is you want toe cable button? Yeah. Then we need a button that will work toe trigger out text. So let's start fresh. Okay? Now can never because of the AIDS. And if I now I'm just coming up with this example. So that's why it's not very structure. But anyway, what we're going to do is remember to create a function J evil. This is one of the name over here. What? I want to do something percent off, please. So when you get the book of who can trigger jail in quote, we should be already familiar with javascript functions and overhearing the function. What we want to do is you want to create a viable that is goingto called the text in sight using their. So what? We can see it. Let's use a man equals document, get elements by here. And then what we want to do to want to select users. And after selecting you do want to say it does. So our user name is going to vote our values. But I also want to look it so we can see how so will you, uh, use the man? Perfect. So what is shaping here? Well, basically what we're going to do this Once we click the button, we're going toe a little. If the user at something called the User did not how to complete off. So if I save, I care if I click now, the bottom we get force. But if I start clapping something we get through. And what you can do it, you can do some check. For example, If use in here, it means that your user typed something. You can do some Go over here. Okay, so this is a fast overview of how billions work and how you can use them. You will be using them all the time because every statement, every comparison so it's using billions. But it's good to know how they work. Okay, I hope you enjoy. Just listen and take care 16. Math: hello and welcome in this video, I'm going to show you some simple I medics that you can do it. JavaScript and also some Bilgin month functionalities that you can use to calculate different X tower. Let's go ahead and delete the call from the previous lesson when these and also let's update the title JavaScript. Now, don't worry, we're not going to do anything overly complicated. So on just going to demonstrate how you can do simple populations. Well, let's must create one Aibos X and Y let X equal. Listen five. I equals So what you can do this weekend. Let's create a result by a bullet result, which equals toe. There we can do maybe mortification, fix multiplayer fight what I'm sure x More declined by what? And then we want this warm look that is a but this Let's save a revelation is sick, as you could imagine is equals 50. What else you can do is could do division. Let's say Refresh your 0.5. You could do also 15. You could this obstruction all your normal populations. Also, there some duty in functions that you could do it. Jonah split searches surrounding numbers and let me give you a very fast example. What you could do it with that much look around and then brackets and you could actually number. For example. Number could be four points are, and what this is going to look is the JavaScript is going around it with the lower number. If your number it's slower than 0.5 is going to go lower, and if it's 0.5 or over, it's going to ground it to the upper or bigger number. So we'll do. I mean by that. If our number is 4.5 and if safe and finish will get five, if it's 4.6 is going to go five again. And if it's point for four, it's going to go. Lord, that's a fresh for so is a mission. Let me just actually care. Coming here. Not know this 4.5 goes five on. Let me just carpets for 4.4 goes toe for or the lower number. You also care Building square root function you could use is you and functioning. For example, you might want the square root of 64 you feel safe and fresh. We'll get eight or you might want to square number. Mine can't save refresh. Besides, this world you get from a seal and math floor will do. I mean by that. For example, if we're that much, you you might give 9.1 and this is going to go toe because it goes to the card number. It could be 9.0 Want it's still going to go toe and then you give my floor, which goes to the lower number. So my in just cases, it's nine point something and you can give 9.99999 and it's you're going to go toe just my . They're also kind of cool functionalities. Such is my Max, for example. And what does that says? You can supply Honore or set off such as, For example, I 678 You can Ridge 2000 let's say, and it's going to return the highest number, all the maximum value, and it was, say and fresh. We get 2000 and also just work sweet for the smallest number, for example, market minus one over here, and you could save my men instead of my Macs so me like this and from your set off numbers . So this could be on a with numbers. Recall the fresh and you'll see it mines. And then there is the final you get from tonight that I'm going to show you. It's much around the Let me fish. You could just say I like this save, refresh and get a number And this handle number is between zero and one. As you can see, you get a lot off digits. They see mortgage. It's not your cook that is going to be doctor much, doctor, but it's going to be semi ramble because there is no such Think it's completely random in programming or computer size. But don't worry, it's semi around, Um, when you get a lot of digits behind. So the genesis of getting twice the same in over pretty pretty slim. Remember for my handles that you get it from zero on basically everything in between for my mom. OK, but if I got so just these have some basic corporations and mathematics that you can do in Dallas. Good. I hope there will be useful. I hope you enjoy your system and they care 17. Function Parameters: hello and welcome. And this lesson. You're going to learn how you can up function parameters to your own function and how you confuse that. So let's first begin by moving the court from frigates Lesson and also dating the title toe General script function are safe. Refresh. Okay, so what? The function parameters? Well, we've been using them since we started writing JavaScript from the first lesson. I t. But basically permit with parameters we can pass follows inside functions and they can do some stuff with these parts. And what women with that, if you remember our very first function alert. So inside the a lot of people this message Well, this message is exactly parameter. This is how it's called. So what? We can do it. You can just type from text and this is our parameter. If we're fresh, we get that one takes. If we don't back takes, for example, you can past number. Let's freshen receipt one. Well, we can do or we can. We cannot such parameters to our to our own function. So let's go ahead and create a function with the name off the heat. Let's open curly brackets. Okay. Dysfunction won't pass over one of you. Several parameters so long to give Name Coleman CQ coma country. Okay, Not come after country soldiers name seeking country. So what are these World Ocean parentis and basically of arrivals? Return now, little miss A special function Actual functions that you can do something. For example, you can tell that viral out and I'm going to show you how this works exactly. But what we can do is say we can open wasn't say hi My name is less menu less Let's open again wounds in fact Full stop then I am from plus city plus woes coma and then plus punter And we finished with semi call So what is happening here? Now this greet me We're going toe Love this text Now let's I look political new life so I can see everything that is going on So now we have toe evoke our function in orderto run Because you for fresh we actually save But anyway I mean the result is the same. Basically we don't know anything of moment We're not invoking coward function and now we want to invoke it. Who could say greet me against that? I think I have photos filled. Our first bottle should be the name. So we should say, for example, my name Gunter. You could type your name inside coma the next. I should be over. And the next time should be our country with cheese ball. Gary. So if we save a fresh Would you see here? Let's fresh. Hi, My name is gone through a forceful from Kovar bouquet. Perfect. So this is how you can use function parameters? Basically, you could you could us violence inside your function. And also you don't need toe past the world. I can. I guess you might keep them invaluable. So let's create let equals name. You could use yours. Your name? Your city your pound for this example, let city equals over on let country equals boot. Gillian. So we could a place action our parameters over here with the bad apples that you just created Name city, and this is going to work with, regardless of what values will pass inside our function. So again, let me just tell you that this terror functionality which is doing is basically it's a returning toe. The corns low the responsible, The result off our actions that Redick inside. So inside the functions, we could do anything. And then you might want to return something to other functionality so they can do something else. I mean, don't You might get confused a moment. I don't think I'm explaining it in the 100% best way, but they will create many, many examples for you so you can understand everything. I mean, in the beginning, I get very big trouble thinking, Cough. Why should I use this return function? But don't worry. With practice, everything will be clear. So if we're fresh now, it's the same thing. And you find a place. For example, the name Gopal Money, for example, we saved and fresh and name changes. If the secret change it may be, we live if we save on a fresh the city change toe clothing. And this is how we can use function parameters. You might up his many as you like. You might also want to go. Maybe populations, for example, can say function. Let's get you on out. Who? Momus. This is the name of our function. And we might get eggs. My fear. Why? And then we want Oh, turn X plus. Why? Oh, it's very simple function, but just going to show you how it works. So let's move this. And it's like, well, numbers and we might want to have the first parameter extra pretend and why I will be 50. And if we say fresh, we get 60 because John caving ex wife and I think them together. So this is how guys you can use parameters if you remember in one of the previous lessons were actually hit a parameter called event, where we stop the submission of the form and a lot off functionality. Since I just get another programming languages, they're using function parameters in order to pass, date around and do stuff with it. Okay, I hope this explanation is clear and now it's time for your challenge. What they want you to do is to create a function that multiplies five numbers. So you would hear for function that goes like my one rule No. Three and then I want you to return the result. Someone modified by them toe multiplied by no. And so with five numbers, at least. And then I want you to love the result in your console similar to what we get with the addition off the numbers. Okay. I hope this lesson was here. Full. I hope you enjoyed it and again. 18. Mini Project Multiple forms Set up: hello and welcome. And today we will begin with our first JavaScript project. And if this screen looks familiar, you're right. This is our CSS project that we kept the style just longing page. And now with Joust clip, we're going to build on top of it. And what are going to revealing this? Over here we have our signing form logging form. But if our user fictional signed up, we're going toe dynamically Load sign up for instead of loading a brand your whole new page . And if they consigned in, we're going to load again. The signing for my new taking for possible we're going below. What is it for? And this is critical because each of these, but on works and loads different forms. So let me show you what I've prepared over here. So on my deck. So I have on Index Page, which is basically my cirrhosis project and also have the customs here says that I have to load over here with the stylings on that demon. So you should get the same thing coming. If you came on, delete that your project, your CSS project, you can use it. Or if you did delete it. You can download the resources for just one from the resources off this video. Okay, so what do we take here? Well, how did you get for signing for the full? I save it over here. Although the index page. So now what we need to do is we need to create our sign up for So what we're going to do first is actually we have two separate each different for me in its own def. So let's go ahead and create a gift. And let's give them a duty. Just do for Logan Dash for And it is our form inside this def. Like this on. Now let's get them. You give which is going to be with you register for And there is. It is because you want Oh, yet we want toe keep each for in its separate Jeff and the goes we're not going to be using brand new styling scientifically. Just cope it our looking for him and place it inside our register for and no. So it's very good practice. If you remember what comments So we can know where wanting styles and what wanting ends. So let's go, kid. In there looking for and just don't throw slash in orderto commented. And then over here list I register for and against pot roast large to other common of it. Now, if we actually save this, think and fresh, we should seek to forms. Now our standing It's a big broken because if you have the two forms one under need each other. So how we're going to resolve it Basically want to show, respond formative time Go ahead into the CSS file in Create a Class, for example Hagen. And what just last year in his work to do is we're going to modify the display proper Kito man when applied this clasp on element, you want this element to be kidding. So let's go get an A plus human, and we should apply this to the logging for him because of the moment we want to wait. It just the registration form that's fresh perfect in our styling. Start back to No. So what do we need to do now is first thing we want to modify this stuff. It just hp so it could be correct. And also the sign up. Yeah, so it should be signed up instead of signing sign up like this. This is fresh. Perfect there. Would we have? We have an extra fuel for repeat password. So what we want to do is you want to copy the password field. Let's face it again and change the place for the book Beat bustle. And the idea should be also Oh, the beads. That's mostly yes, save finish actually moved this song. We should refresh just pitch before refreshing. And now our family is broken off the repeat password. Still, because we cannot style it. So what we need to do is we need to go over here at coma, beat that password any free, safe and finish what we do it fix. So the next thing that we want to do is we want to change the agree to terms and conditions . First, we should remove our focal possible button, and then we should change the label toe what it was. I agree toe terms and on dishes like this and was safe, fresh. I think it's Yeah, it's good. And also what we want to change is the text of our boat. And so it should not be Logan Mitchell villages. So that's that. I'm just that save a fresh they just also you can see that our form it's a bit short now, So we should go to the custom CSS and increase the height. Here it's take undertaking pictures. Meg Lucien who for 20 pixels? Let's see. Safe refresh for granted Works OK, so shoot into something, girls Actually, yes. You should change the sticks. I wouldn't be here on account So a police this would already have an account and you should be sighing. You always hear Let's go to our page. Refresh already Humacao signing And then we have to change. Something goes here so far we're done with the registration form and I want to go ahead and create the residual pass work for So what should we do next is actually that it is it that is that form We should create a common They should have a give and the sign alleged witches Defoe Or is it thus, for and again we should face the registration for for example and we're going to modify it in orderto achieve this effect. So that changed to present know each people example. Then you should know somebody find a tech straightaway in our age. Deter. What is it? Your password. Visit your parceled. And now we should save on a fish on. Okay, Our standing is broken again. Actually, you know what? Let's go to the custom. CSS and what we want to do what you want, Toe, Just remove this high property and Wiltrud Japanese. That's a fresh. Okay, Perfect. Our contain a gift. It's actually scaling automatically with the continuous side. Anyway, next thing is not we want to set the class off hidden who are registered homeless. Let's go get an underclass hidden like this and you could save and fresh. We're with our Is that your passport form? So we'll do. We need here. We need to leave just a single input. So go ahead and remove the fossil fuels imports and also what we want to do to want to replace the place holder of this input. You want to write use on them or email because you can residual parcel by boat and you could save go fresh. Okay. And actually, we just give What did I do? Oh, I closed my index paper. My index space Let me voted again. No, What we need to do is that we want to remove this checkbooks so we should remove the checkbooks in the level as well. It's safe. Fresh, okay, want updated text? Oh, is it or is it perfect? And then we also won just about to Ling's signing and sign up. So let's remove folder and let just that a Lincoln who should say signed in and then we won't about another limb. That should say, Son, is it like this sign in Sign up. And we also want because if we're fresh, these are staying next to each other. What we want is that he should be post the sign of butter should be floating toe the site. And I think we how did the class The truth, said the floating to the right. This is for Is that possible? Let's other class. Let's other plus and you're going to spend it and the glass should be float. Dash right, and then let's go in actually styled of class and there is a for that is actually because it's easier to me than your styling. Sit there on the same place, so we should say that don't flow, Nash right. Should have a property flowed, right. If we come to our webpage were fresh. Okay, we have our bottles. So, so far, our CS is an aberration. Forms on radio and in the next lesson on work to continue it. The javascript functionality of stopping the farms. Okay, I hope you enjoyed it so far, and they get 19. Mini Project Multiple forms JS: hello and welcome toe partof our project where we're going to create a functionality that we can toggle between, which performs in the previous lesson. We created our reforms over here. Actually, our two extra forms and in this isn't going to create the jobs constitutionality that when we click a button, we show the correct for So without wasting any time, let's think what we have to do and how we can do it. So basically, I'm not sure what we want to do is when you click a button, we want to show the correct form and also want to fight. Yeah, there, too, because they want to get reforms. So if we plead the forgot possible, we want to show that is that form and also kind of Logan. And did you start forms? So how can we do that? Well, there are several different options, but first hoping you to do it you want to mark each bottom what for each trigger, and so we have to separate them somehow. The sign that Britain should work for sign up for render visit Britain should work for. Is that for? So what does he want toe from the from the first form and label the correct bottles. So over here we have that we get the forgot password bottom, which is what is Well, look here is is it possible this is the agent? Let's go ahead and create a class toe focal possible button. And let's just give it a class of let's say, butter and that everybody that hears this class, we're going to do some large equity. And then what? I want to get someone for the not tribute which just after good could be for equals won't and the fourth should be or and the form could be What is that? So what's happening here is that we're going to select every bottom and then we're to distinguish them based on the form Not too good. So just But I guess a form. Where is it? Let me just copy before class and form so we can paste it into the next month, which is the sign up and the sign it. What is going to do? It is going to be again Cross button, buddy. True. Trigger the register for actually let me the quick names. What is that for? Then we have. They're just a form, just a form perfect. Now let's go down and go toe. They register. Form itself. Let's larger here. So against huge buttons do here where we can't just a single button, which is the signing. So what's happening is that it's still going to have a classroom, but them, but also our form, the formatted. It should be Logan that for Okay, let's go to the third form. Which is that is that one that's opening. And there we can just use two buttons underneath the first planets, not again looking for. And the 2nd 1 is the register for it's place them and in just the form. Okay, Actually, I think I place this district together this year. The class off lo, That's I If I'm not mistaken, um, so let me fresh. But everything is talking. Okay, so the next thing that we're going to do you are going to stand writing our jealous clippers. So for that, let's go on there, need our body tax and open script packs this and in between the script tax, we're going to that. I think our goal. So let's does that. Everything is working by just giving a single 11th any for fresh. We get on a lot something. Okay, So what we should do first? Well, first we should tell it our action. But that's all the ones that we marked this or we marked with the class of butter. So how can we do that? Well, we could go with documents, don't get element by clasping him, get elements by class name and the senators. Honore off elements. Any side quote, we should just like the class that we want to get in in this case, butter. And what we're going to get from this statement is all elements of here. Plus, But now we also want to say this elements excitable also can say, Let bus with this equals on which and we can assign oh elements to it is Meribel And let check that everything is working by logging ponza. Look, look. But so I want to see the bottles. Let's also lunch hour also, by pressing, gets 12 and you further fresh. We'll get HTML collection with five brothers. So after this five. But that's what we want to do is we want to go over each button they want toe event listener. Now we've been using event listener for a while, but the event listener that we've been using well, just a sanctuary, for example, were saying directly in the element on Quick what We're going to do the same thing. But instead of attaching it to the element over here, we're going to do it in JavaScript. Okay, so let's begin by creating a formal. So let's I for on brackets on the first think Waas let I equals zero. So just us our counting by a bow. Then we want to look as long as I It's less than buttons length. So we're going to go as long as I It's less than the amount of elements inside but us. Then we should implement. I own each it is. So let's talk tomorrow, curly brackets. And then we should back booked us square brackets. All right, then, if you want to set the tone kick event, you should go on equals and then you should not anonymous function when this brackets and barely facets in a little Taipower court. And now because we want to check that everything should be working correctly, let just after Melo, what should happen now is when you say very fresh is that when they click our sanding or any of the buttons over here, we should get another. Let's that the page days. Okay, I would have loved it's working. So this is the first. And now what they want to do this? I want to a lot of actually this identifies that we set the form over here off each bottom because they're going to be different than I want to make sure that everything is working correctly. So how can you do that? Well, could that brought us square brackets? I those get after beauty. Any side brackets, Richard, we should just by the name of that tribute in this case and also in court and in just cases for So if we please link, we should get alerted the correct for our tribute on the text that we should trigger. That's good, but it just in from perfecting if we played the signer longing for great everything so far it's working for her. And now what we should do is create a function which is going to be can pogo forms. So let's go. Okay, great function. I don't know forms, but this So we should other parameter over here, which would be for Nick Clegg s and then also should invoke our function on each but frankly, like, oh, go forms. And we should pass exactly just thing that we allowed that the name off the form that this but I should let me just close it with semi column. And let's, uh, let's check that everything is working by alerting will gain the form there, but this time in sight, our own function. So if I say and fresh, we should again get registered for and Logan for other. But those own houses were starting to write a bit more job script. I won't launch my also in case you get any errors, because otherwise it would be difficult toe the book perfect. So the next thing that we need to do, we should figure out which former sure don't know in which forms we should hide, and we could do so by creating a switch statement. But first, let's grade. The first is going to be Let's so equals interesting later over one beside which for we should show and then let who height it was on a So this is how you initializing today without putting bottles at the beginning. So what is happening here is basically we're going to have a switch statement and depending on each case, we're going toe up show which for Marshall trope in which forms Because we have to. We should fight, and that's why I kept. And that's why we care will not be over here. So let's go ahead and create our switch. Switch off it and then inside the brackets who should out our form, name and then for name. And then you should not several cases and they basically depending controlled the form a miss. We're going to assign different values to these for arrivals. So our first case just go out to be that is it for, like this. And if it says that for what they're going to go is let's go get in love. Actually, is it like this? And also don't forget that we need a break now. Let me just stop you just him more times and that. So first he says that then it's pretty, just er and then it's Bologan form. And also let's update the left And the reason for diesel s is because we want to check that everything gets working together in small steps because other way we'll cover we would have a problem. Now I'm not going to out of G four case because we don't need it. In this case. I mean, we know the forms and we're just using the forms. Now. If you're working with, use our values, our user inputs, you might urinated. Want to 74 case. But at the moment, we're going to look. So what you want to do is a lot. So let's save fish. Any foot brick sign up. We'll get religious that any foot kicks in. You should get just alone. Perfect. So everything so far it's working. Common event. The Simon's our function, our switch case. So let's go with the first case. Let's remove. I wanna look so for our first case. So it's going to be our form name, and actually this is the case everywhere. But now to show is going to be equal to the form, name and the height. So if you want to push values inside on either to see initialized like this, you could I hide no bush. As you can see, their tormentors actually, with the bush pushes some varmints and that and both removes of our That's how they were so push. And that should supply toe violence. The first, is that it just for and then coma looking for like this? Because if we can talk, if we have to show that is that for usual kind the register form and a longing for perfect . So now let's go with the next is which is just that form. And actually, as I'm saying, we're going to keep duplication. So, actually, just to show we can I signed it that I could live for me and then we don't need to assign it anymore, so I let him just more so Basically the only thing that we need to update actually here is too high. So the height, no. Or and here what we need to push is that Is that for, and also Logan for because in this case, we're going to show the registration for and in our case, what we need to do it. You need to hide. They're just for I want What is it for? What is it for over. So now we just logic what we can't this in just about. I almost don't know what we should hide and what we should show. Perfect. And now let's create our logic in order to show and hide reforms. Basically, we're going to create a four loop again for this It let I equals zero. We want Lupas longest ice less than the two high blend and then want to increment. I'd buy one. Actually, it's small. And now what you want to do? What you want to select the forms, the Jews, the around the forms like this one. I just if and to want to assign the kid in class because one okay. And so how can do that? Will document get element by did and our descent Actually. Jeez took I were already rolled their this inside. Okay, so I want to get the parent element to hide square square brackets I and then off this element you want to say though classes class name equals, you know, and then what is going to Japanese? So our look is going to go through both fight elements and apply the plus hidden and this outside or after our look, we want to select our so limit but our kids. So anyone put blinders class, plus a yes name equals show. So now we're going to go hitting create a place off. Let's underclass of show Don't so and you should say the display property toe look like this. So let's see what's going to happen. Actually, now our functionality should work it with safe and a fresh Let's click sign up. We get our cider form. We could give signing. We'll get out alone, you form sign up, Sign in for good. Possible registration for Actually, our logic is working. Is it true? So now this is a practical example of how you can use to Togo different forms. Also combining conditions were combining loops or combining events. So this is a lot of JavaScript logic, and it's working. I hope you get for a while creating this project and the next project, actually, because I prepare for a big projects for regional school section for the Time bank, and as the time goes on, I'm going to be adding mute. So you said, stick around and check more often in the next projects. We're going to build on top of this logic. So we're going to write a lot more jobs. Strict. OK, I hope you enjoy this project has enjoyed making it and they can. 20. Tracking and Storing User Actions part 1: hello and welcome. And today we're going to be working on our second JavaScript origin. But this project, we're not only going toe practice everything that we live in so far in the JavaScript section. But you are also going to live in quite a few new things, such as how we can start data in our browser. So let me walk you through the project. As I mentioned, we're going to build in our previous Jospin project where we can load multiple forms in a single webpage. But now what they decided to do is that we can love each action. Basically, when we blow the form book in Look when this happened and there's against you over here, we have a now did section and also table with a deform action in daytime. So when they click our form, what we have here is data from where display it happened and basically we can spore Or we can track how your user interacts with your webpage. If you click sign in, we get second row. And not only that, but when we're afraid of the beach. This data is no lost because we saved it in our browser let the wrong one who stopped learning back and languages such a speech Big and my spare. We're going to learn how it can start this information in data based on your server, but for the time being, you can store information in your users. When browser, you can store data such as there, but I was in captivity. How they're directing. We got a website, and based on that, you can show very targeted and specific content that it's tailored for your users. And it's going to be really cool. So let's go ahead. Let me just show you what we give. We're here. Basically, I'm going to keep this page for reference, and then I've loaded my previous project. If you for some reason don't get the code, you can download the source code from the resources of this lesson. And over here on my legs, the back of the index custom, CSS and the image for the bigger. So let's begin the first thing that you want to do it. You want to create this table over here, so let me screw up. Just underneath That is a form I want to create a child as you can see just what is on the line. Then let's go ahead and create age three weeks. I'll just in it That's safe at a foolishness. You left everything, gets working or did what effect and then want to want to do to create this table. So that's like a bow inside table. We should be here and then you want what? Some G H backs. Basically the name for the corns. So the bullets, the first age is going to be on my idea the a tree, for we will for must launch. They give the option. At the moment, we have only clicks for actions, but you might also want to track covering. You might want to track pick sunder forms that they're submitted. And so So That's right. I've included it and then we want toe throughout the date. I move when that click Shepherd and lastly, we have also pretty cool delete functionality when you click on just X were the leading the event. So it's going to pitch school, and for this I'm just going to leave on empty judge time. We can name it actions or something like this, but let's leave it like this. And if we save on a fresh, we get our for what we want to do is trucks that some border street just that border one and it should be good to go. OK, but a quick if I want table. And now what you want to do. It's want to create the first function that is going to be Logan. Cage off the actions. So let's scroll down and create function. Look, action and dysfunction should take one parameter in this parameter should be the form that was clear. So we should that for this is going to be our arrival. And for the time being, well, going to do is just yeah before. So I'm going to show that, you know, But every think it's linked together. So actually just could be the name toe for form them. Let me just make a final case because it's not the actual form is the name of the form level Islam's and in orderto involved look action we should based in just an hour look, action function could be invoked over here Look, action and what you want to do is want, want to send so and just to show. But I have always, you remember from the biggest lesson is going toe hold the name of the form that we need toe show. So if we open our so you can get well, any fresh, when were you blowing form? But it just don't form and we're looking there. So this is our basic set up and now we can continue with the implementation of our logic. Well, what you want to do next is that we want to start adding close to our table when we click each all the bottles, how it can do that just first. By giving Canadian to our table, let's give it then I do so I can select it. Actions the table for him and let's go down here and let's cell in the table. We actually started in a vulnerable so let's get of ample let table equals and let's elected document get element by a do quotes and inside. This time, the urgent auctions does table and it's actually located in the causal, so you can be sure that everything could syndicate and working together. It's working correctly. Since they're fresh, you quickly we get out, they will put it so afterwards, what you want to do what you want to sell it all to be stable and we can do so by creating arrive. Oh, let our Oh, this is the name of the Bravo equals evil. No, is so So this is the functionality of javascript that we can sell Trow and just throw a certain to our program one. And now we can start adding cells from Doctorow by using the JavaScript functionality off instant cell. So how do insert close with my pro your via bow and then insert So Legace so this is Dallas could function. And inside your case you get index, which is number and the nexus which position want yourself. And we can just like zero because we want this role to be the 1st 1 in our table and what we want to do as well. It's to save the stronger side of arrivals on Let's create let So I did you close and this is our yourself, because what want to do later on, it's through a data with just sell and let's do the same for each of the different comes, So let me just hope it is and I want to place it a few times. So the next to it, actually, Sil for like this anyone least of the song positions one which is the second. And then let's go a kitten toe. So action and then we want a certain position to the next is so Nate on position three and the last one. It's so there is long position for so we'll do we have here. It's basically we're saving each of the cells inside of my elbow, and now we can modify the data over each cell. And now let's go ahead and actually start putting data inside each of the cells. So the first cell is going to be so I d. So legislator. So idea. No, you know, html People's one, and this is 1% the content of the first civil to one. Now let's go ahead. And if you sell form, sell form, though you know HTML equals for them. But now it is going here and do the same with self action. You close and the action is going to be epic, actually less that this is a string now Is I mentioned to my care different backs off actions that you can track them separator. And now for the daytime this actually, we forgot over here, the dough, inner age Gemma. And now for the sell date you date, though in a journal I keep forgetting this equals. And now what? You want to do it. You want toe, get the current date and you can do so. Just type after me. New Days Brackets don't who locality it's there and then back it's against. We haven't really talked about, but they're distinct goat JavaScript objects and the date. It's an object of Justin, but just don't worry about the moment. Just type, he said. This is going to give us today. This is going to give us distinct over here. Now that's our big Ricky in a programming language to work with because of the different time zones, different for months. And so just don't worry about it. And now what? We want to do it. You want to feel the cell lead, but we can actually this eso delete dough. Inner HTML equals Tepito X, and the sex is going to play the rover bottom, and with it when we click it, we're going to be deleting our arose. But now, actually, if we close our console and we're a fresh, we should actually have working functionality well, without Rose Leslie sign in, Lo informs, I know Register for signing again. Now there are still a few problems such a sour Jesus thing, always the same. And also our X is not their style, but distinct. We're going to fix them in the next video on vertical, just like your because it's getting quite long. I hope you're enjoying it so far, and they were going to continue in the next time. Take care. 21. Tracking and Storing User Actions part 2: hello and welcome back to Part two off these jobs project where we're learning how we can track and stories, that actions and what we did in the first video us. We created the logic. When you click each of the buttons over here, we look additional row inside our table, which is completely dynamic. That shows information off what form was launched, and now you can see that there some problems with our forms such as the daily functionality is not really working in us. Our ideas. I'm upset and we're goingto be facing this. Now let's go. OK, think, actually create our delete function. And because we need to start, they're going it and it can be a the function with their the leads. Let's say like, make it like this and dysfunction should have a single parameter, which is going to be the road that we're going to delete and what we can do it. You can touch causal both love so we can check that work receiving something and now we can start invoking Cover function was likely HKEx by setting this so the leaves dough on click equals and now should create anonymous function, which is just function without name like this. And the reason is because when we play, we want to trigger over. Want to revoke our delete. Okay? And now what you want passes? Actually, let's pass the road. That was that. We're going to delete and destroy, always going to be desirable over here. And if we actually save it and fresh, let's launch. Our Corso is robotic. You can get through. Let's create the funerals any quickly kicks we get our they borrow a few key isn't we'll get our precise rules and actually what we can do it tricking, create our really functional immediately we can tie pro. I'm well like this are all don't remove is doing the functionality that shoot removing if we save refresh and let's look a bit so it can feel a bit of data. And if you click our exhibition, delete our Rome office and now our daily functionality, it's working as well. So next thing that we're going to do to it going toe Autobytel styling our bottom. Let's go ahead in creative class. All they need this really brackets and what should be our styling, so the color should be all right. And then I also want to set our Kherson Toby pointer and then we just need to assign this class toe I x over here and will do so What I by typing self delete Don't class name equals the late and this is car Well, assigning for changing the classes off our elements with Charles one of the ways. And if we're fresh, let's click I want exists now didn't when you over you can see our Our Kherson It's pointer . Your users know the taken perfect differently our deliciousness working is it short? And now let's go ahead and continue with the rest of the functionality. But for that we're here to do some changes. And the reason is because at the moment, what are doing this kind of static or just inserting the data? But But what you want to lose? You want to start actually saving our data inside the browser. And for that I'm going to do some work to create a separate function. For it is inserting for this role reception functionality and inside the look action. We're going to implement the functional logic to save data in the browser. So let's go get in great function and the name would be insert. Oh, actually, and this action is going to take one parameter, which is work to be the action. And now we just copy the whole logic from local action function. But it's also on actually control X. This is going to cut it and also compete automatically and then just place control over a number of based it. And now we're going to invoke our insert row action from our production function. I hope it's not very confusing. Basically, we're going to be in something it from here. We're going to be invoking it from here and now what we want to do the data off the action is going to be coming from this vulnerable and now less greatest for everyone started feeling it with information. Let's I let action equals fairly brackets. Now, this is a different kind of special but a vote. This is called object and the subject. We could give it different properties, such as I did, and then in order to give a violent to decide, you could die end of our for example, this is going to be one, actually one, then coma and you could say the second property at the second property. This is the same thing gets attribution html elements you could create viable, which is going to start these properties with their parents, and you can access them. I'm going to show you how in the second, the second point is going to be the form, and this is going to be able to the equals the form name, then comma, then give the action, which is love. To be equals now is you may have noticed equals when we're creating objects is weak column and not by equal sign. But just don't worry about it. Just you can. That what I'm typing from the screen time and I'll be explaining it to the best of my ability. And then let's continue in the days Time, which equals Let's go pretty school from here. New daytime to locals thing. Just a little place in a coma, and then the last pundits. Actually, we're not working with the last night. This is going to be the last time we don't have to save anything for the village functionality inside our browser. And now let's actually sent our action object to our insert action function and we have also replaced D. So how do you access the virus inside our object Where we by action don't and the property that you want boxes? In this case I do. Then action dot form. This is going to be action the action Because our I propose to name it's named like this. Then we have auction the date this time and this is the same end. If we refresh, this should work identical toe What was one minute to go any further fresh? Less great. Yes, I know. What is it? As you can see, this is working also the direct functionalities, Georgie. Now we can continue it with the saving of this data. Your browser? Well, your browser allows you to use a bit of space to save data and it's cold local storage and we can access it by just type in corruption. Let's go over here. Who could that local storage? No, I said I don't and this is a function. Then you need to specify two parameters. The first is the key. Basically, we're going toe get this item. We could put a huge is unique and we can access this item later, and the second values were to be the actual data that we're going to say. So for our set item. What, you want to do it pronto. Let's time won't the actions. This is going to be our key and then you want to place the date of. But the data should be stealing, and we cannot place it in just format over here. A subject. What? We can do it. We can work it to Jason and Jason stands for JavaScript object rotation and it just to convert objects poop next. And we can do so by typing Jason, though. Drink. If I were well, as I mentioned what you drink, it's we're putting our action and distinctive work and dysfunction. Jason Stand If I is going to convert it next to string and you could save it in our browser , and then when we get it from there, we can convert it from string object that we can use it again. I hope this is not very confusing. It's a lot off your information. Just go after me and you feel safe and a fresh. Yes, OK, perfect. We don't have any Arabs, so How can we see that? We actually saved something. Well, you could look over here on application and actually, we see we're seeing it now. When you click on the action, you could see over here this storage, local storage and now what we have. It's key actions with the volume and just borrow. It's our Jason's thing. And over here it's shown by your brother the information that we said. But now if you actually click, you could see that the data is changing and the reason is because you are overacting it. What is it? Have a good again long inform sign up form. Okay, As you can see the data, it's changed because at the moment we're just saving this single or this single action. What you want to do is you want to create on a rate that is going to start each off the actions and how can we do that? Well, let's create the money over here. Left anxious in Florida Yukos NT A. And then we continue to do its you need to die actions, actions, though Bush, you could put our action here. You remember that by dot Push. We actually put items sort of arms inside our army. And then instead of stand defying the action, we can string if I that hope away but you for actually finish it. We're not really going to fix anything in the reason. Okay, now, here on the way. But stew, it's going to be we replaced every time. And the reason is because you're a defining actions each time whether we're actually picking because we're a initializing it every time dysfunction Islam. So we get a couple solutions here. What we could do is we could actually check if we give local storage data. And if we do, we could get the data and use the actions. Or we could create for re initialized the empty today. And how can we get data from the local story? Well, if we have said I don't get a wish if get I let's that local storage don't get like them any inside. We should specify the idea of the item in our cases, actions, auctions and just could be. And actually, actions could be equal toe. Just statements like this. Actions equals the local storage get item actions, and now our racial hold our values from the browser. But we should go a check over here because when you launch displayed for first time or when you delete all of these, this is blocked of the engine. And if you'll start using that, this is going to be undefined in your going. Forget programs. So check if actions is. You remember everything with valueless items through and everything without returns for. So if actions here's in Navarro, this is going to be true. So what people do is look with that actions you cause Jason Waas actions. So what is going on here? Well, it's a mention that we're saving the data set is strength. This is Jason for months, and we're staying defying it. And then when we get into our studio, getting it is string, and in order to use it as an object, we need to parse it basically dysfunctionality conference stream into objects. And we should ask, pushing our else walls for our statement that if actions, it's undefined, who could just create? And now let's see what's going on. You put a fish we should stand, I think more and more data into our storage, Leslie. Okay, you can see 01 and we'll teach like this is going to increase. And the reason is because when you click will get the existing data and we're a pending more data toe this. Sorry. Now let's actually remove this just big contractions and keep the leaky because the moment when we deleting cross from here, we're not debating it from the storage. And it's very important that planet delete swallow you actually remove it from the storage is off otherwise is going to stay here. No, What we notice is that our idea serves to broken and actually going to cut this lesson here , and we're going to continue in the next video because it's getting quite long. But so far we get our most of our functionalities done where click on the buttons were saving teacher the events and we're also saving the missing inside the starch in the next lesson will want to fix their edges and also the Galician off the functionality and that's it. OK, I hope you enjoyed it so far and take care 22. Tracking and Storing User Actions part 3: Hello and welcome to part three of this project where we're learning how we can store different information into our browser. So now what are you going to do? It you're going to fix the error with the idea is basically already said the moment that have call it one what you want to do. Joke we want at the Navy, but its free. Basically, if we kept two elements the next I should be with 80 for example. And how can you do that? Well, over here we could create a Rambo. Let a year, which is starting one. Basically, we begin with one, and if we give actions, we could check. What is they do? Of the last action? And they'll quit assigned the A D plus one. So how can I do that? Where we could buy I did equals actuals, you remember? Necessary. So how can we access the last element of this way? You could that actions, though, land And this is going to return us the amount of values or the number of violence inside actions. But we want oh, set minus one. And there is it is because his actions here in virus For example, we want to access the violin the ninth position because they are a starts from zero and the length book. Basically, we know boxes the last element. You have to set the length minus well and then you don't idea. And the reason is because you want to access the idea property of this element and let's actually, they don't work here. 40 80 and let's say very fresh. And now I problem should be working. I do want you won. Okay, there isn't is because because we didn't set it. We have to save bloodline. Basically, we're getting the last stage of the element and then implementing Plus on, let's delete our logic, your this refresh. Let's start brown. You're okay. You want I didn't do. I didn't very often 94. Okay. Are you sure it's now fixed? And let's go over it again so it can be sure that everything it's understood. Reax is the last element off actions are a and then we access the idea property and we increment. Basically, if this idea is 20 we go, Thank you, and that's it. So now we have another problem. If you click over here toe actions. We could see that we care for different virus. But if I started deleting grows, our local storage is not updated property and enough of them to fix that. When we delete that, we should also delete it from our local story. How can we do that? Well, basically, to our delete functionality, we will pass the idea off the road that we want to dig it. And the reason is because you want to find it over here. And how can you do that over here? Could pass action the idea. And if we try to look it that's safe on a fresh actually lets you orbital data like this. And if we plead the eggs bottom, you should see that idea of the item. That's clip eight slick. Self perfect. Now we know that we need to delete. We're always they just seven from over here from the local storage. So how can we delete it? Well, we have to select the game basically, when you talk corporate dysfunctionality or hear actions and get item actions. So let's go over here like this next thing, just that you want to pass it, Vic. Basically, action should be quartile. Jason, don't pass. Actually, actuals because, as I mentioned from the local store interrogated a string and they want to competitive toe array of objects. And now what we can do is produced for each Luke. Let's that actions dough for each forage brackets and inside these brackets were here to do is to create a money must function. And this side is synonymous. Assumption the first parameter should be is going to be the action. And now what you want to do is you want to check if just action, don't you? You closed toe our idea that we have to Really? Basically, we go through each of these the ritual decent of the idea much. We want it deleted. But how do we know which rhino should delete from the actions? Well, you could not go over here, and I just I was going to be implemented tonnage iteration. And the reason is because you want toe No, in which position were currently inside attractions so we can remove this action. So how can we do that? Well, if we match it basically, if the action ID equals two dijo the element that you want to believe we could That actions no lies, lies. Buckets. I comma one. So what is happening here? Well, spices, beautiful nationality, off JavaScript off rays that we can remove violence. And what this happening Carrots were supplying the position off the element that we want to remove and were saying in the second parameter that we want to remove one element. Basically, we should just You should go to position five and it move one element, composition five. Because you can supply, for example, toe remove 12 minutes, the elements and soul. What we have to do next is actually when we remove one element is that we want to update the list over here. And we can do this by tapping local storage. No, I said I don't. And then we have to sit our actions again. Actions? Come on, Jason. Though, stink if I brackets and our actions, huh? Just perfect. But there is a case where if our actions is, aren't you well what? We have problems? Because this is going to be Jessa and who want if whoa project. If actions don't Len equals is you know, basically actions is engine does not have any values want to remove just actions item from the local storage computing. And we could do so by typing poco storage. Don't remove items. I just supply the value of the item actions like this because otherwise we're going to get problems and this should be good for our daily functionality. Let's check now if we're fresh, actually, let's in more views from the beginning. Let's start clicking, okay, we get out of us and if we start the meeting, then we should did it the correct plants. But as you can see what looked like the export, our storage is clear. But this is the main functionality, and what's left is now to fix the our toe population. Basically, when we're safe off capital data like this, what you want to do, it's where I want when I refresh the page, you on the data to be displayed back again because if you remember on our patient with a fresh we saw the data now what will you do for it? It's let's create the function on the Mutua and dysfunctional could be called render actions. I just let's get our markets on the actions and for dissident directions we have to go. Actually, we could copy just because we need to get the actions from the local storage. Then you should check if there are actions. Actually, basically there is a model because there is no there is no need toe. Try to render them, and then we'll do a loop for each look that looked reach value and we call just functional working insert actionable. Let me show you what I mean. We will start typing actions dough for each brackets. I'm only must function Billy back. It's over here that I want a quote and are gorgeous, actually invoking insert action. And inside we just need to pass our action, Which is this. So what is going on here? Basically, we get our actions from the local storage. We check if there is anything. If there, this will pass it. And then we look. And for each of the actions we've walked in some actionable, which is going to be dysfunctionality ways of the table, Rose. And what's last think is actually that we need revoked and you could go over here and that are in the actions will send my car and you foot of fresh we should see our data fueled automatic, is it? And the delete functionalities working. Everything is working. Let's see you. We don't have any Arabs. That is perfect. Okay, so this is basically I want project. This is a lot of new information, for example, with the manipulation off local storage hop artist data and so on. But it's very, very valuable because of there are many examples where you might want to do this Also, which is a good lesson and example of how to work with our is basically came on a day off data, a lot of elements how we're modifying them, how about ideas. And so basically, this project consists of pretty mature majority off your javascript Asks are going to be well, there might be no articular pool tables and feeling dating them, but there were they would be connected to other HTML elements. And the way you can the elements is the same regardless off the type. I really hope you learned a lot from this project. I hope you enjoyed it. And I hope you're going to build and work on top of it so you can improve it. For example, you could have more styling. So this table, you could make it more dynamic. Maybe you without more information. And they wanted to continue expanding with the causes. Went to great practice. And if you do any progress, please for canon conducted because I want to see your project. I want to see your results so I can give you feedback on it. Okay? I hope you enjoy and take care.