Build Games and Web Application with JavaScript & React

1. Game and Web Application Development for JavaScript Mastery: Welcome you to our JavaScript and ReactJS Cod Come. And in this course, you're going to be learning JavaScript and ReactJS in a fun way. This is a course that's actually prepared for beginners in order to help you get started with JavaScript and Recs by building games and applications from scratch. My name is Judge Steve, and I'm a senior software developer at Memo Global. For the past ten years, I have been buildings, software, desktop applications, and mobile apps. And today, I'll be teaching you how to view games. And this is going to be a bedrock that will help you to master what application desires in web and in mobile app designs. We've also start this by learning how to download and install Visual Code studio and atom on our systems. Then preferably, you go ahead and use any one of your choice. Then after I'll go ahead and dive into creating games and building them from scratch, I'll teach you how to build snake Game. That's like a game you're seeing right on your system. And you can see how the snake eats the food, grows bigger, or gets cut if it touches itself or it goes out of the box. So go to build this from scratch. We go to learn also how to build a pun game. A pun game is a very interactive game, and the knowledge you guess from building these games is actually going to help you to understand JavaScript fundamentals and be able to build super applications. We're also going to learn how to build a tiktactGame. A TiktactGame is a game of luck, a game of draw, win or lose. And this is a game that're going to built from scratch. Then after I'll go ahead and lay how to build a Rock PepazsosGame. A rock Papazzos game is a game between you and the computer, and you can be able to see how you can be able to play this game with computer. You either win or you lose, computer wins or lose. So anyone works. Then after I'll go ahead and introduce you how to buuod a die for. So I want to learn how to use Dizura how to be able to play dice and get any number from the die, and this is a very interactive game that is actually looking good. Then after I will introduce you to weather app application. And here, we're going to use an API to actually interact with with the app and able to get real data from p and any country of our own choice or any place or any location at all. Then after that I'll te you also how to guide an Image lider. So you want to learn how to use Image slider in Java Squid. And then after I'll go ahead and introduce you to Kora Pia. So we're going to learn how to use Kopka, and then we also going to do that using JavaScript and reacts. Then we move ahead and lay how to build a stopwatch. Stop Was is an intuitive project, and I really love you to have your own stopwatch working and you can be able to pray this and to showcase that to your phase. Then we also go ahead and lay how to build a digital clock from scratch. We're going to build a real time digital clock that actually works. I come to present that as an evidence of what you've done so far and come to showcase this all your prots for you as well. Then we'll go ahead and lay how to build an electronic calculator that's actually working very fine. So this electronic calculator is actually good, and it can build to showcase that audiopSfo and show people what they have done so far from this cost. Then after, I'll teach you how to do the digit counter. So this is a simple project you can actually build and shoot your friends. And then it will also help you to understand JavaScript programming. I also introduce you how to build a temperature converter to be able to check temperatures at a certain time, and you can be able to convert this between cessies or Fahrenheit. And this actually works very fine. Then after I will teach you how to build random number generator. So this is an interactive or intuitive application, and you really know how this actually works because I got to be building that from scratch by yourself, and at the end, you can be able to have a random number generator designed by yourself. Then after I will introduce you on check boxes and radio but ins, and these are the things you're supposed to know in order to build any generic application using JavaScript or react JS. So at the end of this course, you must do over 15 hot projects, which you can be able to present, showcase on your portfolio, be able to show it to your official employers, and they can be able to move ahead and move over to expert level in JavaScript. So if you follow me style by style, we'll go ahead and start this immediately, and then after we'll go ahead and begin to build this project. Starting on the basis of JavaScript to advanced JavaScript programming, and at the end of this is going to be something very cool. So film me step by step. Let's move into the course and see how things work out. And I believe at the end of this course, you will actually love what you've gained in this. Thank you so much as we move into the course now. 2. Download and Installation of Visual Code Studio: Alright, so one of the development environments we're going to in store for this course is Visual Code Studio. So go ahead and move over to coded visualcostudo.com, and you can go ahead and download for Windows if there isn't Windows or quit a hit on download. And it says, thank you for downloading Visual Cool Studio. And you can see that is being downloaded for us. Alright, so so Costio is almost getting to the end, and that is almost how many. Raso is almost there, and then go ahead and start off with installation and kick off immediately. Alright, so Visa Cos studio is word in and can go ahead and open up this. And that is it. Go go ahead and double click on this, and Whad and Eta that says, accept the agreement, accept and install and next. So you can go ahead and create Dexter icon and all this, and then sto this. So that is preparing for installation. Can go ahead and minimize all this, and Visa Costdo will be ready in some minutes time to come. Alright, so you can see that Visa Co Studio has been completed and you can go ahead and click on Finish, and you will see Visaco studio running. And that is already here. So this is Visa Co Studio, and it's up and running. And this is a put video on download and installation of Visa Co Studio and a computer. So you can use this for JavaScript. You can use this for react. You can use this for any other project out there. Water HTMO, CSS, PHP, and so many projects, what Python and so on. So it has so many uses in the industry. So pull this down, broad in with it, and I'm going to see you in the next video lecture. 3. Project Setup and Live Server Installation: I welcome you back again. And in this video, we start by starting up a project for these cars. Now, first of all, I'll go ahead and move over to Pis and I'm going to go to Open folder, and we have no folder created. I can go to my dektof right in here. I'll go ahead and create a new folder and I'll go ahead and say I can give this for name maybe website, or any name, JavaScript react and so on. I can even go ahead and give it Jz tests or anything. And any name I give that to actually be the for the name. So let's go ahead and use this. Even though that doesn't actually supposed to be the fora name, it can be like maybe my website, then it's TAD, but I just want us to know where we can be able to give any name. And the conventional way is to use the name my website. Alright. Because I have my website already writing here that I have, I just want us to click something else, so I'm going to use Js text, and I'll go ahead and select folder, and that folder will now be open. And now I have that folder writing here. So all here, you can see I have JS text, and that shows the folder. And anything I want to do, I can go right inside here. I can create a new folder right here. I can be able to create files. I can be able to create anything I want to write inside this folder. Okay, so, anything you want, I can create a new F. I can go ahead and say, I want to create our index dot HTML. And like I hit Enter, I have Index H Temo, and that is right inside Js text. I can go ahead and cross this welcome right in here. Oh, now I'm going to have created index dot H Temo. The very first thing we need to do is to create our HTM boilerplate. To create HTM boiler plate in Visa Co studio, all you need to do is to we explanation mark and hit Enter and you have H TMO boilerplate. And now, if you want to run this, you can go ahead and move on to the folder and look for index at HTML and run that. But that is more what I'm going to use. So I'm going to go ahead and install an extension that will help us to always run our code and move over to extension right in here, and we go ahead and start immediately. So go over here and I'm going to look for extension called live saver. So we have Live saver here. Can go ahead and open up that and go ahead and install Live saver, saying, Do you trust the publisher? Trust and install that, and very soon that will be installed for us. So it's getting ready, and it doesn't take much time, and very soon that will be installed, and we'll go ahead and start off immediately and get this up and running. So that is done. You can see we have Live Sava in stored for us, and we can always go back to your Pis and move to index dot H DMO. I can always guide around close this. And for whatever we do, oh, we need to do just to save, and anytime you save your Pi, if Sava we actually open for you. So now I'll go ahead and move over to body, and I'm going to write a paragraph or go ahead and create worm and I'll go ahead and say, welcome to Java Script. Alright, so this is not our hellowordbard. We're just trying to check out Visa Co studio and check out Lf saver and see how that actually works. Now, I'll go over and sub this Control, move to Index ZotaHhTO, right, click that and open with Live Sava. Click on this, and we're going to have Lifesaver start up immediately. So help Life Saba start ovis. Welcome to Jala quit. So try because all I have to do is to go ahead and minimize this, I will always go ahead and ship this by the side. Asq and say, I'm going to drag this by the side, and I'm going to also drag this by the side. And now you can see that both of them are side by side, and in that way, it's going to be easier for me, and I'll guide and close this. Now, once you open this life saver for the first time, all you need to do is to go ahead and click on Save and your life saver will actually automate. Quit ons paragraph tag, and I'm going to say, this is Joe Steve, and click on Safe and have this is tech Steve. And I can go ahead and add any other thing, then go ahead and say this is hash two, and I'll go ahead and say, we walk great Guilin Crisis. We walk with a live server and serve this with Control S, and it shows we work with live server. So this is a simple a quick set up for Visa Co studio. And now we have learned how to create a folder, how to create inexOtegtmofi, and how to set up the live server. And that will help us to actually launch our projects. Immediately, we bring that manually. So anytime we click C Control save Control S, it to go ahead and populate whatever we have on the browser. Keep moving immediately. So go ahead and close this and and follow you up in this cows trotted end of this class, and it's going to be very interesting. Thank you so much, and I'm going to see you in the next video lecture. 4. How to Build a Snake Game: I will call you back again, and in this video, we go ahead and create a snake game. And anytime the snake hits the food, we go ahead at any point. Alright, so this has everything, and if the snake goes beyond the X and W exist, then the game is over. And if the snake touches itself, then the game is over. Now, let's go ahead and I will start the game. So this game it moves down, and it goes to the food and you can see that at any point. And now I'll go over here and I'm going to eat this food and a point. So a point. And now, if that goes off, game over. So you earn four points. Now, let's go ahead and ******* game again, and let's check if the snake touches itself. So now, I'll go ahead and make the snake to eat so that the snake can grow tall and I can be able to eat itself or it touches itself. Mao is game over. So you can see that that actually works, right? It's time to go ahead and kick start this immediately. Go ahead and close this and let's hit and then move over to index HTML. Right inside Index H chemo, wire and create a dif tag. And the ID of this diff tag is going to be the container. So ID is going to be equal to main Container. And right inside this ID inside this gift tag, I'll go ahead and create canvas. And the canvas is going to have an ID and let the ID of the canvas be equal to game container. Alright, so this Canvas, I'm going to give you some width and some height. So for the wet, I'll go ahead and say the width is 450. And then for the height, let's go ahead and say the height is going to still equal to 450. Then we have a block Canvas. Go ahead and set that. And now let's go ahead and create another div. So I'll buy it and create another div, and I'm going to call this div to be the sce That is where the core will always be you earn a point, you earn 2.3 points, and so on. I'll go ahead and place in zero by default to always show the and let the ID be equal to game score. Alright. Now, I'm going to add a button for the restart. So for the button, I'll go ahead and name that to be the restat. And then you can name that to be a reset or anything. So ID is going to be equal to beauty and restat. Alright, so set this. I have only the boding and the canvas is actually here, but it's not showing. So for that to actually show, move over to sie the CSS, and let's go ahead and kick off him dead way. Now for the main container, I'll go ahead and copy this. But before then, let's go ahead and create the game container. So let's go ahead and say the game container and while I'll show the border for the canvas to actually show a wild and see border. And let the bottle be equal to three pixel, and you can still see that, so make it to be solid and check it out. Alright, now let's go ahead and copy the main container and move over here and check it out. Pass that and let's align everything. So text online and let that be center. I've moved everything to the center. Now for the games core which is a zero, a vial and copy that, I'll go over here and go ahead and add an hashtag. And then we go ahead and say the font family, why I use a cussed for that. And I put the semicon and end. Alright, well, I have a semicron already. So go ahead and dg the font size. So for the font size, we'll go ahead and make that to be 50 pixel and safe, and I can see that O is big. Alright, so we're done with index dot H chemo and it's titled CSS. Now, let's go ahead and move into script dot JS. Alright, so I'm going to start by making references to our index dot HH chemo, and I will start with the game container, which is a canvas. So go right inside and move over. And I'm going to rest of constant. So game container, and let that be equal to documents that query selector, and that is an ID. So put a hash tag and bring a micron at the end of that. And the next one is we have to get the canvas or to get the context of the canvas and to get the context of the canvas, wear and say const CTX for context and let that be equal to game container data get context, and that is a two D act or a two D display. Right now, let's go ahead and check out the game, go and copy this for the game ce. Create a constant for that. So cons games core and let that be equal to documents that query selector. That one is called selector, and that is for len pass that so you don't make a mistake. Games called. Press some ground at the end of that. Then the next one is the BTN restart and go over here, and then we go ahead and say Const, pass that, BTN restart equal to document that query selector, and we're ahead and pass in the ID VTN were stat. So press some Micron at the end. Now, let's go ahead and create a variable to hold the width and height of our game container. And the Wit and heights are assigned to the Canvas. That is, we assigned the Wit and height to our Canvas. And for us to do that, we go ahead and see cans container weight. So container weight is going to be equal to game container D weight. Semicrond and also count game, okay, container height L's quarter to be container height. He's going to be equal to game container, Da Height. Right, press amicron at the end. Okay, now let's go ahead and assign the colour to the game container background and for us to do that so that this will appear yellow. And for that, we go ahead and say Cost, bud background. So comes both background and let that be equal to let me call that to be yellow. So I love yellows. So except that. And the snack colour is going to get green. So for the snack color, I'll go and C comes the snack colour and let that be equal to green. Alright, so now we're going to add Ba to the snack. So for that, I'll go ahead and say snack. Snake border. And let that be equal to green yellow. So we have a green yellow and colour. So that is where I want to add and put the semicron at the end. And the food, which is the snack food, go and say, counts the snack food and let that be equal to red colour. Press semicron at the end of that. And for the size of the food, let's go ahead and coda to be the unit size. And let's go ahead and say Cs unit size and let that be equal to Tati. Alright, so we have declared most of the things we need. Now, let's set the running to be equal to force. So that again, we always start only when we want that. So let's run it be equal to force. This is a Brian. So until the game starts before we can be able to get that running. Now, we're going to set the velocity of the X axis and the Y axis. That is the next speed on the X axis. So if the veocity of the X axis is positive, then we move to the right. If it is negative, then we move to the left. And for us to do that, let's go ahead and say, let X velocity equal to the unit size. So these are going to be also the size of each of the units around all the. So it can still have dot, dot, dot, dot, right? So it's going to be in a block form, 30, 30 pixels. That is what it will be. And let's the Y veocity. So it's going to move in issue of this block 111111. So that is the speed of it and let the Y velocity equal to zero. So if we set the Y velocity equals to zero, that means you're not moving up or we're moving down. So we always going to move in on the X axis until we have a key praise to move down. Alright, so this will actually always start on the X axis. Now we're going to set the coordinate of snack food to set the coordinate of the snack food, go ahead and say, et let X food and let Y food. Alright, so that has been set for the coordinates of the food, and then guide on set this core to be equal to zero at the beginning. Now, we have to dot the snack and the snack, we have to start at the point and this point is going to be X and Y. So at X at 60 at y zero, right. And that is going to be created in array. So for that to actually happen, we also monitor when the snake is the food. So on the snake eats the food, the snake will actually grow. But before the snake eat the food, we have to give a picture of a snake to be like about four or five chains to show the snake. It doesn't just come out in one single piece. So it's going to contain, about five units of that to start off. You know to show that that is a nice snake. For us to actually do that, is going to be array format. And let's go ahead and say, let snake equal to an array. Alright, so that is not an array. So go ahead and use the square bracket. So we're going to be starting by X. You code zero and Y is zero. So that is X is q zero at Y codes zero. We're going to be starting at this point to move the neck. And then we're going to give the snack like four or five pieces in order to show that that is actually sneeck. Alright, so for us to actually do that, we now go ahead and set five body parts for the snack and go ahead and put this one, two, three, four, and the last one is five. So for this first one, I'll go ahead and say that X is now unit size Comba then Y equal to zero. Roman our unit size is a 30, right? And this is the size that our food will always take, and that is the size our snack will also take. So we're now going to chain that size into five. And now we have gotten the first one wired up came right in here. Now we have gotten the first one. We can now go ahead and do the last one. So do all that. So go ahead and copy this, but and copy this, and now go right inside here and pass that and pass that. So this is the first one. Is the second one. Then the third one is going to be multiplied by two. And for the fourth one, we we ahead and uh multiply that by three, and then we're ahead and multiply this by four. Alright, so I hope that is cool. Alright, so this should be a camera and put a camera right in here. So the first unit size, then the second unit size, the third multiply and the fourth. Remember this is starting form index at zero and Y axis at X and Y axis at index zero, Alright? And then you begin to multiply that. In that way you can give the snack to be like five chain and then start scrolling. Alright, so this is all about the initialization that we need. And then we can go ahead and give in some add event listener to the button, and the button is the restart button, then the window. So this window, we have to give it an event listener. So I wonder why press the key and always know that we're moving forward or backwards or up or down. So to do that, I'll go ahead and say window addEvent listener, and the type of event listener is key down. So anytime you click, is going to know that you have clicked the key. And, here, I'm going to leave this to create some function. But the function name I'm going to give this is a function called re direct. So any time you click it to redirect, redirect snack movement. So redirect Snack move. By puts a Micron at the end. We're not created that. Then the next one is the BTN, Restart, copy that. So buy a ps and say, add invent Lstw and go ahead and give it a click Event. So anytime you click on this button Cord reestat button, we go ahead and move to a function chord game restart. Alright, so that is what we need. So after we've done that, we go ahead and create a function that is named start game, and that is a function that we're going to call that's going to call every other function. So now quite up the semicolon, let's go ahead and start to create all the functions that we need one by one. And then after we start to build each of the function from scratch. So the very first function is the start game function, which I have already initialized up here. So go ahead and name that to be start game. So start game. And this techno parameter where I remove that, go ahead and close this function and move over to the next. So the next function I'm going to create is a function known as next step. So buy and say next step. So this is going to detail each of the step that is involved in this, and that is how we're going to follow each of the step one by one. So the next shone is a function that is known as a clay container. So Wyhed and clear container, so WyhedN say clear container. Alright, so this takes no argument and cools that function. So the next function, again, is a function that is known as bulled food. So we're going to build snack food. So go ahead and say bulled food. And this text no parameter and require Coles function until we need it. So the next function, again, that is required is a function that is show food, the food that you just built, the snack food, show food, and the warhead and the keep this function by the side until we need it. So the next function that is needed is a function known as a move snack. So move snack and open to move the snack, each step at a time. So where is the function. Then the next function that we need now is a function called show snack. So you can show the snack, show snack. Alright, so that is a function. Go ahead and put function writing here. Function, showsNck. Right, so it ten argument. Then the next function is a function called direct neck movement. So function the name of the function is redirect a snack move. That is snack movement, and it takes an event because Romo created that right in the. So the key down event. So we go ahead and close this for now. And the next function is the game over function. Go ahead and say function and the the name be equal to game over and go ahead and close this. And the next function that we need is a function that is known as the end game. So function and the name is going to be end game. So it shows that our game has ended, and coms. So the last function is a function that is start game. That is game t. And that is a function that is for this bodying. Alright, now we have able to set these functions. All we need to do now is to first ahead and build the food for the snake. So go over into the build food, and that is what we need to do. So I want to create an inner function with a random number distribution for this food so that the food can be scattering and going different places. Let's do a crossing an NA function right inside. So I'll go ahead and say function and let the function name be equal to its food. And this is going to take some parameters of minimum and maximum for the random number. And then go ahead and equate a random number, so you can run food and let that be equal to mats that are random. And then we go ahead and multiply that by saying maximum minus minus the minimum. O W O plus the minimum, if there's any that is left. And if we go ahead and copy this food, let's go right inside the start function and place that. So there is a function. And if you go ahead and place some icron at the end, want to actually see that. And for us to see that, we need to create the food on the X and Y S for that to appear and go under here. And I'm going to say X food, because we created this variable is equal to its food on the X coordinate sclon from zero and for the container width. Minus each unit size. All right, go ahead and place a micron at the end. And for Y exists, go ahead and see Y food is equal to its food on the y axis. So container heights. So that is a container height minus is unit size. So put a semicron at the end of that. Now, if you want to actually see this, go ahead and see console that log, and then go ahead and pass in X foot right in there. So put a seicron at the end of this and let's check this out. Inspect this element and let's go to Console, and that is defined. So Alright, so let's go over here, and here we have a random equal to this, and then you can go ahead and put the semicron at the end of this. Now I want this to actually show and can go ahead and save this, and that is still on the fine. Now, we have to check why that is on defile. So that is actually defined because we have not returned our food. So to return our food, go ahead and see return and say round food, press a miicron at the end, and now we have seen that on the file is gone. So actually going to return the food, so you can see them being placed different places. Now, you can see that it has some dots and, um these unit sizes are numbers. They're not dots. So I'm going to run this, go ahead and cut every day were right in here. I'll cut this, and I'm going to say mat dots round and I'll war hair and pass that. Now, go ahead and save this, and now you can see each time I save this, I have these numbers. But remember that our unit size is 30. And if that cannot be it just cannot divide it by 30, right? So we want to get that, so we have to divide it width and height of each of the container in unit sizes. And to do that, all I have to do is to go ahead and going to say, for this to actually happen, I have to actually divide everything. And for me to divide that, I'll still go ahead and cut this again while I cut this and now put a rot in the egg and divide that by each unit size. And let's check it out. So that is what I have, but that is not actually going to be placed evenly on the left corner of the species. So to accurately place the foot on left corner of each of the species, we have to multiply that by the unit size as well. In order to do that, I go ahead and multiply that by the unit size and check it out. 150 can be divided by 30, 210 can be divided by 30, 60 can be divided by 30, 120 can be divided by 30, and that is it. So remember that the unit size is 30. So now we are done. I can go ahead and get rid of this food. Alright, now, I can streak this because I think it is now getting so cumbersome. Go ahead and cross this a little, and I'm going to drag this a little. And that is this for now. So we're done with this. So after the creation of the food, we have to go ahead and show the food. Alright, that is what is needed. Let's go ahead and show this food. Alright, so on the show food function, all I need to do now is to go ahead and give the Canvas context, which is CTX squid and copy this. So the context, I'll just go back here and say context that few tie and later be equal to the snack food. So the snack food color is red. So we'll fill out with snack food because we've created the food, and then we go ahead and say contest. That feel ret. So on the axis, we go ahead and feel the food. And on the y axis, was a warhead and few the food. And then we're going to do that on X and Y axis with the unit sizes for X and unit sizes for Y. So this is all I need to do that. So I'll just create a rectangular rectangle with X and Y coordinates. This is what I actually did in order to fill in the food. Now, we go ahead and copy this she food quit and save this, and I'll go right inside Strata game, and I'm going to paste this function d in order to see that. Put a semicron at the end of this and let's check it out. Now, one more thing is that this function has been created and nothing more is actually needed for this. So snack food and snack food is right in here. Alright, so we can simply go ahead and move right inside here and inspect this element and see where the error is coming from. So go ahead and inspect this, and it says that CtCFel rect is not a function. Alright, so this should be in a lowercase. The F should always be in a lowercase. I go ahead and save this and the error is gone. Alright, now, how the food shown? Alright. So each time we save this, go ahead and save this. Each time you save that, you can see that food is being placed in different places, alright? So you can see anytime I'm seving it, I have the food being placed different places. And whenever the food is being placed, you can go ahead and direct the snack to go there and eat the food. Alright, so that is all we need for the show food so that the snack can actually see where the food is, and that is this for now. So we can simply go ahead and start this game by saying running as we are moving, running now is going to be equal to true and put a semi round at the end. And then the next thing we need is to put the score, right? So you can go ahead and see game score and let the game sco that text content be equal to score because we initialized this call. And the next step is to go ahead and move to next. So for the next step, I'll go ahead and just copy that and place that inside here because these are the steps that are needed to be followed in order to get to our destination. So go ahead and save this. Algahd use these functions have worked on, so anyone I want to work on, I'll go ahead and open that. So for the next function, all I have to do is to go right inside here, and we have to check if our game is running, and we have made a game to be running act through. And for us to do that, go ahead and see if running if running, that means if running is equal to true, then we go ahead and set timeout. So now we can be able to take this one step at a time. And now we are using a timeout. Remember that devising a timeout. The best function to use for timeout is the arrow function, right? So go ahead and use the arrow function and the each of the functions that are needed. So the first one is the Clare function. So the Clare function has to be implemented. And after the clay function is implemented, we go ahead and call the show food function. And then go ahead and put a semicron at the end. And then we go ahead and call the move SNckFunction. So that is what the next step actually does in order to pick these functions one step at a time. And after the MovesNck function, we go ahead and pick the shoe's neck function. Pase that shows neck function, press semicron at the end. And after it shows neck, we go ahead and pick the game over function. Pase that, and press semicron at the end. And then we are going to repeat this operation again, that is the next step function. So we want to repeat this operation again. So other functions like the redirect are going to be done with the key, and the game restart are going to be done by clicking on the event. So now, the next thing we have to do is to set the speed at which the snake will actually move. So for these functions to always come, they depend on the speed at which the snake actually move, and all I have to do is I have to give this as 200 millisecond. So it's going to move at hundred speed of 200 millisecond. Else, if that does not actually happen, then else we ahead and end this game. Eight. So go ahead and call this function, which is end game. Alright, so remember that endgame is not among the setup time function, so guy press that separately if the game is not actually running. So if the game is not running, if the game is actually running, we follow the steps. But if the game is not running, go ahead and end the game. So now we can now move over to clay container function, and that is the next thing. So go ahead and close this function and close this function. And what we need now is to open up the Clay container function. Right. So let's go ahead and start off immediately. On that declare container function, all we have to do is to set the fuel type to container background and go ahead and say the context that feel stye and let there be equal to the burg background. And then we go ahead and say the context that feel wrect. Then we're ahead and set that to zero, zero, and set the container height and the container width. So it's a container width first, and Container height. Alright, so this is all we need over here. Then we move ahead and move to the Show's neck. Now we have no to play the container, and were able to set the fierce tie to boat background, and it has now filled the entire space. Now, let's go ahead and move to Show's Neck function and go ahead and close this. And oh, I opened another one. I wanted to close that. So by close the start function and close the neck function and cools the clair function. And now let's go ahead and move to showsNckFunction, and that is it so that the neck can actually appear here. Alright. So that is show's neck and not show foot. Alright, that is this one right here. So for the shows neck function, all we need to do is have to feel the color of the neck and also feel the boto of the color of the neck. So for us to feel the color of the snack, guile and say, CTs that are Few sty violinc that's fuel stye and let that be equal to the color of the snack, and that is the snack color and save it and press the corner of the ink. And for the snake boda, city that stroke, now go to use a stroke style. Because you're not going to fear that. It's just to give it the marchs and let that be equal to snake boda. And that is green yellow. So so micron at the end of that. And now we can go ahead and few each snack parts in both X and Y coordinate using a four inch method. So in order to view each of the snack part in both X and Y coordinate, head and use snack and C SNAC, four method, and Y and C SNAC, isn't there an arrow function. We go ahead and say ctx. That is the context that few bret. So on the few the SNAC part in both X and Y axis. So SNAC Snack pots dot X, glycoa and snack Pott Y, pole comma, then the unit sizes of the sneck are going to be sewed up. So also bore hair and also add for the stroke that is the border. So Ct CX that stroke, that is going to be shook wrecked. And we go ahead and do that for the snack pots dot X in X axis and sn pd dot Y and Y axis, and for each of the unit sizes in wet X and Y axis. So buy an apple a semicron at the end of this and also put the Semicron at the end of that and save this. Alright, so sure you actually save all your design. Now, we should move over and see move to the snake move and check it out. So before then, we have to see our snake before we can be able to move to move Sneeck and our snack part is not actually working. Let's go over and move right inside here and inspect this and check what the error is. And over here, it says, snack part is not defined. Okay, and array that arrow function at Show's neck. So over here, and copy this and that is snack bad and not just neck and save this. Alright, this is a snack, what the color is not actually what it's supposed to be. So Ctegs that feel tie should be snack color and not snake. So that is snack color and not snake. And now we have a snake and you can see that. So they have been demarcated with snake boda, and the snake boda is yellow and so green yellow. So if you change this green to, like, something like a black, check it out. This is the block and save. I can see that it's now filled with the block. So I'm going to keep that back to grey yellow, and that looks good for me. All right, so that is all about a show snake, and you can now see that our snake is now visible. So we have to now move to Anna function, which is a move snake. So this is a function we have to relax and actually do that step by stell because it's important. We know what actually happens while here. So let's go ahead and start immediately. Alright, so to move the snake, we have to start by creating the head of the snake because the snake will always have a head in order to move, and it's going to move in the direction we are moving, and then we eliminate the tail in order to be continuous. So to do that, go ahead and say Cs snack head is equal to we're going to do that in both X and Y xs In X axis, go ahead and say snack and then is going to start of zero in the zero delta X, right, plus the X veocity is moving in X direction with semicront comma and then we'll solu out for Y in Y i, then SNC stating from in zero dots Y, and plus moving in the Y velocity. Alright, so this is how the neck remove from the index zero S from the X at the speed of X axis, plus going to the right side. And if it's plus, it is going to right, and if it's minus, it's going to the left side. So that is the same for both X and Y axis. And we have to add this to our neck. We have to add this neck head to our snack. And in order to add that to our snack, go ahead and use the shift method for that. Go ahead and save this. And down here, I'm going to say snack dots on shift, then go ahead and add the snack head. So while the say snake head, and that is now added, you can see that it's actually moving in a direction, and that is continuous. Now, we're going to eliminate the toe after each move. And in order to do that, we have to first of all, check if the snake actually eat the food, right? So you can go ahead and also do that. So go ahead and see if using the if statement, go ahead and say if and if state meat. Fs. Now, if I want to remove the snake toe to eliminate that, our guy an says snake doctor Po. And for me to check this out, I'll go ahead and add force to this. Force and sieve. Now, you can see that the toil has been eliminated and our snake is moving very, very fine. Now, all I have to do is to check if the snake actually eat the food. Alright, because we have to actually check if the snake has eaten the food. And for us to do that, we go ahead and check, say snake. Starting from the zero index, that X is equal to X food. Chadivas X food in X direction and SNAC at index zero from the Y axis and check if it has eaten the food in the Y direction. So why food. Alright. Now, if Snake has eaten this food, we go ahead and say score is going to be plus equal one, means we're going to increment a score. And then we go ahead and say that the game score game called Del tile. Text content is going to be equal to Isn't ab tick. I'm going to say points or points you up. You have points is equal to what am I say? That is school. So as it eats increments, it's going to add to this and sieve. Alright, now we cannot be able to direct that and we cannot be able to change the position of the snake, alright? And now, any time it has eaten the food, we go ahead and build the food again. So anytime this food is eaten, we have to build the food every time the food is eaten. So wire and cord function, build food to but another food for the snake. Alright, so now we have to move to redirect the snack movement function in order to control how the snake move in order to eat this food because if we take out this, the snake moves to eating the food. And the function that we need now is the function of redirect in order to eat the food. So that is redirect snack move. Right. So this function is in respect to the key press because it's going to monitor the key press of the window if the archy is left, right up or down. So go in and say counts the he pressed and let that be equal to event that, uh key code, event key code and put the semicron at the end. Alright, so this is one of the things that we need. And in order to view that, we go ahead and say Console because I want to see the key press, go in and say console dot log, and then we go ahead and pass in the key press. And now I I also set this. Go here and inspect this and let's go to Console. And under Console can go ahead and click this and check out this. I want to check out these numbers. 38, that is up, down is 40. Left is 37, and right is 39. So I'll go ahead and get this, and I'm going to create a constant for all of them. So go ahead and delete this because I don't know I no longer need this. So go over here and I'm going to say Cs left and let's let left be equal to 37. That is 37. And Cs O, let me go with up and let up be equal to Tate it. And Cs right, and let that be a quarter to 39 and cost down and let that be a char to 40. Right, so we have to add this keys, so go ahead and close this. So I'm going to use this key to check when the snipe goes up and down. And to start, I'll go ahead and say, C move up. So let that be aud to moving up is and y exists in a negative direction. So Y velocity, equal to negative, unit size. So that is moving and moving up and cons move down is equal to y exists, positive veocity. So Y velocity is equal to unit size. So this is the positive. So press semicron at the end of all this. So that is a constant. And now for the left, that is X and Y exist. So in constant move right and let that be equal to on X at this X verocity and be equal to unit size. Press semicron at the end, and it remains the left const. Move left and let that be equal to X verocity, equal to negative unit sides. So that we actually move on opposite sides. So go ahead and save this. Now, we can still no longer press or we can still no press that. So all the moves will be a Boolean varies. So all these boolean, and we got to use a switch statement to examine this key press. In order to do that, we go ahead and move right in here and I'm going to use a switch statement for that. So go ahead and say switch. And what to start with is true. So if the key is actually pressed, then we go ahead and check the keys. So as equal to key pressed, and if that is equal to left, that means we are going to be moving left without moving right. So move left and not move must move right. So you are not going to be moving right, but you are going to be moving left. That is what this key is going to check. So it's good to move in X velocity equal to negative unit size. So all the we have examined or the cladea is or putting in each of the switch cases and a prisomcron at the end, and at this point, the Y velocity is going to be equal to zero. So prism cron at the end and break out. Alright, so we're ahead, and this is a swish. This has to come inside and go over and do the same for every order one. So to do the same for every other one, I'll go ahead and copy and pass this because they are always dissented, right? So go ahead and serve this Squied and remove this. Alright. So for this, okay, I have this already. I don't need to pass that. So for the X axis, isse click for the X axis, you move left. So if you move left, you're not moving right. If you are moving up, you are not moving down. If you're moving right, you are not moving left. And if you're moving down, you are no moving up. So this is what we just the play here using the switch statement. Alright? So that is why I just copy that and past that that in here. So let's go ahead and save this. You can go ahead and click on this and see that it's working fine. And the food is now being eaten and I earn a point. And you can see I've earned one point, I've earned two points, and I've earned three points. And I'm going to earn another point. And now, if that goes off, the game still continues. So on anytime this goes off, the game has to become a game overver. Alright, so if the snack touch it itself is going to be a GameOver, right? So I have to check out this and make sure that that actually works. So go ahead and close this function, let's go ahead and close this function and move over to game over function. Quiet close this and close this as well and move over to GameOver. Alright, so under the game over, we go ahead and check what we go out of the X axis or axis and won snckTuch it itself. So we ahead and say isn't a switch statement. Go ahead and say switch, and if that is actually true, so if that is actually true, then we go ahead and check the cases, that makes this to be true. So the first one is if snake actually goes out of the X axis on the left side. And for that, we go ahead and see. We have to check the sides. Here the snake goes snake on the zero axis X, say X less d zero. That means it's going on the left side, go ahead and say running equal to pause and the vessel crown at the end, and then we break out. Okay, so that same thing is applicable to every one of them, okay? So I'll go ahead and move this white inside. And then let's go ahead and check another case. And for this case is a case of snack moving on the left axis on the right side. So SNAC dot X greater than or equal to container width. That is on the right side of X, then running is going to be fat, and then we break out. 5. How to Build a Pong Game: I welcome you back again. Let's go ahead and learn how to do this game from scratch. So let's go ahead, our studies game. I check it out first to fall. So now I can be to move and I can go ahead and click. So I see that the game is actually good. Alright? So we can actually move this and scroll down. You can reduce the speed of that. I just made out to be fast. You can make that to be slow. And that is it. You can move up, you can move down. So and anytime you didn't get the ball, that is when the ball has got shot. Alright, so wow. So the speed is actually fast, and you can actually reduce the spin. So that is it for now. Let's go ahead and play this game and see how it is. So I'll go ahead and get rid of this and let's go ahead and move into IdexHGMO and then we go ahead and start off immediately. So first of alle I'm going to create a div and this dV, I'm going to give you a name and then the name of this the ID is going to be ma container. Alright, so inside this div, I'm going to create the canvas. And this canvas, I'm going to give it an ID and let the ID name be equal to game container. So that is here game will be, and I want to give the width to be equal to 450 and let the height the equal to 450. Alright, so go ahead and save that. Now, let's go ahead and give another dip tag. And here is going to be a score. So I'll go ahead and give that the zero colon zero. And I'm going to give this an ID, as well, so let the ID of this be equal to game score. Alright, now we are going to give one more day for this, and this Dave is going to be fully rested to restart the game. And to restart the game, I'll go ahead and give it an ID. That is a button, and the ID is going to be BTN rested. Alright, set this, and that is it right in here. So here is a canvas. And for that to be visible, we're going to head over to the side, the CSS. And inside here, I can go ahead and give the body to have a color. And I'm going to say that the background colour is equal to green, yellow, and that is why I have this. Now, let's go ahead and give the main container. And before then, let's go ahead and work on Canvas, the game container. So under this game container, go ahead and paste that, and I'll go ahead and give the border. Let the border be three pixel solid black. And that is it. Now, let's go ahead and align everything. So to align everything, I'll go ahead and get the main container ID. So the main container ID, go ahead and paste that, and we're going to sell text. Align and let the code center, and I've aligned everything. Now, I'll go ahead and for the core, let's go ahead and change the font size. So this core has an ID, and let's go ahead and get the ID. That is the games core. A name. I'll go ahead and paste that, and I'm going to change the font family. Let the font family be cussive and save that, and I'm going to increase the font size. So let the font size be equal to 75 pixel and saved. That is big enough. Now, I have one more that is the restart botin. Let's go ahead and work on the restart botin and go ahead and start by giving it the font family. So let the font family still be cussive just like we have for other ones. And then let's go ahead and give the font size. That is the font size and let the font size be equal to 20 pixel. And that is big. And now let's go ahead and give it the boda. I don't actually use boda, but I want this to have a boda and not be three pixel solid. Alright. That is sure so big. So I'm going to make the what to be equal to let me say 100 pixel. And that has moved to the end. So I went ahead and let me say the butter redish This why I'm going to make the butter reads to be like 50 pixel. And that is cool. Now, let's go ahead and center this. So I'm going to say Magin and let Magin be Ota. And that has gone back to its position. Now, if I get a mouse, I want it to be a pointer, so I'll go ahead and say Cuso. So I'm going to say uso and let my uso be pointer. Let's semicron at the end, and let's check it out. So it's my pointer. And that is all we need for now. And then we can now move right inside script JS and start off immediately. So right in the end, we're going to create so many constants in order to work with this. So the very first one is the game container. And this game container is the canvas. So I want to get the context of this Canvas. So I'm going to say game container and later be equal to documents that query selector, and then why ahead I'm asking the ID game container right in there. So why ahead I'm putting semicon at the end of that. And now let's go ahead and get it context. So I'm going to say consta CTXT is equal to game container Data, G Context. So that is Context. Alright, so that is a two D. Two D. Alright, now put a semicron at the end of that. And the next constant to to create is the games call. So why I'm copy the games qui D so that we always have everything in shape. So while pass this GamesceGames call is equal to documents that are query selector, and the ID is game selector. Sorry, games coll. I put the semicron at the end of that. And the next constant we're going to work on is the BTN restart. Squared and calculate, BTN restart. So Cs Bt restart, and that is equal to documents that query selector, and then go ahead and pass in BTN restart with semicron at the end. So now let's go ahead and store out game container size with some variables. So we're going to study game container side with some variables, and for that, go ahead and say const. Container weight. So Cs container weight is equal to game container and you hen copy that. That is game container dot Wit la semicolon at the end, and I'll desquie and do that for the height. Cost container height is equal to game container dot height. Alright, set that. Now, let's go ahead and set color attributes for the game property. So we're going to check out the color properties for all this. Let's go ahead and set that. So the first one is cons the container color, the color of this container. So I'll go ahead and say the container color, and let that be equal to green. Pre semicron at the end. Then the paddle, we have paddle, first, pale E, and pale B on both sides that are going to be knocking the ball. So quiet and C, cost the padleE color, pad the A color, and then let the color of pale A be blue. So put semicron at the end and cost pad will be color and let the color be equal to red play semicron at the end. And we're going to add the butter to the paddles. So const paddle powder and let that be equal to black. So plat semicron at the end and const. We're going to create a ball. So the ball color is going to be equal to white, ple semicron at the end. Then Cs ball the ball border color. So there's going to be a border around the ball, and that is going to be a black color, surplus semicron at the end. And then we're going to add the redis because the ball is a spherical or almost a circle, so we're going to calculate that in the diameter. So go ahead and see Cs bow redis bow release and let that be equal to 12.5. That is 25 resemiclon let's see conster paddle paddle speed. So let the speed that we use to move for the paddle be equal to 50. So you can always change the speed and let bow speed. So the boss speed will be determined as we have the paddle speed, so the boss speed is going to be equal to one and put a semicron at the end. So now let's go ahead and set the coordinate for X and Y for the ball. To set that, we'll go ahead and say, et X ball for X coordinate be equal to container width, divide by two, smecro and N, and let Y ball be equal to container height, divide by two. And then we're going to set the direction of the ball. That is the direction the ball is headed on both X and Y axis. So to set that, go and say, let X ball direction be equal to zero. So on X axis and let Y bow direction B equal to zero. Semicon so this is a direction. Quite correct that. Alright, now we have set that for X and where exists. Now, let's go ahead and set the player's initial scores. So at initial stage, let player score A B equal to zero, and for player B, be equal to zero. So player A score is equal to zero. And let let B B equals zero. Alright. Now, let's go ahead and define let's go ahead and define the two padle objects. That is the objects that is going to be here. So it's going to start from the first that is at coordinate zero and zero, and that is the left corner here, and it's going to start also at the right corner at the end of displace. Now, to go ahead and do that, we go ahead and say, let's paddle let paddle A B equal to let me say the width is going to be 25 and let the height be equal to 100. Alright, now that is a conner go ahead and pull the conner because we are determining the width and height. So we're going to set the starting X and Y coordinates for this, and I want to set both of them to zero so that it can actually start at the end. And to do that, to go ahead and say that X is zero. Commer Y is zero. Now, go ahead and do the same for pale B. Go ahead and copy this? And paste. So we want to change this to pale B. Now for the X and for the width and height, they're going to be the same width and height. Now, but the coordinates, this is going to start at the beginning, zero and zero, but this is going to start at the down at the right corner side. So how can you be able to do that? For us to do that, we're going to set the starting and the starting of X and Y coordinate to the end of this opposite side. And the other way we can be able to do that is by minusing the container size -25 from the container size and 100 from the container size. And to do that, X is going to be equal to container width -25 and Y is going to be equal to container height -100. And in that way, we have set that. Now, we are done with cleaning everything, and now the only thing that remaining is we have to move ahead and add vent list now to the window itself an event listener to the restart button. And once we do that, we'll go ahead and declare our functions. So for the window, I'll go ahead and say window event listener. And the type of listener is going to be a key, a key down so that anytime we press the key, it's going to listen to that. So key down, and anytime we click on that, we're going to redirect a function that is known as redirect pre direct ball move. So the ball we moved to another position, and then the restart button, le and C BTN restat that's add invent sterner. And then let's go ahead and add a click vent to this. So that is a click vent. And anytime we click on that, we go ahead and call Game restart, function. Alright, now, the game or Start function, we can go ahead and create another function called start game, which is going to be the main function right in here. So now we can now go ahead and start creating the functions that is going to be used, and the very first function is going to be function known as start game. And this we're going to determine the opening of this game. So the next function we create after this is a function known as the next step. So function next step, we create this ahead and put this inside. And the next function we create is a function known as a clear container. So you can clear clear container. Then after that, we go ahead and creates show paddle. So the next function is a function known as show paddle. I show paddles. Let's say padles. So the next function we're going to create is a function that is known as a great ball. Great ball. Saturday we create another function and the function is going to be move ball. So the next one show I'm going to create is a function known as a show ball. After the warhead, I create another function known as a bow collision. So to know when the ball has collide. But this show boll, we're going to add a the parameter and the parameter is going to take is the X ball and the Y ball. So we're going to show the ball in both X and Y axis and then go ahead and create another function and the function is going to be the redirect ball move. So redirect ball move is going to take an invent parameter because it's going to check when the ball when the keypad has been clicked and what har creates another function, and function is going to be count scalls. So this is going to determine our scores. It's going to always count the scores for us. And after then we go ahead and round it up with a GameStart function. So game rest that. Alright, so go ahead and add a semicron end of all this. So for each of them, I'm going to add a semicron end of every one of them. And that is it. So go ahead and set that. So now we have done all this. The next thing we're going to do now is to move into the show paddle function. So this is the very first function we're going to work on. After then, go ahead and start working on every other one. So for the show paddle, we go ahead and use the Cava context. So CTX is going to CTX data struck that stroke sty and let that be equal to paddle boda. Paddle boda, with the semicon at the end. Now, let's go ahead and show paddle E by making it visible. And to do that, we're going to fill in the color of that. So CTX, that's paddle E, but before then it's quite CF sty so fi tie equal to paddle A color. All right, so put a semicolon at the end. And the first two arguments are the X and Y coordinate of both the top left corner of the rectangle. And then what we have to do together CTX few rectangle because it's going to be a rectangle. And then for pale E, pale E dot X, co, then PadoEY then we go ahead and see paddle E, that's the wheat. Go ahead and check the wheat and paddle E, that's the height. All right, so let's go ahead and save this. Let's go ahead and go ahead and they show that there is no error after we've saved. And let's go check there's an error. S cannot properties of the null, which is already gets context. And that is in line two. So go over here, and that says, game container dot Get context. So what pen is that all these things are ID from index dot HMO. So for the IDs, we're going to add in hash tag. For every one of them, go ahead and add hashtag for the BTN and this wire and save that, and the error is now cleared. Alright, now we have created this paddle, so have to go ahead and check it out. So for us to test it, I have to simply go ahead and copy the show paddle. I'm going to temporarily keep this for here, I'll remove that letter and go ahead of the semicon and check this out. So now have this paddle show you right in here. Okay, so if that's cool, the next thing we have to do is to go ahead and create the next puddle for this. And to create the next puddle, we're going to go ahead and go right in here and say, let's go ahead and add boda O, first of all, tsque cpu this. And then press this, and I'm going to change this to paddle B. And that is wild safe. Oh, that is paddle A. So I have to change all the Bs. So anywhere you see A, you change that to B, pale B. And this is a Padle B, and this is padle B, and this is paddle B. And this is why I saved it. And now this is Padle B, showing right in here and paddle A showing right in here. So you can say that this pad this paddle here, we can go ahead and add a boda for that because we created a bottle so there will be a black butter around it. Showing that that is a pad. And for us to do that, all I have to do is to go over here and I'm going to copy this and I'm going to paste that here. And I'm going to change this fuel red. I'm going to change it to stroke red and save, and I've added a boa right in the air. And for this, I'll still go ahead and copy this. And I'm going to paste that, and I'm going to change the field to stroke. And save. Now there's a bottom here. Hope that is cool. So now we can go ahead and eliminate the show paddle that we've added here, and we now move into the game start function proper. So let's go ahead and get rid of this. And if I get rid of that and save, we have removed the paddles, and all I have to do is to go into the game set function or the start game function. And here I wire call the Crete bow function and pre semicron at end, and I'll go ahead and call the next step function and psemicron at end. Alright, so now you still want to see the paddle. All I have to do is to go ahead and move right inside the next step function in order to show that. So over here, I'm going to set out the timeout. And by the timeout function, I'm going to use an arrow function for that. And right in here, I'll go ahead and uh Start to call them one by one. And the very function I'm going to call is the clack antenna so that the antenna will be played. After our antenna, the next function we call is let me say the show paddle quit and say show paddles function, we head, and say, the next function is going to be move ball function. And the next function is show bow and the just show ball has an argument of X ball and Y ball and put a semicron at the end. And then the next function is the bow collision function. Pre semicolon. And after then, we call back our next step function and pre semicolon, so it will repeat this process again. And the time interval for all this is 15 millisecond. So you go ahead and add that. So 15 millisecond is what it takes. And if I serve this, I have this function now showing. So that is it for now. Now we can now go ahead and move into the Clay container function. And right inside the clay container function, all I have to do is to draw the container or the game container. And for that, we all just need to fill that with the green colour. And to do that, I go ahead and get a Comtex that is a CtX and that few stay. And little few stay be equal to container that is container color. Right, so let me go back to this container colour and see, I should put an R right in here and save that. So go back here and say container color. That is the color I want to insert there. And for us to get that a guy and say CTX that feel wrecked. And I'm one of you that both in X exists and in Y exists and that throughout the container width and height. So it will be rammed everywhere. Container height as well. So open a semicron at the end, and let's see how this works. Sept this, and now you can see that I have filled in the container, and that is what I need. I can go ahead and cos these functions that I have created so that they will not just be intimidating us. Now, the next function we are going to work on is the redirect bow function. So you can go down here and open the redirect bow function. So you can go ahead and work on that. So one of the re direct ball move function on the very first thing I have to do is to go ahead and get my key codes. Go right in here and inspet this element. And over here, we're going to get our key codes. But before then I have to go right inside the air and I'm going to say counts, keypress. And let it be a code to event that key code. Alright, sa Micron at end, and I'm going to use console log to get that. So go ahead and pass in key price. Resamekron end and save this. Now, over here, I'm going to use the A on your keyboard, then the Z because both of them are closed, and then I'm going to use the arrow up and down for the side. So for the blue paddle, for the blue paddle, I'm going to use the A and Z to control that up and down. Then for the red paddle, I'm going to use the up and down key. So over here, I'm going to click on A and A is 65. I'm going to click on Z and Z is 90. Then for the up and donkey, I'm going to click the up, and that is that eight. I'm going to click down, and that is 40. Now I'll go back inside the and let's go ahead and put that down. So four Cs up paddle A. I'll call it up paddle A. Letter B equal to 65, and then counts down paddle A, let that be equal to 90. Then four Cs up paddle B. Let that be equal to 38. And then four cans down paddle B. Let that be equal to 40 and put a semicron at the end. Now, I've gotten the key code. I'll go ahead and close this. I no longer need that. Then I can go ahead and remove the console dot log because I just use that to get the key codes. Alright, so let's go ahead. I use a swish statement to give functionalities to these keys because that is how we can be able to work with that. So I'll go ahead and I'm going say swish. And then I'm going to sell when the key is pressed, pass in that has the argument, and then go ahead and check the cases. So case first case is the up paddle A. Pass this or pale A when you press the key A on your keyboard. So to ensure we do not go outside the container, we are going to use the If statement to hold the paddle together, right? So to do that, I'll go ahead and see if and I'm going to say paddle E. But before that, let's go ahead and show you so you come to see how this actually works because I want that to go outside, and then I'm going to put that back for you inside. So paddle A Y because it's going under Y axis only, it's not going towards X axis. It's going up and down. So if that is paddle A, and I'm going to say route is minus equal to paddle speed, then go ahead and break out. And then you go ahead and square it I'm captivis And I'm going to look for dip that's for Ks down PadleE. So is down PadleE. Let's square head and C. Paddle AY. Paddle E dot Y plus equal to Pado speed. Press semicron end of that, and now you break out. So pres semiclon. I'll go ahead and copy these two things, and I'm going to do the same thing for the B. That is for Pado B. So go ahead and put this down and do that immediately. So I just have to change only the Bs and square it and save di. So once it's safe, you can go back here and I'm going to use the Z body. You can see that is going down. What is going below, and if I go up, is going above. And for the up body, the other side that is for B, is quiet check it out as well. So you can go ahead and check out this. Let's go ahead and see what happens. We forgot to do one more change, and that is paddle B. And this is also Padle B. Alright, save this and go back here and use up key can sular. That is now going outside. So that's what I want to tell you, you have to use E statement to hold this. And to use the E statement, all I have to do is off to go right inside here. And for each of the case, I'm going to use an E statement to ensure that the paddle don't go outside, cut this off, and I'm going to say I paddle if part of A, that's Y is greater than zero, then we sure that that doesn't go outside and save this. And now for the down, I go ahead, I cut this as well. And I'm going to say, I if condition and say if paddle A dot Y is less than or equal to the container height minus paddle A dot height. So in this way, we ensure that that doesn't go outside. I can go ahead and save this. Now let's go back and check A. And this is A, it doesn't go down. It doesn't go above. It doesn't go below, it doesn't go above. So do the same thing for B. So for B, I'll still go ahead and just copy everything here, and I'll whitehead and place that here. W I place that, and all I have to change is puddle B. Pad will B. Alright, go ahead and save this. Now can go ahead and check it out. So you can see it doesn't go out both. Now, we do exactly the same thing for this, go ahead and there, copy everything, and I'll go ahead and sorry, I'm going to copy everything here, and I'll come back here and place that's right inside here. So I'm going to change everything to pad will B, change everything to pad will B. And save. And now we can go ahead and check it out. You can see that. It doesn't go above, it doesn't go below. So the same thing is for A, and I hope that's cool. So now let's go ahead and move over to show ball function and work on that. So go ahead and close this and let's go ahead and move over to show ball, right. Alright, so on this function, the show ball functional, we're going to start by filling the circular shape of the ball and also calculating the ball diameter. And go ahead and see context. Contact data f si and let there be equal to the bow colour. So the bow colour and the Bcl is white, and then Gana C contacts Data strok stroke si and let there be equal to the bow boda, boba colo which is black. And then we go ahead and see contacts that lime w and let the line width be equal to two. I put a semicron at the end of that. Now, let's go ahead and draw the ball part. To draw the ball part to dial and say contexts that begin. Begin pads and let begin pads where semicoral end. So go ahead and C context dot. So we're going to draw the diameter using the diameter, we're going to draw the secular shape of the bow. So go ahead and C X ball from the X coordinates and Y bow Y coordinates using the ball reduce. So bow reduce, then zero starts from the center, then multiply the radius. That is the diameter is what we're calculating that is two Pi. What supply mat dots Pi. Alright, so that is the formula for the diameter. And put a semicron at the end of date. And now let's go ahead and show the ball inside the game container. And to do that, go ahead and say CTX that are stroke **** stroke and then preso cron at the end, and then CTX, that is the context that's fuel and prisoicron at the end and save this. And now you can see that our ball is now shown inside the container. Hope that is cool. Now we have ne to share this ball, when they have not created the ball so that the ball can actually start work. Now, we have to save this and move over to create Ball. So go over to create Ball and this is a create ball, go ahead and open up this and the square ahead and start off immediately. Alright, so first of all, let's assume now creating the ball, then we're going to set our ballpeed to be equal to one. So I'm going to do this fall before I forget that. So let me say the ball speed is going to be equal to one. Alright, now let's go ahead and create the ball starting from the X axis, and using the If statement, I'm going to see if Matt round. And it's going to round the Rundown Nava, Mats Random. Matt Random, and then let this equal to one. Alright, so this part, we give a random number 0-1. And let's go ahead and move the ball to the right. And to move the ball to the right, we go ahead and say that X ball in the X direction that is X ball direction is going to be equal to one and put the semicron at the end. Else, we are going to move the ball to the left. So we go ahead and say X. Let me go ahead and say else. Else ball direction is going to be equal to minus one that is most to the left. Alright, so I want to do exactly the same thing for Y. So for Y, we can still go ahead and copy whatever we have here we go ahead and say if then mat that's round and it's going to be a random number. So mat that's random. So this is a random mat that's random and let that be equal to one. So we go ahead and move that ball to the right and we go ahead and C Y bow to the Y direction up, equal to minus one, where semicron at the end. So it may not be equal to one first where semicron at the end, else, then y bow in direction is equal to minus s. Alright, so cretiground at the end. So now we have created a ball. We crect a new ball. We start it from the middle of the display. And to do that, we go ahead and say, Xbll is equal to container wheat. X y equal to container wheat, divide by two, resamiclon and Y bow is equal to container height divided by two, re semicolon. Now, we're going to call this X and Y and pass that into the show ball. So while I say show bool, pass that as adumdEXbw and Y bow. R semicron at the end and serve this. Alright, so that is all we need to create our ball. So now that I've created our ball, we are going to lab this ball to move. The first time is to shoot the ball. Now we've created the ball to move in directions. And for that ball to move, we're going to move into the move ball function. So go right inside the. Let's move our ball. Let's start by moving the ball to the X direction. So I'm going to say X ball is equal to the ball speed times the bow direction, X bow direction and go ahead and put a semicolon. Now, I set this, so I can see how it moves. So you can see the bow actually moves to the X direction. Now, I want the ball to also move to the Y direction. So let's go higher than say, Y bow and let this be equal to bow bow speed, multiply by b direction and serve this. Now, let's serve this. So we are fortunes to have the ball in X and Y. But the ball need to move. And for that to actually spin and move because it either way goes to the end without moving. Che at Xbll plus echo and Y boll plus equal. So here say X ball, plus ecori and Ybll plus ecor and sip this. Let's check it out. Alright, so you can see it is now moving gradually, and that is why refresh your page again, and it can move in different directions. And refresh your page, it's always moving in different directions, and that is what we need. So the ball can always move in different directions. Alright, so anytime you refresh your page, the ball actually moves. Now, the ball moves and goes out of the box. But I want this ball to actually collide. Anytime it hits on top of this, it goes back until it hits here, and then there is a goal. So if it heats down, it collides and go back again. So for the up and down, you're going to monitor the up and down so that anytime it heats on up, it comes back and bounces back. And if it heats down, it bounces back. And for us to do that, we're going to move into the bow collision function. So go under bow collision function let's get started. First to determine when the ball hits the up and not it down. So I want to do that one step at a time. First to determine when the ball hits the up, we are going to say I bow. So if Y bow, because that is Y direction is less than or equals zero plus the bow redis. Where the bow radius. So we added the ball reduce because we placed the ball on the center of X and Y. So we go ahead and say, Y bow or waybar direction, multiply EF code to minus one. All right, go ahead and put a semicron at the end of that and save. So let's check if it's going to hit on that. So you can see that actually bounced. All right, for us to check when it heats it down, we go ahead and say if you can go ahead and copy this whiles quiet and do that step by step. So go ahead and see if Y bow is greater than or equal to the container height minus the ball greatest. So at this point, we go ahead and see why direction multiply equal to minus one. I place a micron at the end and save this. Now, let's check if it hits what I to bounce and you can see that actually bounced. Alright now, let's check when the ball hits on the x axis. So if it hits on the left corner of the X axis. So for that, we go ahead and say if X ball, so if X ball is less than or equal to zero, then we go ahead and say, players call Okay, let's play a B call because this is a player B. So if it goes the A means player B has coded and if it cos this side and touches the X, as that means player A has code. So player B's core is going to be plus equal one. So add that in player B. He has core, and then we update our Counts core function. So counts calls we update it, add plus one to that, and then we create a new ball. And then we go ahead, create a new ball function, the warhead and return this. Alright, so let's go ahead and save this. I want that to move to this other corner. So let's check it out and see that. So I see that moves, and that returns back again. Alright, now for us to do that so that it calories return from the other side, we can go ahead and copy everything here and I'll go ahead and pass that. So all I need to change now is, I'll go ahead and say, I ball is greater than or equal to the container weight. Then player A has code and no longer player B. So player A has code and go ahead and perform every or that function and check it out. So that's that's again. So you can also refresh. Now check the ends going there. What did you bounce? Yes. That is okay. Now, let's bounce off the ball when it hits the paddle. So now if this ball hits the paddle, it doesn't bounce. Check it out. It's most out. So let's go ahead and work on that because it's very portant. So for that to actually take effect, we go ahead and say, I X ball is less than or equal to paddle E. Let's work with this puddle right in here. That is the blue puddle is paddle E, is less than or equal to paddle E dot X. Plus PadleE W plus bow radius. So this is for the X axis, right? Now, we go ahead and do that for the Y axis. So we go ahead and say, if we understand this statement, if Y bull is greater than padleE. So a ball is greater than paddle E Y and Y ball is less than paddle E Y. Paddle A height. So we go ahead and say, bull is equal to paddle E X plus paddle E Wt. Then B ave this end up with a semicort end. So the ball and everything is okay, let's go ahead and see if the ball gets to this point, it's good to move back, then we go ahead and add E boll direction is multiply the equal to Mona son and put the semicolon. And then cord the bow speed again. Bow speed is plus equal one, so it can increase the bow speed. Right. So any time it hits to increase the ball speed again. Check it out. You can see that actually hit the paddle. And we're going to do that. So also hit the paddle B. So it hits Padle A and gets to paddle B and nothing happens. So for that to actually happen, we're going to go ahead and copy everything that we have right in here can go ahead and copy everything I have right in here and go ahead and pass that. All I have to do is I have to say X paddle is greater than or equal to Padle B. Now I'm going to change everything to Padle B, padleB X, and this is going to be equal to Padlet Wit again, is just going to be padleBt X minus the radius. Alright, so now go ahead and say I Y puddle is greater than paddle B and Y paddle is less than or equal to paddle B dot Y plus Pale B dot h. So put a semicron here and Y and say X ball is equal to paddle B X plus Oh, anywhere will have a plus guide and put in minus, right? So go ahead and say this is minus release. Alright. So that is all we need for this. And we can go ahead and save this and check it out. And the show, let's go ahead and check. All right, actually move in. Check it bounced off. Now, that actually gets stuck there. So if this actually gets stuck, we have to put this back. This is a paddle B. There's a mistake right in here. That is paddle B X is minus for both reads. Save this and let's check it out. So that bounces off and is coming down. They see it now bounces and check it out. That bounces off. And I can move paddle A, and I can move Padle B. And now I can play the game. So you see each time it bounces, uh the speed increases. So the speed actually increases because it said ball speed plus equal one. So if you say boll speed equal to both speed, equal to one, then it's going to remain on that speed. So anytime it bounces, the speed actually increases, and that is all we need. Now, anytime it hits on the X exists on either of them. So one of them has to be a score. Alright, so going to move right inside the count scores to get the score increated for each of the players. Alright. So under the counts core function, all we have to go ahead and do is to go ahead and see game score. Games cool that text content and letter D equal to use a Bati and I'm going to C layer A, clear Acre. Then I'll go ahead on the C play a B score. And this is all we need for the game score and put 6. How to Build a Tic Tac Toe Game: Alright, so in this video, we go ahead and learn how to create the Tik tacto game from scratch. So right before us is a TiktacteGame, and you can start by the ton of X. Let me say X, ton of O. You can choose any part, and anyone that wins is now a win. So game is a draw. We can restart the game. Let's squire and say that is a game, and still the game is draw, esquire and it one more time. Oh, now X has one. So X is actually dirgna. So anyone that is align in any part, maybe, and our first row, second row, third row or Digan al has one, so X has one. You can now restart the game and start again. Let's go ahead and start off immediately and then how to create this diktagTGame. So first of all, I move right inside my index or testimo and I warhead and create a dik tag, and this dig tag is going to be the container that is going to contain everything. So I'll go ahead and give it an ID, and I'll let the ID name be a container. So that is container, that is the name. And I can give that to be the main container, right? Let's qui and say that is main container. Because I'm going to create some other ones. So let me go ahead and say that is a main container. And right inside A, we can go ahead and create another deal. Or, first of all, I'll go ahead and give the name of the game and let the name be tick. Tack two and save that, T tack two. And then just go ahead and create some other div for the cells. So DV and this div is going to contain the cells. So I'll go ahead and I give it an ID and let the ID be equal to game cells. Alright. So that is where our X and O will actually appear, and then go ahead and give in the cells. So let's go ahead and say, I'll go ahead and give in the cells for X and O, and I'm going to make that to be let go ahead and do the class first and let the class name be equal to. And no go ahead and give the index, index of, let me say Oh. So that is going to be of nine cells. So copy this guy and pase this one, two, three, four, five, six, seven, eight, and nine. Now, it's going to start from index zero, so index one, Index two, Index three, index four, index five, index six, seven, and eight. Alright, so the cells are, Okay, now, now let's go ahead and put it in against status to show who wins and who has lost. So to show who's t and who wins. So go ahead and say two put the H two over ahead and give it an ID and let the ID be equal to game status. Okay. And then I'm going to add a button for a restart. So the restart is going to be restart. And let me give an ID as well. So let the ID be equal to BTN, grit that. Alright, so save this. That is all I need for now. Now, let's qihead and move right inside the title CSS. Alright, so all of the CSAs, I'm going to start with the cells. So go ahead and say the cells, which are the cells which you created right in here. So we're going to work on each of them. And that I'm going to make the width of the cell to be 80 pixel and let the height of the cell be 80 pixel and go ahead and give it a boda. Right? So why I give you the butter and let the butter be cut to three pig zel. And now we have corrected that, but is now showing, so let's go ahead and make the butter to be solid so it can be able to show, and you can see that it's not showing. Alright, now we want to lift that for now, and let's make it to be a grid because you can see that actually went down and want that to be three nines of three gross and three cones. So go ahead and say that the game cells, which is this, go ahead and copy this, the ID game cells, and go ahead and pass that. And I'm going to say that the display is going to be a grid form and safe. And now we have to give the grid type. So the grid template is going to be a col and it's going to be a repeat colon of three by Wal. And now we have that. Now, let's go ahead and make the weeds of dat C go ahead and make the weeds to be like a 20 2222 pixels, and that is it. Alright, so I'm going to make the margin to be auto. So go ahead and make the margin to be auto, and it has now moved to the center. Alright, now we are done this. So we can go ahead and make every one of them to be tick because you can see on the lines are tick. So to do that, I'll go back to my cells and I'm going to so let me say that the box shadow is going to be zero, zero, zero, and three pixels because that boda is three pixels. So go ahead and make that to be three pixels. Alright, and save. So every one of them is now Okay. So what if we go ahead and center everything. So center everything, I'll go and take the container ID, and I'll go back right in here. So let me go right here and paste that for the main container. And let's go ahead and say text a line and let everything be center. So everything I move to the center now. And now if I go right inside here and put in X and let me say X, and oh, I'm going to get rid of this, right? I just want that to see how that we look inside. So X and Oh, you can see how small they are. So we want to work on them. And for that, I'll go back to my sit CSS, and I'll go right inside the cell, and I'm going to say that the line height is going to be cut to seven to five pixel and save it. And now it has gone to the center and let's go ahead and give the font size. Let the font size be equal to 70 pixel, and that is now big enough. Alright. Okay, so what if we change the style of this? So change the style, let everything have different tie. So let me go back inside A and make this tie of all the text to change. And for that, I'm going to see let the font family be equal to cusive thigh and now the X and O have look in a shape that looks good for this game. Alright, so if I bring my mouse to click on each of the cell, I want that to be a pointer. So to do that, I'll go right inside the cells, and I'm going to say that the usar is going to be a pointer. And now if I gain my quisal you can see that it is now a pointer. And that is all we need for the CSS. So go ahead and set this and let's jump into the script black Js and start off immediately. So we're going to start by making references to our Index dot HTML. And some of them, which we want to make reference to is a cell, and then the games tattoos and the tan rested. So for the cells, I buy and copy this, and I'll go NEA because they have so many cells and want to use or selector o. So I can be able to work with every one of them. So const s is going to be equal to document doctor query selector all. And remember, we just copy the class, and a class constituted dot. So go ahead and paste that guidance says so, and that is the idea of each of the cells. So the next one we're going to work on is the game status. Square and copy this. The game status, we always appear over here to show us whose tn is it to play and whether the game is a win or a draw. Now, I ahead and say const, and a guy on PST game status is going to equal to documents that query selector. And now it's just going to query selector and not querySelector O. And that is an ID, and it goes the hash tag and PS that. So this is a constant, so const. Alright, so the next one, go ahead and reunGrn at the end. The next one is the BT restart, qui a copy this. And I'm going to say con BT restart is equal to document that query selector, and then our head and has that right in there. Now we have make references to each of these. The next one is we're going to make a reference to the condition that win. If we have X all over, and throughout role, that means X has one. If we have zero all over, that means O or zero has actually one. So to do that, we're going to create another constant for the wind conditions. So const, this guy don't say const wind conditions. So swing conditions and let that be equal to array. The reason why we are using an array is because it is an array of index numbers, right? So you can only use an array to actually track this, and then we're going to check down within the rows, the columns. So we're going to take the first row, second row, third row, then first colum, second column third column. Then also going to check for diagonal. So two diagonals, one and two. So for the first row, which is zero, one, two, Remember that our cells actually start 01-8. So that is nine. Now, we go ahead and start immediately. So for the first row, it's going to be zero, one, two. Sorry, zero, one, two, and the comma. The second row is going to be equal to three, four and five. So go ahead and do the same thing right in here. All right. Now the next row is going to be 678. So di and puts it down, that is 678. And then for the columns, now we check the columns, and that is going to be zero, three and six, zero, three and six. So the next column we have is going to be, uh one, four and seven, one, four and seven. So the next one we have is going to be go to two, five and eight, two, five and eight. So the next one we have is the diagonals. We are done. The first one is the rows. The next one is the columns, then the diagonal. So we're going to start with zero, four and eight. That is zero, four and eight. Sole semi coma. Then we have one diagonal remaining, and that is two, four and six. That is a 24 and six. So that is all we need for the weak conditions. So whenever it goes in rows or columns, depending on which of the character that is matched, then that character has one, either X or zero. Alright, now, let's go ahead and create a real of placeholders. So first of all, we're going to play everything inside here. So to play everything inside here, I'm going to say, let let options be equal to empty. So each of the role is going to be empty and have nine rules, one, two, three, four, five, six, seven, eight, and nine. So go ahead and say, each of the rules is going to be empty. Alright, so I have this ensure that we are making everything to be empty. So we count it one, two, three, four, five, six, seven, eight, so man one. And that is it. Go ahead and play some Micron at the end of that. So that is all we need for the options to play the placeholders and make sure that everything is zero. Now, we're going to start with X. So the first player is going to be X. L so I can go ahead and give that to say Let let current player be equal to X. Alright, so current player is going to be equal to X, and the next player is going to be quote to zero, right? So I'll go ahead and say current player qu to X, and let's initialize the running, say, the starting of this game to be quart to force until we click on the cell. So go ahead and say, let running the ecor to force. So the game has not actually started until that game is initialized and the sales button is clicked. So we're going to create some functions for this. So the function we're going to create three or let me say some functions, and the first function is going to be for initialization. So let me go ahead and say function and let the function name be initialize game. Alright, so initialized game. So that is very fast function, and it takes no parameter. And the next function is the clicking of the cells. So Guan C, function, and let the function name be equal to click so. And this also takes no parameter. Then we have some other functions to create like the updating of the cell. So guile and C function and let the function name be equal to let me see. So update. And for the cell updates, so each time we click on that, we're going to refer to the cells that is parameter, and then the index of the cell that was actually clicked. So these are the two parameters that I'm going to enter right in the. And now the next function is the changing of a player. So if I click on X, so the next player is going to be O and next play is going to be X, so I'm going to create a function that will change the players. So quiet and say change player, right? So that is a change. Alright, so the next one is to check who actually wins. So that is a function for a winner. So function name is going to be check winner. Alright, so Graha I removed this. The taken parameter. And the last function I'm going to create is to restart this game. So to restart this game a while and say, function, and then the name is going to be game restate. And this also techno parameter. Go ahead and save this. Now, I'll start with initialization of this game. So to initialize a game, all we have to do is to add event listener to the cells, and to add event listener to the cells in order to know when they're being clicked, I'll go ahead and remove the X and the O. I we'll remove this as well, and let me go ahead and save this, so that has gone off. So I'll bow this IDA under initialization, and I'm going to see I'm going to say cells that all each. So remember, we have so many cells, so I'm going to refer to all of them, and I'm going to use a variable created. So and using a call an adder function, I'm going to say so data add invent listener. And the type of listener, I'm going to add is going to be a click listener, and we go ahead and use this as a callback that is a clicksL to know when the cell has been clicked and then put a semicrn at the end of that. And now let's go ahead and add invent listener to the Restart boding. So to do that, I Y and say BTN or restat add invent listener. And then the type of listener is still going to be a click type of listener. And whenever I click on that, I wet ahead and call the game restatFunction. So go ahead and pass that right in here and put a semicron at the end of that. And then I have one more, which is to show the current player that is actually here. And because you have the current player to be X, all I have to do is I go ahead and see game status that text content and let that be equal to. You backtick guide and say it is a tone for the current player. So I'll go ahead and put a variable current layer. And let's go ahead and put the semicron at the end. Now, if we save this, let's cq and check it out. So before we can be able to see whatever happens here, we have to call this function coordination lies, and I'll go ahead and paste that and call this function, and that is the only function we have to call. And now you can see term of X because we have given the game status. Now, all I have to do again is to monitor the cells and know when they're being clicked. So to monitor the cells, I'll go right inside here and I'm going to say counts, index. So I want to check the index of each of the cell. Remember that they're an array, and I'm going to say these data get attribute. So I want to use the G attribute to know when each of the index has been clicked, and I'm going to pass the cell index right in here. So with this, we can be able to monitor where you click on any of the cells. And if the we have already made all the cells to be empty. So I'm going to check if they're actually empty. So or not, so I'll guide and see if the options of the S index is not empty, that means is not empty or the running is not false. The running is also false. Well, before the running can be checked if it is true, have to go back to initialization and set or run to be true. So go back here and set running to be equal to true. And now can now monitor if running is true or false. Alright. Now, if the running is false, and the cells if running is not false, that means it's running. And if all the cells are not empty, that means it has been clicked, then we turn nothing. Alright, else, we go ahead and update the cell. So that means it is running and it is not empty, then the cell has to be update yet. So we go ahead and co this function, which is a update. So call this function calls update, and we're going to update the cell, and we're going to update the index. So to update the cell, we don't go the particular cell. We're going to just put in this. Refining to that particular cell that was clicked. And then with the cell index of that and go ahead and put a semicron at the end. And now I can go ahead and save this wir click on this. And now we have all this. So in order to get this to actually click, we're going to use the update cell. So go back to update cell now and now add in the options. So options and then give the index that is being clicked and let that be equal to the current player who clicked the cell and let the cell that text contains the equal to the current player and put a semicon at the end. Now, check this out. X X X X X X X X X. Alright. So we don't have any other player clicking on this except X, and our Start button is actually walking at the moment because you have not written anything. Now we have to change the players to X and O. And to change that, I'll go over to function called change player, and I'll go right inside here and I'm going to say current player is going to be equal to Current player equal to X. So X is actually the default. And if X has played, then we actually check if X has played, and then we enter the next player to be an O. So go ahead and enter the next player to be an O. So X, I O has played, then revert this back to X and put a semicron at the end. And now go ahead and save and let's check this out. Well, before we check that out, you go ahead and take your change player and put that right inside under the clicksll but one thing is that we're going to delete this, right? So put this and check it out. X O, X O, X O, X O X. Alright. Now, at this point, X has won here. Well, we don't have the win condition actually checked. The winner or the check winner function has not been worked on. So we want this plata also change. If I click on X, I want this ton of O so that O can actually come over. Ton of X, ton of O, I want this to also change. And to do that, I'll go ahead and copy these go ahead and say game status is equal to ton of any one of them. So I'll go ahead and copy this, and I'll go right inside here and I'm going to paste that as well. So I don't need to do any other thing. So whatever I do this is going to check which of the player is going to click. So X, now ton of O. Ton of X. Ton of O. Ton of X, ton of O. Ton of X, ton of O, ton of X. Alright. Now, that is cool. I'll go ahead and I'll remove the change player. Please ensure you delete this because if you don't do that, it's going to have a problem later. So we don't have the change player working anymore, and that is where I need. So now that I have removed this, we go ahead and move right inside the winner so can give to know who actually won. Alright? And for the winner, let's go ahead and say, let's winner be equal to force. So at the start of the game, there is no winner at the moment. Now, let's go ahead and use the metrics of our win condition. Over here, so this week condition, we're going to use a follow hoop to check each of these cod rooms and rows and they go down to know if there is a winner. And to do that, I'm go ahead and say, using the follop I'm going to see four. Let's I equal to zero. So starting from the first index, and I'm going to see I less than the win conditions that length. Remember that they're going to check all the length, and we have about many of them. And then the I increment. Alright, so SLA, we're going to each read through each of the array. But first, we have to store each array using a template variable. To store each of those array, I'm going to use a ans condition. So ans condition is going to be equal to wind conditions, and there will pass the value of I inside the semicolon. So for the first array, that is, let me say it is st Cl A, that is equal to options. Then we pass in the condition right in there, and that is store the first index or the first array and we set that as index zero. Put a Micron at the end, and we're going to do the same siquied and copy this for the remaining two arrays. Go ahead and copy this and go ahead and passe that and let this be for cell B. And the index is going to be one and let the next one be cell C, and the index is going to be two. Alright, now we have to check if the arrays or the empty spaces in each of the three rows that we have actually stored. Now to check that, I'm going to use an instatement to do that. So I'll go ahead and say if cell A is actually equated empty. So you have to actually ensure that none of the cell is empty. So A is equal to empty or so B equal to empty or so C equal to empty. Now we're head on the S if there is a space, then we go ahead and continue and that keep the tration, then we simply go ahead and say, continue. Now, if there is no space, it means that all the cells are filled up, right? It means that all the cells are filled up and we can actually go ahead and ensure that all the characters are the same in order to have a winner. In order to have a winner, we go ahead and say, I if so A is actually equal to so B, and so V is also equal to so C. That is when a winner will emerge. Then go ahead and say winner equal to true, rest cron, then we break out, meaning that we have found a winner and serve this. So at the moment, we supposed to remain inside the follow hoop. I didn't know when I shift outside the follo. Go ahead and call this and put that because we are checking out ourselves, which is this arrays. So I didn't know I've gone outside the array and outside the follop and I was in an error for the continue and break statement. Now, if winner is true, so we have to update the current player and then stop the game while setting the running quarter force, alright? Now, it is now that I can go outside the follo. So I can go ahead and I'm going to say if winner has emerged, so if winner and that is equal to true, then we go ahead and see game starts that text content is going to be equal to let me see. Current player has won. All right, so current player has won. So whoever that is current player is winning and then running is going to be a call to for us. So we have to stop the game again. All right? Then, else, if no player has actually won, that means it is a draw. So we can go down here and go ahead and say, Else Else, if not options, If not, options that include empty, that means if there is no empty space and Oh, I put in a bracket right here. Go ahead and above that. That's an e statement. So if not options, that means that isn't a draw. That means everything has been queued up, but no one actually won. That gain status that text contents is going to be equal to Game is a draw. That is a game. Game is a draw, right. So nobody wins. Same run at the end of that. And running will also stop as well, because the game has ended, that is running equal to fs. Alright, now, if there's still space, that means nobody wins and nobody draws. That means we still have a space. That means the game continues. All we have to do is to change player and guided and put a semicron at the end of that, and let's go ahead and save this. So go ahead and copy the check winner function and move right inside the clicks and tides can also check who is the winner and put a semicron at the end of that and serve. Now, go ahead and click on X O X. O X O X. So X has one. You see that? No one. As X one, we can no longer continue. We have to start restart again. But we have not done anything on the restart function. Why ahead restates, and I can check this out again. Let me say X O X O X, I want O to win 00 has one. All right. So Matin action happens anymore because O has one. You can see Oh, Dega now, not mess O has one. Wha restate. All right now I want X O X O X. No, X has one. So you see? Add the row X, feel the row. So any one of use each of the rows or diagonal has actually won or the Corum. So you're filling rows, decorum or the diagonal, you have actually won the game. Alright, now, to restart this, we go ahead and look inside the restart boating, and all we have to do right inside the is to set the current player back to X. So the current player has to go back to X and put a semicron at the end of that. And then the options, we have to play all the aus again. So I go ahead and copy and now I'm not going to copy the late because I use this to initialize this to declare that variable right in there. So all I have to put the options equal to everything. And then the game staatt as well has to be this. Go ahead and copy the game status. That is this wedding year, so the tone of the current player. So everything is going back to original sets. That is what we are doing word by click under State. And for each of the saw, we go ahead and see cells that are for each because have too many of them, then guide and C. So using an function, and C, so that text content is going to be equal to empty. Therefore, each of the cells have cleared at the moment. And then running goes back to two running goes back to true because when the players won, running goes to first minute game no longer starts, but now game has gone back to original stat and let's go in and check it out. So I'll go ahead and say, click restate. You see that. Click, click, click and I can re stud this. Now, let's go ahead and say we have your winner, and Excel's won. So the game Aga continues. We don't need to do anything but to restart the game, and the game has started afresh. So that way, we have done, and everything is cool. So pull it down, plot around with and if you have any question, go ahead and use the question I ask section, and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video, Lecture. 7. How to Build a Rock Paper Scissor Game: I will call you back again to another video lecture in JavaScript. And in this JavaScript lecture, I'll go ahead and teach you how to build a rock paper scissors game. Alright, so this is a game that is very popular in China, and that is where it actually originated, and it was later standardized in Japan before spreading around the world in the early 20th century. So, in theory, the game is fair because there is no best response to any option. So the Rock Paper Cars game is a hand game where two players simultaneously form a chip, get their hands how to determine a winner. They rock which is a very first one is a closed fist, and the pepper is a flat hand. And then the scissors is a two fixed extended finger forming a V shape. And the rules are simple. Rock beats scissors, scissors beats pepper and pepper beats rock. So if both players choose the same shape, it is a tie. Let me go ahead and play this game. So it's gonna be worse, alright? So hit on rock, and it is a tie because the player and which is myself and the computer choose rock. Alright, so both of us choose a rock, and it is a tie, and my score is zero while the computer score is zero. And now, if I go ahead and click on this for the second time, I lose. Wow. That means the computer beats me, and I have lost this game. Alright? So let's go ahead and choose another one I's a tie, and let me choose another one. I still lose. Wow. Let's go ahead and choose, and the computer beats me three. You can see that the score is my score, which is your score is zero, and the computer score is three. And click on this is a tie. And now, I win. Yes, I win this game, and check it out. I still lose. Wow, I still lose. So I'm winning two while the Coputa is winning five. So we got ahead and played this game, and anytime we choose the same thing if it comes a tie? So I win for the third time and I lose and I still win and I lose and I still win and you can see how it works. So now, but player at computer, which is myself, chooses paper. You can see, what about choose paper, and it shows that, and it is a tie. So for the last time I played this game and kick off, and we choose Walk together, and I win, so I have to win before we kick off. Alright, go ahead and close this. And now we move over to Index at HTO. That is the very first we need to do. So right inside index at HTMO I'm going to create the H one and let one be, let me say Rock. Let me make that to be cis. Rock, paper, and cisars. Alright, so now we save that we have rock pepper cisars right in the air. Now, let's go ahead and create a dish. So this is going to be a very long stuff, but we have to patient and fold that to the end. So let the D of these be games. Alright, so save this and then let's go ahead and move right inside there and create some buttons. And then the first button I'm going to create is the fast. So I go ahead and put an emogy and that is for the rock. And then I'll go ahead and put the second one and add an emogy and that is for hand, which is the pepper and another one is an emoge and that is for cesars. Alright, now let's go ahead and move right inside the buttons and give them the let me say mplque and click function and that function is going to be play game, and it's going to have a parameter. And let me say the parameter is going to be for rock. And I'll buy ahead cops because I want us to be fast. And then they go ahead and press that right inside here and I'm going to change this to paper. And I'll go right inside here and press this and going to change this to casars Alright, so save this and have the three white in the air. Now the next dif I'm going to create is a div that is going to display the player and the computer scores or whatever we selected for paper, rock and scissors. So go ahead and say a div. And the first div is going to be for player, and I'll go ahead on that. Cheese that then I'll go ahead and change this to computer. Now, the IDs, I got to be ID of this is going to be an ID. The ID name is going to be player window. And this, the ID is going to be computer window. So these are where they will all be shown in, and I will have to see the result which shows you win, you lose and it is a tie, and let's go ahead and say DV and let's go ahead and put is a tie. So ID is equal to result window. Alright, now, Bryan and save that, and that is half. So let's go ahead and give another div. And this time a DiV is going to be for the scores. So Bryan and say a div and we go ahead and say your scores or your score. And what this, we go right inside the A, and I'm going to add a span tag red in there and let the span be zero, and then go ahead and give it an ID. So let the ID of these be SCOR and save. And Akanra hadn't copied this. And I've saved it, and now passed that again. So this is going to be computer score. Right, so I'm going to change this to be computer school, and that should also be zero, and that is all we have. And I believe at the moment, we have been able to put in things that we need, and if anything is missing, we can come back later put it. But before then let's add a D, give this D an ID, and let this D be encoded out to be window. A score out to be score window. So I'm copying this same ID, and I'm going to give that for this computer and save now we have to give this a touch of CSS so that we know god, right? So go right inside the body, and inside the air, I'm going to give the CSS. So for the font family, is going to be our normal, which is what we always choose. So go ahead and you can always choose your own font family. So let's why and give you a font weight and let it be a bulge and save. And we go ahead and give you a margin. When we say that the margin is going to be zero, and let's go ahead and display this and let it display be flex. I save, and that is cated. No problem. Let's go ahead and give the flex direction and let the flex direction be gum. And that looks better. Now, let's go ahead and align these items to Cena, and they are looking good right now. So so now we have to go about to hash one, which is this and work on that. So hash one elements, we just go ahead and give it a font. Let me say a font size and let the size be like three RME and save. And that look big. Let's go ahead and give it a color, and that is a color. And then I will retrieve this aca, and right inside here, I'm going to select this. I'm going to change this color, like, to be a little bit dark. And that is it and safe, and that has changed. Alright, so that is it for now. So the next one is the game. So that is an idea of game. So go ahead and cut with that and move right inside here. And for games, go ahead and paste that. And then let's go ahead and give you the margin. And let the Magine button be equal to 30 pixel and sieve. Or let's make that to be like 40 pixel and sieve. Alright. Now, let's go ahead and give the bodies because we have these bodies, so let's buy ahead and S game butting. And then we go ahead and give it a font font size of, like, a seven rami and save, and that looks big now. Now, let's go ahead and about the boda. Let's go ahead and the butter redish because I want that to be seco Let's go ahead and say boda and Let's go ahead and remove the butter for now. Alright. And let's go ahead and give the boda redish and let butter redis be equal to 100 cause I want that to be round around. Alright, that is cool. Now, let's go ahead and give the minimum width. And let my minimum width be 100 pixel. And let's go ahead and give it a margin as well. Let margin be zero by ten pixel. And we have to be space right now. Now, let's go ahead and give the background colour and let the background colour be purple. And I'm going to select this and let's make that to look good. Alright, a safe. So that is what I need. And I want my uso whenever I point, so the uso will always be pointer, and I'll let's go ahead and say that Cusa is a pointer, and I can move my usa and I can click on that. Ho that is cool. Now, let's go ahead and put a Hova so that anyone I select, we always show that I selected it. So we're right in here and I'm going to say games, but in the Hova oh, that is Ha. And I'm going to select a background color. And that is Popo. Now, I think it's better to go ahead and select this background color, which is right inside here. And from here, I can easily go ahead and make an adjustment so that it can actually get done a little bit. Let's go ahead and save this and check it out so you can see that this section also shows that I'm actually selecting this. Alright, now, let's go ahead and look into this the player, which is a player and computer, and let's check the This is a player window and a computer window. Copy this and let's go right inside the and let's move down a little bit. So that is an ID. Paste that ID there, and I'll have another one. Go and I'll copy that. That is this harder. I'll go ahead and paste that and it's still also an ID. So we hash tag. And then the square head and give it a font size and let the font size of that be too array and safe, and that is a little bit bigger. Now, the results, which is this is a tie, so I need that to be bigger that shoes you lose or you win and or this and there, and this guy had to paste that. And I'm going to give that a font size, and let there be like a six RAM. Save that is a tie. It is a lose. You win. Alright. Now, the scores, which is this. So what I need to do is to go over here and copy this.This score window, and I'll go right in here and I'll wear sqhead and change course. So the scores, I'll go right in here with dots and paste that. I would want this course to be a class. Okay, ski ahead and make that. Oh, go ahead and change this. So this is scores. Alright, now let's go ahead and give it a font a font size. And a the font size will be 1.5 rem and check it out. Go back right in here, and the school windows is an ID. And let's check and make sure everything is okay. Score window and score window. And let's increase this a little bit, and that is bigger. So let's just go ahead and keep that to be 1.5. Now, there should be a space between these two, right? So let's go ahead and give a margin right in here. So let me say that margin is clay to equal to 20 pixel by zero, and that has contin a little, so there's a space between all of them. So what do you guys make this to be like two RR med. Alright. A that is cool now. So to re me, just like the player of there. And now we're going to leave this for now. Now, let's go ahead and move into script dot JS and start off immediately. So the very first thing we need is to make references to rock, paper, and scissors. And to do that, we move on inside her. And I'm going to say Kannst games is equal to and I of rock and I re of paper, and I re of a Scissors. Right. So press some micron at the end. And for the windows, which is the player windows, which we have right EDA, we have to call the IDs because I have to call the ID for player window, computer, and the result. Now, what I have to do is to go right in here and say CST. Player window. Let's go ahead and show that that is the name copy this. So Pasta is equal to get Element. All right, so that is a document that get element by ID, and then go ahead and past play window right in there. Press the Micolm and in the same way, go ahead and choose the second one and C cost. Past that is equal to documents that get element by ID, and then go ahead and test it because you have to make references to all of them. So the next one is costs and that is the results window. So go ahead and pens that and I'll be equal to documents that gets elements by ID, and the name is result window. So we also have the dish Windows, which is a player score and computer score. Go ahead and copy this. And we need these windows, so costs. And I want to paste that and later q to documents that get element by ID and go ahead and pass that for layer score. So that is the ID and st go ahead and copy this. So the reason why I copy this is that we don't make mistake in typing that because now actually help us. If you make mistake, you can not be able to get the IDs correctly. So get element by ID, and go ahead and paste that and put the semicolon at the end, and that is it. Now for the plas cuss, we have to initialize them to start from zero. So let's uh player, which is, it'll be zero. So I want to start from zero and let computer the e chord to zero. So these calls are going to be zeros at the initial stage. None of them is going to work. And now we have to go right inside the air. So we said that whenever I will click on each of this button. So we have an click function writing here, and the name is play game. So whenever I click on out all of them, any three of them, they have the same unclick functional name, play game. So let's go ahead and say function as a function, play game, that is the name and pass that. And now why head and give you the parameter. Remember, it has a parameter of rock, paper, and scissors, right? So rock paper and scissles and to do that, you have to quihad and assign a name them guy and I said and a name is a leader choice. Alright. So that is a parameter I give right in there. And now we have to create a random number where the computer will actually pick randomly between paper scissors and rock. And to create that random number, I have to go ahead and say, let me say computer cursory, that is a computer choice is going to be equal to games, which is oh, that is what I did. That is games, which is what I declare A, not gain. So this is a games and it's going to be because we have an R to select from rock paper and scissles it's going to be RA of one, two, and three. So we and say, match that rundown. Matt, this is a random and multiply by three. Now, it's going to be a decimal number, so let's go ahead and copy this and put that to be Matt flow. So there's going to be run number and pase that and pull a semicron at the end. Now, the player has always choose, and the computer has always choose again. So the computer is choosing randomly between the three, right? Now, let's go ahead and face a four use a console to check if this actually work or does this actually work? Can we play choose and can computer also choose? So go ahead and say, console dot log, and then go ahead and enter computer Choice and put a semicron at the end of this and save. And right now, I can go ahead and inspect this, and let's go ahead and choose this. So I'm trying to get this to be done, but no problem. This guy I want to open a console and, under the console, I can go ahead and select this paper, select paper. So second call the computer is now making selection ram Donley. So selecting different different stuffs at the same time. So if the computer can actually select Aram Donley, then can go ahead and continue immediately. So go over here and let's go ahead and say, let the results. I'll go ahead and remove this. We don't actually need this anymore. I'll go ahead and comment this, right? So I guidelines say let results be equal to an empty space. Right. So now if the results are empty space, let's go over to index or HTM and remove it is a tie, right, so we're going to get that generate that is a tie by ourselves. So we don't need that to be visible until it becomes a tie you select boot of it. So what we need to do now is in order to generate that by ourself so we have to compare what the player chooses and what the computer also chooses. So guidelines say, if player choice Sorry, if player choice is strictly equivalent to compea choice. Alright, that is when it becomes a tie. So the result is going to be it is a tie. So we cannot generate her by ourself, and that is it. So else, we can now go ahead and use the swish case to actually check whatever the player chooses and whatever the computer chooses. So quand say swish. Then we check whatever the player the player choice. Now let's go ahead and say, as Kasok let the results be equal to computer choice is equivalent to Cesar. So check if the computer choice is equivalent to Cesar's. So Caesars. So we go ahead and say you win Eos, you lose. No, right. So you get a win or you lose. Quiet and place some Micron at the end of that, and go ahead and break out. Now, let's go ahead and see case Pepa, we also check the results. Check the results and we check and copy this. He's that. So, quite rac is this. All right, so check this and check if computer choices rock. So you have to always check if the crea chooses paper and computer chooses rock, then you win, else you lose. So else you got ahead on Greg out, then go check the next case, and that is the case for scissors. Then let the results also be equal to let's go and past this. So now is time for Peppa. You either lose or you win. So then we go ahead and break out. Alright. Now, can go ahead and set this and we have to display the text in order to display the text. All we have to do is to go right inside the air outside the L statement. We're going to say, let the player window that text contains the equal to what am we saying, use the Bati and I'm going to say player then we have to deliver what the player the player choice. So by a cuts and put a player choice. Alright, so we always display the player choice and also display the computer choice. So computer window that text content is equal to the backtick. And I went to say computer. And then let's go ahead and say computer choice will be displayed right in here. So pull the semicron at the end. Then we have to also write. Either you win or you lose. So in order to do that, let's go ahead and say, Results window, dots text content and let that be equal to results. So I have is a tie and so on. Let's and save and let's click on this. So save these See, sevens. All right, so let's go ahead and check any of these. So there actually display at the moment. Let's check what is wrong. Alright, so over here, we have a punch on play game, have Paya. Alright, so that is a player and guy accept this. And a let's go ahead and click on this. You lose you win. You loses a tie. Scissors, you lose. Alright. Wow, that is really working fine. So we have not added this cures and we also need to add this color. So we want this color to actually change. So if you want this color to change, we have to also do that. But for us to add this colas, let's go ahead and say I want the scores to actually work. So what I need to do is I have to create a swish case right in here, and I can go ahead and say swish. And then I'll go ahead and at the result. So I move everything here. Results and case if you win. That's why I don't remove this. So if you win, I'm copy this, and that is what I good to place word in here and case or you lose win and copy this copy everything here. So now go play brick. So if you in, we are going to see layer increment, play some icon at the end. And let's go ahead and see players core is going to be text content accord to player play semiconryEd and An for if you lose Guide and C, computer. Oh, that is a computer increment, re semicolon, and computer score. It's going to be text content, equal to computer. Plus some cron at the end of that. So let's quit remove this default. And for now, go ahead and save this and click on this. So it is a tie. Check. Now you lose computer scores one. So you win, you score one. Alright. Computer scores you lose, you win, and the two. So you can see that actually works. Now, what remains is just to go ahead and put some different colours to this. And if you want to do that, what do you need to do is to simply mop over to your style of CSS. You can go down here and put some classes. I can put a class that winner. And then let me go ahead and say dot winner, and I can go ahead and put a color and let the color of this be green. And then I can make the grain, can select this green to be this green. Alright. Now I can go ahead and put ana one dot, uh loser? No, right. So that loser is going to take a color and let the color equal to. So that's just going to be red. Let's go ahead and paste that. And now I want this to also be anyone that lose and anyone that win to be different colors. So I'll go ahead and choose the computer score and the players score, violent chooser. Players coe go right in here, and that is actually an ID. So for this player, I'm good to say, School, we also have that, and for computer, I have to copy this as well. So that the values we always shoot. So Kyle and pass that and s. So we're going to move right inside the JavaScript to actually add that. And the way we can be able to add that is let's go down here and we can say that result window that class list. So we're going to add a class that add, then that is winner. Alright, pull the semron at the end of that sieve. And for here, we'll go over and see results. So let's go ahead and just copy this. So don't make any mistake. Can just go ahead and copy this and still praise that here. And now this is going to be Wiser and save. And let's go ahead and fresh this and click on this. And we cannot see these colors actually working. And what actually happened right in here is that we have to play the screen first. In order to play the screen, I can go over here and I can go here and see results window that class list that will remove any color that is india for Leg and say for winner and for sa and save this and check this out. Okay, that is actually just training. Let me go ahead and know what actually happens. So we have the winner. We have the loser and everything works fine. And the scores are actually showing. So you can go back to title CSS and have winner. Okay, go ahead and put the winner camera because you're adding another ID. We have ID, and we have a class, so go ahead and put a camera right in there. So believe that solve this problem right now. So go ahead and save this. Oh, right. So that is you winner. Wow. So go ahead and click that paper, you lose. And for the person that win, has a Score one, and compitza has a score one. Check it out. Computer score two, and you see that? So it's a tie is always black. So you win is always green, and you lose is always red. So and anytime you lose, computer actually wins, and anytime you win, computer actually lose. So it is a tie, know what win. Now, I win, that is 66. Check it out again. It's a tie, 66. Check it out again. I win it is seven. I win it. I wins a tie, and I lose. And computinecremate to seven showing that the game is actually working fine. So that is it for Rock Pepa, sizzles game, pull it down low with it. And if you have any question, go ahead and use the question and answer section, and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture. 8. How to Build a Dice Roller Game: I will come back again to another video lecture in JavaScript. And in this Javascript lecture, we go ahead and look at how to create a dice ra in JavaScript. Alright, so we have this dice R here right in the A, and OPA can see that is die rura and here is an input box. You can go ahead and change this to maybe like five or anything. You can also select that from here, but you can't go below one. All right, now we have a dura, and each one is select to actually be displayed here, and then the images will also be displayed. Now, let's go ahead and say we select one and then grow this, and this is die six. And once you select, it goes on to check out different die randomly. You can select two dies and you can see that. You can select three. And also you can select four. You can also go ahead and select five and also six. So you can go ahead and select as many as you want, even seven, eight, nine, ten, and one of them of your own choice. Alright. So this helps you to select die. This is a die Ra and anyone select. It goes up to give you, let's say six, and this is six, one, and this is one, six, six, four. These a four, one, two, three, and that is one, two, three, then three, and four and two. So you can see how dira is actually working fine. Let's go ahead and I'll replicate what Joe Serra in Y in JavaScript. While and close this. And let's go out index or tach Temo, and right inside y, we go ahead and create a DIV tag. So create a DV and I'm going to give that an ID and let the ID of that be let's go ahead and say that is an ID, and let the name be container. And now that is container. So I'll go ahead and create a die header. I'll go ahead and give that to be one, and I'm going to name that to be die roller. And then I'll go ahead and give it a Bo that's going to show the number of die and squares Labo and the I'll go right inside here and I'm going to remove this, and I'm going to say number of dies or a guy say die number. Rate. So that is die number for me. So you can actually go ahead and change that. Then what anti impute? So a model create imput so that I can be to select one, two, three, four, five, six, any number of dies you want. I'll go ahead and say imput. And the type of imput going to be numbers, you're not going to be a string and lay the value. So anytime you go there, one is going to always be there. You can go below one. So I'm going to add one. And let's go ahead and say that the minimum you can actually go is also one. And I can go below one. I'll go ahead and give it an ID and let the ID be number of dies. So num of dies. Alright, now, we'll go to create a submit button, or that's going to be Rula or a button or anything. I can go ahead and call out to be input. We also use a button to do this, right? And let that be submit. That is the name, and I'll go ahead and give it to value. So let's go ahead and save this so you can actually see what we're doing. So this is all we created dira that is for H one and the number of dies, which is actually this, then we created the input tag, which is this one we did right in here. Then input, which is the button is this, which are creating. I want to change the submit. Orm that. I'll go ahead and give it a value. The square value is going to be roll, and then just change to roll. So you always roll that and want to give that an onclick. So click, and we're going to give it a name. Let that be Raw die. So we're going to give this name in jazz. So when we go to Jess, we go ahead and give this name for the function button and go ahead and give it an ID and let the ID BTN. So this is a button. Now let's go ahead and save that. And then we're going to display the dice we actually chose. Remember, this is one, two. So if we choose five, it's going to be die, then five. If it's two, it's going to be dice two dice three, and so on. So we want to create a div for that. Where's say div And I'll go ahead and do it ID and let the ID be equal to die output, right? So that will always be there. And then the next one is the images. It's going to show the images. So squared ur an adiive and we're going to give it an ID and let the ID be die images. And now it's quire save this. Now we're done with the getable. So we on step comeback for the fresh poppers. Let's go right inside the styles dot CSS. And right inside the style CSS, we're going to actually work with container. So can this came actually look good? Now, let's go ahead and uh put in astac and this is an ID, the container, which is what we have right in here is going to be this. And now we can go ahead and give it to font family, right? So let's go ahead and center that and going to actually text a line and let there be center and save this. So everything has gone to the center, you can actually see that. And now let's go ahead and change the font family and let the font family be equal to this, I'm going to use this. And let's go ahead and save this, see how it looks. Save this. And that is actually tick. Go ahead and remove little guy remove the very first one and save this. And that is actually more tie. Now, let's go ahead and cut this I'm going to remove this. Let me see how this actually looks. Dice Rolla, and I'm going to give it a touch. Let's go and remove all this. I'm going to add this to that. And this is what I have. So I hope that actually looks good. Dice roller. Now, let's go ahead and give it a phone size. So this is at a font size, and I'm going to use one EM and saved. And we'll go ahead and give it a font weight. And let the font weight be bold. Save this. Alright, that is cool. Now, we're done with a container. What we need now is to go ahead and work with the button. Let's go ahead and design this button, right? So that we actually look good. So to do that with the button, what I need to do is I'll go ahead and go back right in here, and the ID is BTN, copy this. And then I'll come right in here and press that BTN. And I'm going to go ahead and give the font size. So the font size is going to be 2:00 A.M. As save. And now we go ahead and give it a pation and let the patin be five pixel by ten pixels serve this. Then we give it the butterye So give it the Buta release of TNM pixel. That looks good. Now we're going to remove that boda. That black stuff right in here can see the black stuff, but going to remove that. So boda is aquarternn and that is gone. Now square head and give it the color. So I'm going to say about ground colour. And then the color I have this blue variant, I'm going to copy that. And let's go right in here and I'm going to you say square ahead and actually change that. So I have this. Remember that it's going to give an A to be colour. Let's go ahead and copy this because I love what I have previously. So I'll go ahead and paste that. And this looks good to me. Alright, now I'm going to change the text. So for the text car, and change the colour and let it be Earth. Alright, so cry and save that. So it remains one of the and save, and that is raw. So we're going to roll our die. Now, we being a Cusa on our custo to actually point that. So usa is going to be uso. Point. So you're supposed to actually give me usa point. So uso pointer, save this. So now my uso is pointer and at the school. Now, what I need to do again is for the Hova. So when buying Hova on this is going to change a color. So let's go ahead and say BTN and HVA. And then I will change the round colour. And round color be equated this blue variant, which we wanted to collect before, save this. And now you can see that actually changes. Now, the number of dies doesn't actually look good, so we're going to work on a number of dies and go back to AexsHtmo and the number of dies, the ID is number of dies. Go right in here and we're ahead and press that, and let's go ahead and change the the font size. So let the font size be two EM and save this. And that is really too big. No problem. We want to work on that. So let width be equal to 100 pixel. And that is cool now. And then go ahead and give a text line. Takes a lane. Let that be center, save that. And now the war has gone to the center, and let the front weight be equal to front width, and let that be equipped bold. Alright, go ahead and save that, and that is bolt. Now we're done with title CSS. Let's go ahead and move over to scrape dot Jazz. Nown here, you go to do some of the w that's going to end this to actually work fine. And now, I'll go right inside here and we'll create a function. And remember, we have the right in here. So each time we select anything, we want to click on the button. So anybody the button begins to work. That is when we begin to display. Now, we have to listen to that button. So we have an onclick, and the name is R D go over here, copy that, and go over here and create a function. And let the function name equal to row die. And for the parameter, we're not going to insert any parameter right in there, and then we begin to declare variables. So for each of all these, we're going to declare variables for all of this. Now, we go ahead and start with our counts, and let's cost. The very first one, which is here, the box itself is right in here, square ahead and copy that, that is a number of. The input is a number of dies. Count number of dies is equal to document that gets elements by ID, and I'm going to pass in number of dies. So we have values right in a one, two, three, four, five, six, and so on. So I'm going to collect the values somewhere, say that value, quite semicu at the end of this. Alright, now we go ahead and also check the dice output, which is the dice output, and then the die image. We're going to work on that, both of them. So So let's go ahead and say const die outputs and let codes documents that gets elements by ID. Then that is die output. All right. So I hope that is cool. And so we have and go right in SD and passe that as well, and apply some cron at end and counts die. The next one is called die images and copy this. And let's go ahead and press that and let that be equal to documents that get element by ID. And then we're ahead and press, that's right in the press the corner at the end of this. Now, let's go ahead and set this. We have done this, and now we have rescue over here. I have these images of dies, and that is for one, two, three, four, five, six. And if you click on any one of this, you see, this is what I have, and if I click on this, this is what I have for two, and for three, four, Pi, six. So I have all this right in. So you can actually go ahead and download all of them. I'm going to leave that for you, so you can actually pick them all. So we're going to get the values. So let's go ahead and say const. So Kunst values. And by because I have a name, 1.1 delta PNG to the PNG. So we're going to actually watch all of them. So bore head and three semicuron cost mgs and let this be equal to my array. All right. Now, let's go ahead and set this. And I went to close as well. Now, let's quite how to use a follo system to actually roll our die. To use a follo system, all we need to do is require let's say, four now, we're going to say let X, so you can change that to X or anything. Let X be qt zero and eta X less than the number of dies, which is this, so we ahead and copy this, which is less than the number of dies. Go ahead and passe that, then X increate. Now, go ahead and remove everything right in here because we're going to actually work with our own. Now, let's go ahead and first of all, we're going to use create a random number. Go ahead and say const. S value is equal to equal to mats dot random. And uh we're going to check 1-6. So if you're going to do this, it's going to be 1-5. So it shows that that is up to six, so go ahead and same what apply six. And now, we actually give us a flow number. That's why I want to save this. And let's go ahead and speck this element. I'm going to drag seletu bit. And that's why I had a hit on row. So let's go ahead and select the seletu bit. So you can select any one of these. And for us to get this, let's go ahead and use a log. Then we're going to enter the value, and let's go ahead and save this. Now, click on this. I cannot click on Roll. I can select 4.6, and let's go ahead and select two. And now I cannot select two die. For three, I cannot select three die, 1.5 0.5 0.5. Now he's giving us decimal and wanted to get rid of this decimal. So when we copy everything right in here and are going to introduce the flow method, then we're going to put everything right inside the flow method. Quiles save this. Why not set this? Now, let's go ahead and select six. And now we can select zero to five. The six is not there. So in naomon a six PS, we're going to add P swam, and then we go ahead and put the semicron on end and save this. Now, let's go ahead and select six dies again, or any one of them, we have six included, and seven, we have six included. Now, I how that's cool, go ahead and include this. Alright, so I'll go ahead and comment on this. I just want to use this console to check out that because we'll be printing out everything on our webpage. So squa and see values. Values, dot, push. So this is going to actually get values for us. Go ahead and insert the values right in there. So go ahead and put a semicron at the end. And now for the images, we go ahead and that showed images. So we were saying images dot push. And we now go ahead and use the back click orb tick. So I show you use a back tick right in here and I'm going to introduce the image tag. And now I want to be able to use a get mel right inside this page, and I'm going to give the sauce of this. So let the sauce beer to go over here and let's check out the sauce. So that is dyes on what's called IMG, so that they are all in the same folder. So I'll go right in here and I'm going to say that the sauce is equal to die that's called IMG. Alright? Now I want to get the values. So go ahead and put this four slash and because I want to get the values of this and go ahead and inset value. Now, each of them, that goes to each of them one by one. So it's going to be dot PNG because everything is dot PNG. I don't have Dottie Jpeg. So ensure that you have the same file extension for every one of them, right? And that will be okay. Now let's go ahead and actually save this. Right now we set this, and then we can now go outside. Let's go ahead and print out whatever we have. So I'll go ahead and go back to die, and I want to say die output and go back right in here and we'll paste that. That's dot text content, and let that be equal to die. I'm going go ahead and put dice, and you can name this anything. So that's going to appear down here, and then it's going to add values of the dice. So, so let's go ahead and enter this, and I'm going to same values. So that's what we always show us Whether you selected two dice, three de always going to show, and we select above two or three their model going to come together, so we need to separate them so that they'll be like a one, two, three, five, seven randomly Based on the selection. Someone say, Don't join and I'm going to separate them. So we are gonna separate it with this piece. Alright, nice cool. Go ahead and, uh, so that is actually going supposed to be right inside the value. So go ahead and put that right inside the value. So that's going to be value dot join, but we did that outside. So now let's go ahead and put the semicron at the end of this. And then we go ahead and shoot the images using the diese images again, die images, quahmPres dits and.in HTMO. So we'll use that in a HTMO to actually shoot this. Remember that we actually show use H Temo right in here. Now I'm going to say images dot join. And the images, I want to just separate them with you can do that with a space and put a semicron on end. And let's go ahead and save this. And I hope everything being equal. Let's go ahead and check out one. Wow, our dice is very big. You can see that dice looks so big. Wow. Now, let's go ahead, I give in for our images. I go ahead and give them a what right in there. I will be starting that inside here. So let the wet be equal to 100 100 and let the height. I'll swell the eqartable one undrid. Alright, now let's go ahead and save this again. I check it out. Save this, and let's roll the die. So our dies look so good right now. Now, let's go ahead and select two, three, and you can see they are actually working fine. Alright. Now, I need a space between all these. I can simply go inside the hashtmo and let's go ahead and cost this. And over here, I can give a break tag. And for this, I can also give a break tag. I'll squa ahead and save this and Roddy dies for two, three dies Nas space Y and Y. And for this, we need to separate that from the button and square ahead and say that is this. Alright, that is a die output. And for you to do that is simply go ahead and give it esque and give it double. I think that would be okay and save this. Now lets go ahead and check it out. And now we can now see that adding a double shifted that's below. Now you can select six die Acon you're able to show that very well. Alright, so d is working very, very well. Put it down, pour on with it. And if you have any cichon, go ahead and use the CuchanEA section and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture. 9. How to Build Image Slider: I will carry back again another Vina Lecture in JavaScript. And in this Javalp Lecture, we go ahead and learn how to build an image slider. So over here we have an image slider and you consider that of the bikes. So you are required to have some images ready to kickstart this process. So go ahead and put some images, and over here, I have these images. I have inserted that as bike one, bike two, bike three, and four. So go ahead and add some images to your own and check it out. So the very first thing you need to do this is to go ahead and move the index at HTMO. Let me go ahead and close this. So inside index or touch ML, we'll go ahead and create a Diff tag. And this diff tag, I'm going to name this wire and give it a class and let the class name be slider. And then, right inside here we go ahead and create another Deftag and then I'll go ahead and name this dif tag, this guide give it another class and the lady class name be Image slider. So that is image slider. And let's go ahead and put sliders on slides. So image slides. So now we go ahead and it's not images, so go ahead and give your images and let the source of the image be bike one. So I have the bike already there. So I can name this alternatively. I can go ahead and give the alternative name to be bike one. Alright, so let's go ahead and give you the class and let the class name be equal to slide IMG. Alright, so quiet and copy this, so go ahead and give that to other ones. Best, first, first. So I have four images. So go ahead and change them because I give them the name of bike one, B two and bike three and B four. So the alternative images we are going to be bike one, B two and bike three and bike four. And then I want to have the same class. And if we serve this quiet another fresh and I have my, my bikes right in here. So if I scroll down, I have these bikes. Now, I'm going to need a budding that is the slider bodies. So let's go ahead and do that outside this diff tag. So let's go right inside and do that. So I do aside image slide and then I'm going to add a button and then let the name of the button. It's going to be a backward and forward. So there is a code for this. Let's go ahead and give out the code. The code is going to be N, ah and 10094. So go ahead and save this. So that is it. So you can side that very small, right, yeah. So go ahead and give it a class. And let the class name of this be PV. Okay? And I'm going to give it an click button and then let the function name be slide, pre slide, and then go ahead and cut to this. So I want to give the next button and the previous button. So go ahead and press that and I'm going to change this to be five, that is the code, and now have the second button here. All right, so I'm going to change this to be the next slide, and I'm going to change the class name to be next. So this is all we need for the HMO. So we can now quickly move into CSS. And inside the CSS, let's go ahead and work with a slider that is this dif tag, the slider. So inside the slider, go ahead and see that is a class, slider and go ahead and give the position and let the position be relative position. So relative position and let the width of that be 100 post. And then we go ahead and give the margin. So lady margin be auto. And then we go ahead and Lady overflow be equal to heating. So this is all we need for the slider. Then we now slide the image. So the images now let's go ahead and arrange them. So I'm going to use Ts class dot image because you're going to work with the sauce that is the image sauce. So we go ahead and say that the width of the image is going to be 100%, and check it out. So everything is now a line. And now let's go ahead and remove all the images first and fall. So the image display is none, you're going to do that by yourself. And that is it for now. So let's go ahead and save this and we can now move over to script dot JS. So the very first thing we do right inside here is to create a nod list of the elements of the image slide. So what first of all, we have to make references to the slide. So image slides is equal to document that's query selector all. So in that way, we now create a Nuglist of the image slide. So go ahead and get the Image slide that is this, go ahead and pass that and make references to the images. So that Image slide image. So IMG, so that is the source of that. So pull a semicron at the end of that. So we have to make some initialization. So have to declare the index of the current slide we're going to see. That is the very first one and late slide index. B equal to zero. So now the interval which we're going to see the next slide and so on, so you have to also declare that we have to set the interval we're going to work with. So go ahead and say, Let's interval, right? Let's interval IB the equal to null. So first of all, it's going to be a null, and now you have to declare the functions that we're going to work with. The first function is the initialization function that is going to initialize the image slide. So go ahead and say, function and let the function name be equal to slide initialization. So slide initialization, and it's not going to take a parameter. So we're going to leave that for now. The next one is going to be a function to display the slide. So function, the square and say, function and the function name is going to be slide display, slide display, and this is going to take the parameter for the index because that is where the next index on all and that comes in. So index of the next slide and so on will be displayed. Then the next function is for the previous and the next button. Y and C, function and alt the function name be equal to PIF. And let's call that to be pref slide. Pref slide. And the next function is going to be the next slide. Next slide. Now the next slide is going to be the next index. Let's go remove these parameters. And for the next slide, I'm going to remove this I'm going to give it the next index, which is the slide index, which we have here. So the slide index is opus to zero. Let's go ahead and increment that so that the next slide will be populated for us. And then go ahead and display the next slide. So we're going to display the next slide function, which is this function, go and pass that, and it's going to take the parameter of the slide index, go ahead and set that. So we have done the necessary things. So because it's the nod list, we're going to add a class to that. So the class you can add the nod list is the class that we show image. So first of all, we can go back to here and I'm going to say that IMG dot Shu slide because I want that to be the image, it's going to be for display of the next or the slide, which we have. Now, let's go ahead and say that the display is going to be a block so that is going to show the image. So image that show slide, and the slide name is show slide Copy this because that is make reference to the image. That is why we have ING data show slide. Now, we're going to add that to the function initialization, and for that to actually work wine, we have to go ahead and say IMG or image slide, and this is going to take a slide index. That's class list. So we're going to add the class, you just copy it now, that's add, and then we go ahead and pass the class, you just copy it. So set this, and now we can populate the first image. That is the class you just help us to show the image. So why say initialization and save this and have the first image, but nothing is still working out yet, right? Now, the best way to set this is by making reference to the documents. So documents that add add event lessener. That means that add event listener and they go ahead and say dumb content loaded and now can now past this. So these are the parameters that it takes. So in that way, you have your image always slide, and that is how it works. Go ahead and save this and we still have this. Cs that actually still works. Now, if you want the image to actually slide interval, can go ahead and say interval interval ID is going to be equal to set interval. And let's say that's the next slide, which is this that has sets the slide index, which is this function. So why a call this function to be populate it after, let me say 3 seconds and serve this. And we can actually go ahead and check out this the console. Let's go ahead and say console dot Log, and go ahead and call our interval ID. Save this and let's go ahead and inspect this element and check it out. So go to console, and you can see we have one. So that actually works. So you can see that interval actually works. So go ahead and close this out delete this. So what you check actually if this actually works. Now, what happens here is that we have to display the next slide, so it's in the display slide. In order to display the next slide, all we have to do is we have to remove the current slide and then enter the next slide. In order to do that, we go ahead and say, images slide that's four each. And we can go ahead and give this a name. Let's go ahead and say slide and go ahead and say slide that's class list that's remove. I want to remove the current slide and then enter the next slide. I want to remove the class core show show slide. So we're ahead and set this, and then as aide, we cannot enter the next slide. See that goes off what new slide comes in. So quiet s Image slide. Then slide index. So it just like say, I want to copy this. So this is what shows us the slide. So that's why I place that so you can understand what you're doing. So if we set this and the first slide goes off, then the next slide comes in. So you cannot see it now changes. See that? So as I remove the current slide, it's now the places with the next slide. So now let's see that as it gets to the end, it does not return the next image, which is the previous image that is the first image. So what actually happens is that we have to do that by ourself using an e statement. So let's go ahead and see if if index is greater than or equal to image slice dot length. We have to check the length of that and we can go ahead and see that slide index is equal to zero, so plus a Micron at the end of that. Now, else if index is less than zero, if index is less than zero, then slide index. Slide index is equal to image slide that's length minus one. So play a semicron at the end, and that is all you need, and you can see that the image will continue to slide and it's moving, and it can now gets to the end, and that is the end and thenw move to the next. So in how it has not gone back to the beginning. Alright, so r's cool. Now, to avoid if the image, let me say we have an image, and this slide will begin to show, we have to also put that into consideration. Right. So in order to do that, all I have to do is, let me say we do not have image and begin to have slide, go ahead and cut this inside the function initialize, and I'm going to use an E statement, and I'm going to see if image slides that lens. Is greater than zero. So if image slide of nine is water than zero, and then why than pass that. So it will always check if the image slide is rather than zero so that it doesn't go out and start populating images or start to show slides, when would not have any slide. Now, we have not fudged these buttons. So we only have the next button because you have this function created. So the next button is working, but the previous button is not actually doing anything. So for the previous button to actually work, all I have to do is to go back right here inside here and then I'm going to clear the interval. And play the integra ID parameter, and then put semicolon, and then the slide index. Slide index, we now decrement. And then we call back this slide again. So and copy this and pressed. So put a semicron at the end of all this and save. And now let's go ahead and checkout can see that the previous slide is now showing, and then the next slide is now showing. Now, both of them are working. So what we need now is to use the CSS. Let's go back to CSS. That is tied up in the tile of CSS and we're going to work on these boties so that the buttons will actually work fine. Now, let me go ahead and see that the slide, let me say the slider buttons, so the slider boties. And then let's goquid and see that the position is going to be Absolute. Let's make the position to be absolute position, and the top is going to be 50% and safe now can see now it has gone to the top 50%. If we made that to be 100, it can go above to the highest. When you shed it between half, that is 50%. And now let's go ahead and transform guide and transform this. We're going to transform that into Y axis. So transform this into the Y axis and let that into -50%. Alright. Now, let's go ahead and make the fun size. Let the font size be three rami. And now that is big enough. Okay. And let's go ahead and remove the boda. So boda is equal to n and safe. So the boda is no longer there. And let's go ahead and make a cuso to be a pointer. So I want to give them my Cusa right in y to be a pointer, and that now works plain. So what if we change the background? Let's go ahead and change the background color to be a black color. So that is a black color, we're going to reduce this so that we can be able to walk with that. Alright, safe. America see the two images right in there. Now, let's go ahead and make the color of the bodies to the white. Color is equal to white and safe. And now the two images a day that is spot of the bodies. So we're going to move the botin for the next button to the right and the previous button to the left. And to do that, go down here and I'm going to say that quit and get the butting. So the next button class is next and the previous button class is Pref. So go right in here and I'm going to say that the next botin is going to move to the right, and there's going to be zero, so move to the end of your right. Now, you see that. And then we'll go ahead and say that Pref butting we have to ensure that that is to the left, so it's compatible in every browser. So we now kept that at the left, and that is it. Now you can see that it's now working at five and that slide is actually moving fine. So you can add an animation to this. Let me say it now fades. So for that to actually if fade, I can guide ahead I use a keyframe so wi and see keyframe the name of the keyframe is going to be fade. And then I'll go ahead and see it's going to move from a opacity. Let me say from opacity of 0.5, opposite of 0.5 at to opacity of me one and serve this. Now this animation, we're going to add that to our show slide for that to actually work. So copy this fade and go right inside here. I want to say show slide, the animation, and the animation we created is fade. So 70s and check it out. So we'll go to add the duration. So guide and say animation dilion. So animation duration is going to be 1.5 seconds for that to be visible. Now seven days. Alright, so you can see that our slide is not actually working. Check it out. So you can see that you have animation while in here, and that works fine. So let's refresh this, and this is how the image slide actually works. With animation, everything works fine. So put it down, brut on with it. And if you have any question, go ahead and use the Question asso section, and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture. 10. How to Build Weather App Design (Part 1): I welcome you back again to another video lecture in JavaScript. And in this JavaScript lecture, I warhead to teach you how to build a weather application from scratch. So this is the weather application, and if you go ahead and hit on Vida, it says, Please enter a city name. So we always enter a city name. Let me say I want to check the Weta of London. And if I go ahead and hit Vida, I have London, and that is -0.1 degree. Humidity is at 93% and that the cloud is of a cast cloud, and you can see the cloud symbol. So what if I want to view that of Texas and go ahead and check it out. And that is Texas, and you can see that humidity is 100% and that is mist. I can see the image is right in the air. So what if I want to view Miami and check it out and Miami few clouds, and humidity is 55%. Temperature is 13.6 degree. And you can check anyone like Nigeria, but check and Nigeria is overcast. Humidity is 20%, 21.505 degree, and I can check Abuja and check it out. That is it. Now, what if I want to check, let me see, Man Chester, right? So that is Manchester. Let's check it out. So that is Manchester, Broken Krauss. Now, what if you make a mistake on the name? Let me say instead of writing Manchester, you remove and check view. It says, Mancheste is not a city name. So you said that, is that a city name. So whenever you make a mistake it always tell you that that name does not exist, so you have to enter the correct name. So let me say I want to enter Delaware, and that is it for Delaware, and I make a mistake Enter this. And you can see Delaware is not a city name. So if you go ahead and enter the correct city name, check it out. It gives you that application for Delaware. So for any name any city in the whole world, you can actually get the weather application. And if you check that online with other weather applications, you're actually going to get exactly the same thing. So that is it for now, and that is all about weather application. So go ahead and create that from scratch. So let's go ahead and check it out. We are going to be making use of this open weather forecasts, so I'm going to get API key. So first of all, are we actually, to go ahead and sign up on openweathermap.org, then try to activate, and then you're going to get an EPIK. The APIKy might take you like maybe two. Let me say 1 hour, 30 minutes to activate, but it doesn't take long, even less than 15 minutes, it can actually activate it, and you get your EPI Queue. So we're going to use APIKey to interact and get the real weather status. So you're going to get data, the weather data from every country of the world and every city of the world from here. Alright, now let's go ahead and dive in into this. So move into index dot HTMO and create a form. And for the phone, we go ahead and say, we're going to require an input so that people can type in the city name. So the text is going to be type is going to be text, and the class is going to be city, and then the wes holder is going to be enter city. All right. Now, for the phone, I'm going to give you a class Run guy essay that the class name is going to be weather data. So we data. All right, now let's go ahead at the button. So for the button, I'm going to say that the button is going to be view we then go ahead and give it the type. Let the type be equal to submit, and let's go ahead and save this, and that is it right in here. So we are going to add in some ats for the water details. You can be able to see the details, square and see, we have a dif tag and inside the dif tag, we're going to give you a class and let the class name of this dif tag be equal to data. Data details, and go ahead and save that. And now we go right inside A and we're going to create when we say Hu, and he one is going to go ahead and adding a default. Let me say data. So we are going to get rid of this so that I can be able to print that out from the EPI key. But I'm going to use this as a press water to design our data detail, please so you can always see everything there. Now, let's quit on and say a class and let the class name be equal to display city. So this is way the city name goes and save it Delaware. And the next one is a paragraph. So for the paragraph, we're going ahead and give it let me say, 45 degree. So we're at 45 degree. And you can add degree symbol from your keyboard, and then we're going to give it a class. So let's say the class is going to be display them and save. And then the next, we need to signup paragraph, and that paragraph is for humility. So for Homi DT, we had giv it a class and let the class name be your code to display humidity. Alright, so the next song we need is another paragraph. And for the paragraph, we're going to enter the type of humidity the tap of weather. Let me say it is running. So and go ahead and give it a class and let the class name be equal to where a description. And then the next one we need is the Waimage. So let's go ahead and add in, let me say ON. I'm just going to add as a placeholder, we're still going to do that. So go ahead and get mog from your laptop. You hold the you hold the Windows key, and then the semicolon, you can go ahead and add any Wa type you want. So I go ahead and say this is without energy. So that is what I image, set this, and you can set that in here. Then the next one I need is a for people who are going to mistake entire name that does not exist, let's say a city name that doesn't exist. So go ahead and say, please enter a city name. So please enter a city. Okay, let's go ahead and say entire city in case you're not entire a city. And let's go ahead and do the class and let the class name be equal to r city name. Alright, so a row city name, let's enter a city and they will go ahead and save that. So that is it from now. And this is all about the HTML that we need for this. So quickly move over and go into style CSS, and right in here, we'll begin to design this. So first of all, we're going to start with the body, and let's go ahead and say that about ground coal that we need let me say I'm going to take something like blue. Alright, so for the blue, I'll go right in here. I need this. Alright, so that is the Ba granklo for this project. And safe, that is it. So I go ahead and enter the font family. So for the font family, and that is going to be area. So this is what I use throughout my project, and everything has changed. Then for the margin, I don't want margin at the top, so Mg is going to be quarter zero. And now that is cool. So we go ahead and add a display, the flex display, right? And now we go ahead and add the flex type. So the flex direction is going to be a co room Sif, and we go ahead and align items to the center. Alright, now other items have moved to the center, let's go ahead and work on the form, which is the weded data. So go ahead and copy the weded data, and let's go back we in here and I'll go ahead and paste that and we go ahead and give the let's see worded data. Let Magine be equal to 20 pig Zo, so that we count down because it's really on the top, and that is cool. Alright now what of the next one that we have is the let's go ahead and check the next one we have here is the city. So for the city, that is this impute right in here. So we ahead and copy the class and go back right in here and press the class. So to al the class, I'll go ahead and give the pattern and let the pattern be equal to ten pixel and save. And let's go ahead and give it the font size and let the font size, we equal to 1.5 m and save. And let's squa ahead and give the font weight and let the font weight be equal to board and save. And let's go ahead and give it the boter. And for the bole, I don't like working with butter, so I'm going to remove the boter. And then we go ahead and give the butter reds. So for the butter reds, I'll just go ahead and give the five pixels just to have a small curve and that is it. And then for the margin square ahead and give you the margin and I let the Magin C to ten pixel and serve this, and that is it. Now, let's align the text so that this intercity will be at the center. So I'll go ahead and say text align and let the center and the intacity has moved to the center. Now, I'll go ahead and customize the button because the bodying is not looking good. So let's go ahead and see the button. And for the button, I'll go ahead I give you the pattern. And I let the pattern BC to ten pixel by 20 pixel and save. And then we go ahead and give you the front weight. So let me go ahead and say a font weight and let the weight be equal to both and save. And let's go ahead and give it a font size. So go ahead and font size is going to be equal to one and remi and save. And let's go ahead and I remove the border. So for the border, I'm going to say the butter is going to be equal to none. I don't need the butter. And then for the butter rejuse now, I'm going to make this to cove very well. So for the butter release, I'm going to say it is 15 pixel and safe. And you can say that that is looking good. Now, let's go ahead and give the baron collo. And for the bagrun collo, I'll go ahead and enter I'm going to that green arrow. So for the green arrow, I don't want to be I don't want it to be too shoty. So I'll go ahead and reduce that a little, and let's quiet and sieve. And that is it for now. So we're going to keep that for this for now like this, alright? So let's go ahead and give the color of the text. So for the text, it's going to be a white color. And that is looking good. So now let's go ahead and add the magin. So for the magin then we in and see the Mdging button. And let's go ahead and see 15 pixel and safe. But these are actually necessary because I just don't want this data way to come on top. But final, let's go ahead and lift that so that the Dawall and everything will be below. Now let's quit and give a Csa. And the Cussos going to be pointer. And now, if I get my mouse, it's night pointer. Right. So I want ever anytime I hover over this. So as I admit it a pointer, I want the color to actually change. And for me to do that, the square we have a body and we now put a hover rider. So we'll go ahead and add a background square and copy this and slightly go ahead and make that the square ahead and say, I want this to be lighter anytime I bring my mask closer and square and sit. So if I get my mask so you can actually notice that I'm hovering over that. Alright, that is cool. Now, I think we are being much in here. Now, let's hold to index here and we're going to copy this data detail. That is everything right here. We're going to design the background. So then go ahead and bring this up a little bit and go ahead and press that. And now I can go ahead and add a box shadow. So to add the box shadow to this. Let me say that the box shadow is going to be five pixel by five pixel by ten pixel. And now you can see that looks good. But that is good to be the background. And let's go and add a pattern. To that, so a pattern is going to be that of 25 pixel. Let's square and make that to be 25 pixel. And let me go ahead and make the minimum weight. So let me say the minimum width is going to be like 350 pixel, and that looks good. Alright, now, for the boa reduce, let me say that the boda reduce is going to be 50 pixel. Alright. So you can see that the bottle redis is now 50 pixel and that looks so good. Now, what if let's qui and make the flex? So let's qui and say that the display is going to be flex for this. So save that, and let's give the flex direction for this is going to be column and save, and that looks good. Alright, now, let's go ahead and align everything to the center, solar square and say I'm going to align everything to center and now and the center. So one more thing is that I want to change the background of this. And now I want that background to look like let me say a weather background where it contains the soil and the heat. And that is where I'm going to use a gradient for this, Sonquae say a background. And instead of a background color, I'm going to say background, and let's square and a linear gradient. So for the linear gradient, it's going to take first the degree and for the degrees going to be 180 degree. And then the next one is the color. So let me see the first color is going to be blue, and the next color is going to be, it's going to be orange and check it out. Now, that looks better, right? But I just want that undoes or I just don't want this to be deep. So let's go ahead and make this to be light. Let's say it's going to be light blue, right, so this is going to be light blue, right? And let this be light orange. So safe. I hope that is cool. So I don't want that to be thick blue and thick orange. Now, that is it for these data details. The next thing is, I'm going to touch all this paragraph. So to touch a paragraph, let's go ahead and give it a margin so that we are going to adjust all the paragraph. So for the paragraph, let's go ahead and say that the margin is going to be equal to I'm not allowed to be zero, check out this is truly compressed. So let's go ahead and say it is tem ti zo by zero, and the little bit better. And I can also increase that to be like maybe 20, and that looks good. Alright, now I want to leave that for 20, but if there's a need to change that, I will also change that. But for now, I just want that to be that. But for the fact that I'm going to make more changes, I'll go ahead and make that to be like this, so at the end, I can now start working on that. So let's go ahead and work with the h one, which is D well. For the one, I'll go ahead and say, Let the font weight. Let the font weight be equal to four RRE, alright? And save. So sorry, I mean, that it should be the font was should be bowed, and that is bold already. So SQ hadn't changed it to be font size. And let's change that to be ORE. Alright, now, that is coool. Alright. So we go ahead and say that, uh the the font weights, we don't need to make it bold because it's already bold. We haven't made that up here to be bold. So what I now is to go ahead and give it a color. The square and say for RME, then give it the color and let the color be equal to white and safe, that is white. And now let's go ahead and remove the margin on top. So maging top is going to be equaled zero, and that has gone up right now. So margin bottom, the squared and give the maging button, and live that will be equal to 30 pixel. So we now have enough space between this and what that is down there. So the next one is, let's go ahead and touch the temperature, and for the temperature, go over here and copy this. Alright, now, let's go ahead and pass that for temperature. So remember this is a class. So we say that the font size, let the font size be also equal to four RME and save. And let's go ahead and give your font twit. Font with and let there be aqua to board and save and cool. Now, I don't want this to be black. I'm going to make that square and say colour is black, you're going to reduce the blackness of that. So reduce there and save, and that looks good. So that's how I want it to be. Now, the next one is the humidity. So for the humidity, I simply go up. Let's go ahead and move this a little bit up, go ahead and copy this for the humidity. And I'm going back here, I war ahead and say that humidity. Then I'll w and give the font to it. So let me say the font weight is still going to be just bold and save. And then we go ahead and work with weather description. And for the weather description, I'll go ahead and say that's what I description. So for this, I'm going to say that the font style is going to be italic. Right and let the font weight be equal to both and let the font size. So let the font size be equal to 1.5 rem and 70s. So running was taken to get rid of dies. Now, that is it. So for the image, Squire and C dot go ahead and say that we image quiet and copy that. So copy the class name and go ahead and paste that paste that's right in the air. And let's go ahead and say, font signs is going to be five RM and safe, and now the image is a little bit bigger. So how about the school? Now, when you don't have a city name, go ahead and copy Errol city name or no city name. Let me say no city name instead of o city name. So no city name, go ahead and copy this. Initially, you save this. So shall you save this, and let's go ahead and say that's no city name. And for the no city name, go ahead and say that the font style is going to be italic. And then let the font weight let the front weight be equal to bog and safe. Say, he says, Please enter a city. So please enter a city. That's why I don't remove this. He says, Please enter. The enter should be in a lowercase. And let's go ahead and save this. So please enter a city. Alright, so this is all the CSS that we need for this project. Now, let's go ahead and get rid of this because this is going to be gotten from the water API. I just to design the way they look whenever we get them. So now we simply go ahead and get rid of everything that is white in here. So why and delete that and save, and that is the only thing I have. But this is not going to remain here because it should just show whenever we click on V Weather, right. Now, to get rid of that, all I have to do is go back to your uh, innect a HTMO and I'm going to see Sty is going to be equal to display and display none. And we have gotten rid of that. Alright, so that is all for the index, the HTMO and the tie, the CSS. So for all this stuff, all these classes we use here, we're going to call them using the class list in JavaScript. So now it is time to move over into JavaScript and let's move on to the next video lecture and the kickoff immediately. So thank you and see you in the next video till we get to the end of this without application design. Thank you and see you then. 11. How to Build Weather App Design (Part 2): In this video, we go ahead and get started with the Javascript side of the weather application. We started in the previous lecture. Let's go ahead and make references to our index dot HGMO. So the very first one here is weather data. Go ahead and copy this. And over here, I'm going to make reference to that. So Cs, weather data is going to be equal to documents dot. So they are classes and they're not ID, so I want to use a query selector to get that. So I'm going ahead and say dot weather data. Supersam run at the end. And the next ID here is a city. So for the city name, go ahead and say Canst Can City, that is a city is equal to document that query selector, and that is that city semicron at the end. Then this is a CST. So the next one ID we have is the details, the data details, go over here and go ahead and say cost data details is equal to document the query selector, and I'll go ahead and say data details. So put a semicron at the end. Then the next one is our API key. So we need an API for this, right? So for EPIKy, simply go over to your Openwa map and click on this and go to my API keys, and you're going to see API. So I'm going to use one of them. So I'll go ahead and copy this. I have created one. I just named that City, and I'm going to activate all the APIs after this lecture. Please don't try to use this because this is not your own API key. Alright, go ahead and minimize that. So for the API key, I'll simply go ahead and say, A PIK and let that be equal to this. So it's going to be in a string format and go ahead and save this. Alright, now we have done justice to that, and over here, we have one of these, and that is the button. So for us to communicate our button, I'll go ahead and copy the type of the button, which is a submit, and I'll go right in here. All I need to do in this is to go ahead and add an event listener. And this body is under the class called Weger data. So anytime you get the city name, you go ahead and view the Weger data. And then I'll go right inside A and I'm going to say Weger weather data that invent stNa and then I go ahead and give the type to be the submit, which I just copied right is now, and I'll go ahead and give the function, and I'm going to make that to be assync function because the reason why I'm using the ascent is because I'm going to use a promise, there should be a resolve I will reject and also going to use the weight because it's going to take time to fedge the data, and in that way, it's better to use a promise for this. So invent type is going to be invent and we go ahead and put up this. So this is the very first function here and I'm going to add more functions. And the next function is the function for get weather data. So guidelines say function and let the name be equal to get data. And this is going to take the parameter of a city city name. All right. So whenever I have a data, a city name, go ahead and get the weather data and going to create another function, and the function name is going to be display display with details. So for the data we get, you have to display the details, so display with that details. So that is a function. And this is going to take a parameter called data info. All right. Now I'm going to add another one, and that is going to be the wetter Image. So function, and that is going to be the wetter image. So going to get with IMG. And the parameter for this is going to be with ID. So I'm going to show you where to get with ID because we need that. And function last function I need, let's go ahead and say function, the last function name is going to be display arrow. So if you don't put in a name very well, this its name, there should be an arrow. So I'll go ahead and say display error. Alright, so that is going to take nameta corded message. Alright, so now it all this, and I believe that is what we need for now. Now, if anytime I click on Weta A Check OTs, you can see that this is actually the freshest. You see that? And I don't want that. I just want anytime you click on this Weta up, it goes on to show you your results without freshen this page. So to avoid freshen the pages, all I need to do is to go right inside here and I'm going to say event that prevent default. I want to prevent that default function there and serve. And now let's go ahead and check it out so you can see that Pit does no longer refresh again. Now, we have assumed one thing very, very good because it's very important. We don't want people to always see their name refreshed. Now, I'll go ahead and say, I city if city. And for us to have this city, don't go ahead and remove this fossip because I want us to do something important. This city, I want to give it a variable name. And for that case, all I have to do now is go ah and say Const. City name is equal to city dot value. All right. So remember that our city is actually just enter city that is the ID, right? So I want to get rid of this so this doesn't actually appear here again. So our city class is for this input. So now I add a variable core city name so that is going to collect the inputs from this city class, right? And that is what I'm going to be using right in here. So I'll call in the city name. So meanwhile and see if if a city name. Right. So if you enter the city name very well, then go ahead and execute whatever it is inside here. Else, if there is no city name, then go ahead and call this function down here, which is a display error. So I'm going to call function to display, and it text a message, and that message is going to be is Enter a city name. So if you not enter a city name at all, that is when it's going to show enter a city name. But if you make a mistake in the city name, I'm going to enter create another one that is going to show that. So we're going to do that step by step. So go ahead and save this, alright? So now I'll go ahead and write something under this display arrow, and all I have to do is to go ahead and create an element of that. So nst no city name. So you're not enter any city. So go in and say, document that creates element. And the element you're going to create is a paragraph tag, and that is the type of element you want to create and no city name that text content is equal to message. Alright, so the memo of the message is this message here, please enter city because we pass in a parameter message right in here. So the message is this, please enter a city. So put a semicron at the end, and then no city that class list. So the memo under data de tos, we have removed everything we did what we criticize on classes before then. So let's go ahead and for No City. So no City, go ahead and copy this N City class. And going back here, we're going to add that class right in. So that's add class. So we ahead and add no city. Alright, that is it. So put this and save this. Now, for this to actually appear, we have to ensure that we append that inside the data details because that is where it's supposed to appear. For that to appear in day, we simply go ahead and see data details that text contains is equal to empty string. So play whatever is in there. And now quiet and see data details that story that uh display. Sorry, is that the toll that's tie. So that is pot correct. I don't know why that actually shows. That's display. All right. So let that be echo to flex. I press a micron at the end of that. And now we go ahead and paint this no city name inside the data details. So data details that append child. And the child you want to append is no city name. I put a semicron at end and then go ahead and save that. So right now, go ahead and click on this and you can see, please enter a city name. So that actually works. So it has cl whatever's in there and says, Please enter city name because I did not enter any city. But if I go ahead and enter something like Hello, remember that hello is not a city name, and check it out. Go ahead and try this again. So let's go ahead and say, hello, and nothing appears. Alright. So go ahead on webdate and check it out. Please enter a city NAN. So that means we are moving, and that is very trusting. I somehow have completed the display function. We don't need to write anything again. I'll go ahead and close that. So for the what data, we have to actually say I a city name is not given, what happens? Because when a city name is not given, we display the display arrow. So if a city name is given, what we need to do is we're going to use a try cache so that if there's an arrow, we're going to catch that. So let's go ahead and say try cache block. So I'll go write NA, and for the arrow, that is the cache. I'll go ahead and say console that log or console error because you are talking about error. Console that error and go ahead and print the arrow. And that is going to show the console. Now, if you want to actually show that on the screen, then go ahead and add display error, and then go ahead and show that on the screen so that it will show. Alright, accept that. And now, what if there is no error? So under the try, go ahead and C counts, and go ahead and see whether get weather details. Of any name or any city that's entered, get the weather details. And because you're using the promise sync where go ahead and enter a wet function and gem called the Gate weather data. So that is this down here is Gate weather data, not Gets D. So service again, qui and CG weather data function. So this get weather data function, we go ahead and pass in the city name of the weather we want to get. So qui and C city name. So which city are getting the weather data. So guide and pass in that into that and put a semi colon. And next, we'll go ahead and display the weather details from the city we just entered. So we call the next function, display weather details of that city. And then we're going to give the details of the weather details, pass in that inside here. Pull the semicolon, and this is all we need for this function and go ahead and close that. So we're now going to work on this one, two, and three. And that shows that we are moving. So the next one that we have to work on is the Gate weather data. And to get the weather data, we have to go back to openweathermap dot g and go under current, check out this URL, openweathermap dot g slash CRNT and you're going to get the Callback function for JavaScript code. And that is this. This is what we need. Go ahead and copy this for your API. Ahead go ahead and copy this. So if you copy this, go ahead and minimize this and go under the get weather data. So under here, we go ahead and say, cost my API URL. So you have to make references to your API, and you're going to use a backtick for this, sure you do that and pass that we should just copy it, right? And now, if you pass that, all you need to do is you have to remove this London or UK, and over here, go ahead and set a variable of this wire and insert is variable, which is a city name. So go ahead and insert city name, which we created. And then for the API, we go over and go over here, and this is API key. So where I copy this, that is a variable we're going to insert under this API. So go ahead and put in $1 sign and remove this to change to API. Put us a column at the end of this. Alright, now, we want to create a response as we are trying to connect to our EPA to do that, quiet and say, Const response. Use response is equal to a wait, so we can have to wait for that to fetch the data from our API URL, my API URL. So that is where the data is coming from. So let's go ahead and check the status of our fesh HTTP response from this place. And to do that, go ahead and say, Cosle Doctor Log and go ahead and enter response. Place the Micron at the end of that. And let's go ahead and save this. And now I can enter in the name, then go ahead and say London. Alright, so I click on this immediately. First of all, go ahead, Enter London first. So London and Enter Wa. Now let's go ahead and expect that again. Alright, so we're here, go about Console and click on Console. We have one response now. Click on that response, and you see that the response is okay. Okay, it's true. And now the status of that response is 200 showing that our API key is working very, very well. So status text is okay. Now, what if I go ahead and change to on D. And that is exist, and click on this. Check out. I have an arrow right in the air. And if you open this, you can see that my o is force, and the status is 400. So this is why I refresh this and check it out again. So go ahead and enter on deep K. Okay, on D and check it out. I don't know if that actually exists and check it out. And our o is force, and the status is four oh four. That does not exist. What if we go ahead and enter Clay car and lads and enter something like Delaware, and check out again. So our response is very okay. So, okay, true status is 200. Status texts, Okay. Now, how about it's cool, Guy fresh that, so we can see that our response is really working fine. But one thing important is if our response is not okay, we have to go ahead and splay a message. Let's say maybe the name does not actually match. So for that, gha and say, I response is not okay, so go ahead and say, if not, response dot o. So, if not, responds that Okay, then we go ahead and throw new error. So go ahead and throw you error. And the error is going to reservati. I'm going to give you back the name you entered. And to do that, go ahead and say a city name that is a variable city name. Is not a city name. All right. So go ahead and save this. And now we return the response object in a JSO format. And to do that, we simply go ahead, go ahead of semicroun that here. We simply go outside each statement, and then we go ahead and say, or return a wait because you are using the promise. Response that's son. So we're going to return that in a json format, press onicron at the end of that. Now, if you go back right in here and I say cons we details, if we get the weather details. So which is this function now, we have to display the weather details. So if we get the weather data, we have to display the weather details. So we have to work under this in order to display whatever we have gotten under here. So for that to work, we have to move right inside here. Well, before the end, let me go ahead and close this function and go ahead and close this function. So it can be able to take that one step at a time. So let's go ahead and move in sty right now. So before we go ahead and move into A, we have to test and know if this actually works. The response that Okay, if the name, but we can't be able to get the data because you have not display work on this data. So if I go right inside A and I'll refresh this and say, London, and view without it tells. He says, There's no without detail because I've not actually worked on the set unexpected TokuE test, u is not valid just on fi. Now, if I refresh this and check the arrow, sell Londo. And now view this. We can return Londo is not a city name. Well, the water data has not been worked on, and that is why we're having an arrow, but the name is not valid, and that is why you can see that action works. So that means we have to work on whether the tail and kick start immediately. So go ahead and minimize this again and let's jump in and start off immediately. Alright, so let's start by checking out the data of any city we collected. So the first thing I'm going to say is console dot log. And then we go ahead and pass in data info. Alright, so go ahead and set this because this is coming actually from here. So pass in data info and put the semicron at the end of that and save this. Now, let's go ahead and enter London, say, London, and check out this. Now, let's go ahead and, uh Alright, so anytime we enter any city, maybe London, and we are having this arrow. So that should be from our EPA, maybe have to rename or change this NPA. So what I need to do is to go back to this. We can copy one of these APAs. Check out this particular one, and I hope that we connect the arrow that we're having. So here, copy this particular one and go down because if you go to pricing, you have a free once used. So you might not to So what you're using might be a paid version. So you see a free one, that is what you should be using. So go back here and pick this particular one. It should be a free one. You don't need to pay for that. So the arrow might be coming because you are now you're using the paid one. So go back here and let's go ahead and paste this right inside here. Alright, now what we need to do is to still go back and change this London. Let's go ahead and change this London to our city name. So city name. And for our EPI URO, I'll stick go ahead and copy this um, API key. So we copy this API key and replace this one right in here and save this. So let's go ahead and enter this to be a variable. Now, let's check out this. So go back and enter London and view and arrow is gone. So you can see that actually corrected that arrow. And now we can simply go ahead and view the data in four. So remember I added a console log inside entity data in four. Now go back and close this function again and close this function. And let's deal with this. So over here, I'm going to inspect this and go to console, and you can see I have my object, and I have the response. So the object contains what the clouds, the ID, everything. And the response dA, it says is true, and the statute is 200. And let's go over and check out this. Now, insideA you can see we have a everything that we need to actually work with this, right? So you can open up this header, and you can see that we have everything we need to work with this. So then I'm going to minimize this response. I'm going to work with it just an object that was actually returned. And this RDA, we have the main. And for the man we have the humidity, we have te temperssure, and this is in coven. We're still going to work with that. And the water is over here. You can see the weather, and everything we need is actually here, right? So I'm going to open up more Vds, so Ghad and open up this. This is the weather ID. So this is the icon for weather ID. So I'm going to use this weather ID for the weather image. Alright. So I'm going to show you how to work with all these. So I'm going to leave this open as it is because I'm going to use data from here, and the data I'm going to use is the city name is Please go ahead and check out the city name is London, and you can see London is here. That is the name, the city name. Then under Maine, I'm going to use the humidity. I'm going to use the Tam. And for the water description, which is this, that is description, I'm going to use the description, which is this. I'm going to check that out, and I'm going to use the ID. So how do I do this? Go ahead and go right inside here. I'm going to say count some to create a variable of all these. Counts is what is inside an array, okay? And I'm going to say for the name, the name is going to be the city name, right? And then for the main, which is this, we're going to copy the main. For the main, I'm going to assess the following under the main. That is the term and the humidity. Alright, so these are the things I need under the main. And for the weather, which is this one right in here, is an array. So I'll go ahead and say, da. And because it's an array, I'm going to an array function. I'm going to copy the description. I need the description. And I need ID as well. Alright, so that is cool, so go ahead and ensure that everything is okay. And that is it. So everything right in here is going to be equal to that info. So to make run at the end. And let's ensure that everything is working fine. So this is description. This is a Description. Alright. And for this description, I need to add a side A. Cut this. I think there's a mistake. 'cause I'm seeing an error. So for this description is an array, and then inside the array, we have to put the Cory brace and add the description and ID. And now everything is okay, because it's very long, I think it's really confusing. So let's go ahead and share that. I'm going to bring out the men, then I'm going to bring down the weather, and that is cool. So go ahead and save this, and I'll go ahead and close this. So I've gotten what I need. And the next t now is to create all the htmr elements for the data details. So under here, I'll go ahead and see Cs display city is going to be equal to documents that creates elements, and that is the one. So remember we deleted all these. So we deleted every of these when created all of them. We added a CSS type for every one of them. So I'm just y ahead and put them down and then why head there, correct. Every one of them. A right. So the next one is display display time, and that is a paragraph. The paragraph, and then the next one is display who made a T, and is also a paragraph. Then the next one is with a description, and that is also a paragraph. Then the next one is with a image. And that is also a paragraph. So sadly it's created all the hash timer elements, and we don't need much again. So what we need to do now is we have to change the text content of each of these element to just create it. So to change the text content of each of this element. So for the displxity, I'll go higher and say displacity that text content and let that be equal to city, right? And for the display temp Alright, so now that is just this display TEM, that text content is going to be equal to this. Ram this is pointing to this that this data in folk get. So any of the data in folk get to go ahead and get a name. So to text content is going to take the name. So for the temperature, that is going to be TEM and the coma and save this. Then this temperature is going to be in CVI. So go ahead and put a Bate, and I'm going to say, TEM Calvin. I got a cool, so quiet and TEM. And as a variable, I can go ahead and say TEM, and I'll wear ahead and add calvin at the back. Alright, that is cool. Then let's go ahead and display the humidity. So for the humidity, I go ahead and pase this and I'm going to say humidity that uh text contents and lead that points to humidity, which is this, we copied, and pass that humidity, semicolon. And then for the weather, which is the description, that is, that text contents is going to be record to description. And then for the weather image, for the weather image, quiet and copy this. That text content is going to be equal to This is now going to Get weather image. I'm going to take this ID, which we have here. I'm going to place that right inside here. So I'll do that step by step. So our wire and C is function uses a G weather image. So guy and pass in the ID right in there and create semicon at the end. So now that we have changed the text content of each of the data we just get, we have to give you a class list so that all the classes we created here we go ahead and attend that to each of all the HTM element you just created. And to attend that, go back right inside here, and all I need to do is to go ahead and say, for the display city, we don't create. There's no class for the displayity, so I display them. So I can go ahead and copy this. And for the display them, I'll guy and I display temperature that class list that at. I'll go ahead and add the class, we just created for that. And for the display humidity, Go ahead and copy the class name and that is display humidity and you go over here, I say that class list dot add, then we go ahead and add the class list. Then the next one is Weta description. Wha description that class list add, then we go ahead and get the Weta description class, and then we enter it. So enti. And the last one is a Weta image. So for the Weta image, it's going to be that class list that's at. Then we go ahead and pick it up from here. That is a Weta image, I whead and pass that and put a semicron at the end, and that is it. Now, let's go ahead and save this. A way ahead and enter London and check it out. So we have not actually called this. Go ahead and save this. So to cut this, we have to append each of these, just like we did down here. We have to append each of them, each of the chide to the data details in order to show this. So just like we did here, I'll go ahead and copy this, and I'll go over here, and then I'm going to append that. So append two, three, four, five, Alright, so that is five. So for the first one, that is the city name. Copy this a pen city name to the hide data detail. So the data detail is this class wording that contains every one of them. So I'm going to pent display them, wire and a pen display them, append the homility, then append the weather description, then append the weather image. I save this. Let's check if this is actually working, and I'm going to say London. And that is not working yet. So check it out. That is not actually working yet, so we have to check what the error is. Alright, and that is actually walking. I've not saved my file, please ensure you set your file all the way so you don't run into a problem. Let's poster for entre London. Let's say Lando. And that says Londo is not a city name. So let's go put London and check it out. Alright, so arrow Londo is not a city name. So have to play this arrow. If the name is correct. So Londo is this, and it's a humidity, we have to actually add something to this humdity. And this is shown in Colvin and it's also showing Londo. Now, in order to play this, in order to play this, what I need to do is, I have to come over here and let's go ahead and declare this. So I'm going to say data details. That text content is going to be equal to clear data detail before displaying anything, and data details that tie that display is going to be equal to flex and play semicolon. And now let's check this out again. On Dow. Okay, let's start with London first and check it out. London is not a city name. Then put an N and check it out. So London and it translate the arrow because we did not play this before. So, to convert these to Assis what I need to do is to simply go over here and that temperature. So on that temperature, I have to go under here and I'm going to say, copy this temperature here. Cordis and place that inside. So temperature -273.15. And now I want to ensure that because this is a disimal point, to ensure that this does not add so many decimal points squared and s dot to fixed, right, one dismal please. And I'm going to change this to Celsius, right? So change that to Celsius. So also add a symbol or degree right in here. Alright, now, if you go ahead and save this and check out London again, London and check out this, so that is now Sahi. So this degree, we have to add percentage for the humidity. So for the humidity, I'll go right in here and I'm going to copy call this humility. Using a backtick. I'm going to say Humidity is going to be equal to humidity. So pass that and put the percentage at the end of that. And now you save your file, please ensure you sell your file, and I'm going to say London and check it out. So humdity is 92%. And let's check Texas, and that is 120 points. Okay. That is 12 degree, and that is missed. So we're not guessing the image, so we need to show the image. That is the last thing that we need to display. So why enclose this, and I'm going to close all the functions so that I can be able to start up immediately. So what now remain is the image. So for the image, I'm going ahead and show you how the image looks like. Under your openweathermap dot, Og, we have these images, and you can see we have all these images. But in order to use that, we have the weather condition codes for this image to show. So from that, we have a Thunder Storm and Tat sto is 200-232, and Rizzo is 300-321. Then NN is 500-51, then snow is 600-622. Then atmosphere is from s hundred to 781. Clay is 800. White cloud is eight oh one to eight oh four. So I'm going to work with all this code. And for us to do that, we have to use a switch statement for that. So go over here and let's move inside get water image, and I'm going to use a switch statement for this. So for this, I'm going to say if this weather is true, let's say we get the weather and the water is true, for the first case, we're going to give a condition for the Weta, and that is wetter ID. So if the weather ID is greater than or equal to 200 and wetter ID is less than 300. So that is going to retur Let's go ahead and remove this break. So we're going to use a reton here. Return an image. So open up your windows, and we're going to select Thunderstorm and that thunderstorm is this. So that is your range 0.200 to below 300 is for Thunderstorm. And then Cang go ahead and copy this and square ahead and pass that. So you move back. Alright, so for this, I'll go ahead and say between 300 and below 400. That is for rain. So you can always check that out to see what it is, and this is for rain. Now, go ahead and do the rest, why you check it out. So I've added everything. So you go ahead and check out between 200 and below 300. That is Otana Stone between 300 and below 400, that is for this rain between 500 and below 600, that is for dropping of rain just different fresh and boat I added O that is an MOG. And for 800, we have that 800 is absolutely clay. So from here, this is 800. There's no rain. So clay weather is 800, and that is clear sky. Alright? So guide and minimize this. Okay, so that is it for now. Let's go ahead and check this out again and let's go ahead and enter London. And let's go ahead and get the view. And now you see we have few cloud and image is not showing. And what of dela W and check it out. That is this. That is Cleski. So you can see that we can get different thing and tex and check it out. Texas is Miss. And Man Chester and Chekar Machester is a cast cloud. So you always compare this with your Google or any image out there to ensure that whatever your health is actually dissenting. Well, because you're getting everything from the API of open without map, it means that it's generally dissenting all over the world. So put this down, plot on with it, and if you have any question, go ahead and use the question and answer section and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture. 12. How to Build a Digital Clock: I will call you back again Tanaa Villa Lecture in JavaScript. And in this JavaScript lecture, we go ahead and lay how to build a digital clock from scratch. So very before you is that these two clock, and you can see that this actually works. You can see the seconds, you can see the minutes, and you can see the hour. And very soon, this will change to Ta seven. So you can see that the seconds is actually working, and now we have 58, 59 and 37 is here. Now, let's go ahead and quickly learn how to build this. I'll go ahead and close this. And then we move over to Index at Hechtimo and right in here, I'm going to create our Div tag. So I'm going to operate the div tag and I'm going to say this div and right inside it, I'm going to have added lift tag. And then the very first div is going to be the container. So we to say that the ID is equal to container. Alright. And for the second one, then the ID the equal to clock. And then for this clock, we'll go ahead and just add in a placeholder, Zerser the Z zer, the 00. So this is all I need, and you can see that is right in here. Now, let's go ahead and move over to Title CSS. And for title CSS, I will go ahead and start off immediately. I'm going to get this to the center, and then after we change the background. So I'll go ahead and move to Si and the container is or the ID is for clock. Then we'll go ahead and start with this clock, right? So, well, if that clock should be the very first one, I think I should, first of all, take in the container. So let's go out and get a container so that this will be at the center, and I'll wire and say, for this, I go and place this container here and let the display is going to be flex. So that is flex, and let's justify the contents and is justified to the center, and that is it. Now, I want these to actually align co down at the center and be at the middle. And for me to do that, I'll go ahead and I use align items and let them be center as well. And now you actually see that. So what I need to do is, let's go ahead and give the height. And let me see the height is going to be 100 VH. So a VH, and let's save. And now you can see that has moved to center. And then that is for just the clock. Now, let's go ahead and that is for the antenna. Let's go ahead and move to the clock, and the clock ID is what I need, and go ahead and place that. So for the clock, Lunuyn set the the font size. So I'm going to say that font size is going to be EM, and that is really too big. So let me go ahead and change that to 5:00 A.M. And that is okay. So you will have to adjust this to your own size and how you want that to be. So let the font family. So the font family is going to be the very first one I have here is what I choose and let the font the font weight is going to be bold. Save this, and that is what I have. Alright, so the maximum I have is I'm going to save this for now. Let's go ahead and deal with the body. So go ahead and say that the body of this, I want an image to be here. So I have an image that is here and the image name is big dot JPG. So go ahead and use that. So then go ahead and say that the background image is what I need, and I'm going to use the URL and the URO, I'm going to enter the name of the image and the image is this. Alright, so let's go ahead and up up this. And this can actually misbehave because it's not at the center, I can say that I'm scrolling this. I just want that to be covered everywhere with task y. And for me to have that, I'll go ahead and say that the background. This guy say the background position. This guideline gave the background position to be center. And it's correctly now at the center. Now, we go ahead and make sure that it does not actually repeat. So got say bug wrong, repeat. And we have no repeats. Save that. And right now, we still have dust scroin. So let's quit I use a CVA. So I'll go ahead and say bug round size and let that be cover and serve this. And now we're putting that again, and you can see that actually looks better. Okay, so in case you have an image, the image of them to repeat. The image is a center and the size is also covered. I hope that is cool. Now, let's go ahead and make the magine say the magic is going to be let me say that the imaging on top is going to be zero, so that in case it puts in any browser, you moroll it to a problem. And now you can see that the image no longer screws again and the image is fixed. So I hope that is cool. Now have a ship this pops, and that is settled. Now, I'm going to change this clock to be white, so I'll go back to my clock and I'm going to change the colour, so let the colour be equal to white and save this, and that is it. So Tran is cool. Now, if I want to add in anything maybe at the back of this, I can go ahead and add in maybe a blow so that I don't want to see any white stuff at the back because I see for the image, there's some white stuff at the back and it reflects on the clock. And I don't need that, so go ahead and blow that. So what I say B wrong drop fa, and I go ahead and say blow. And let me say this 100 pixel and safe. And now the image can now be seen and nothing is at the back, nothing is behind. And that is cool. So that is it for now for this type of CSS, and now let's square ahead and move over to script Js. That is our Java script. So I want once we open this, the clock will start running immediately. So let's square in the save function and let the function name be equal to R clock. So Run clock, how that is the name. Right. Now, that is a function, so I'm going to cord this function again because I just want that to start running. So I'm going to say Cronk lock. And with this Cronk lock a cord my clock will start immediately. Now, all I need to do all I need to do right now is to go ahead and declare these variables for Cs now because it's going to pick the correct time and date. So now equal to new the eight, so I won't be starting tomorrow while starting immediately. So Cs I'm going to declare the, the minute and the seconds. So Cs is Cs RAS is equal to. Let's say that is now dot get hours. Now do get Rs and put semicolon. And for the minute, Cs minutes and let this be equaled. So now that get minutes. So for the seconds as well, we go ahead and say that is counts seconds. And that is now that get seconds. Alright, so go ahead and set this? And now that we have this, I'll go ahead and create a variable for this. And I'm going to say what is equal to counts. I'll call it to call that Time starts. So time starts, and that is equal. I want to use Bati and I'm going to enter all these variables I've just declared, and I'll start with the R for hours. And I'm going to Enter the next one. So remember to put a colon for minutes. I'm going to enter the next one for seconds. Alright, go out and put the semicron at the end and save this Okay, now I still have this here. All I need to do right now is to go ahead and get this ID, which is a clock. So I'm going to get this ID, so it's go to dispar inside. And to do that, all I need to do is to go right in, and I'm going to say documents that get element by ID, and then I'll go ahead and enter the ID, which is a clock so the ID name is clock. So I hope that is cool. Clock. All right now, and I'm going to replace that with everything that we have already declared here. So dot TXT content, dot text dot contents and let that be echo to time stat and put a semicron at the edge. Now, wash on I'm save this, this is going to change. So we can see that actually changed to the current time and time that we have. Alright, so we don't have a let's go ahead and continue. Let's go ahead and save this. So if I save this by myself, and I keep clicking on this, you can see that it's changing. But we candle the doing this by yourself, I want that to actually repeat by itself. So if I want to do that, I will take the running time. This is the wrong clock I have, and I'm going to set an interval of every 1 second that the clock should be updated, and I'll go ahead and use that as a callback, put that right in here as a callback, for your conga. I now I'm going to enter 1,000 seconds, and that is 1,000 milliseconds, and that is 1 second. Now, check it out. I save this, and you can see that the clock is running on its own and no longer person dead. So checking out on your own code and you can see it's working fine. Alright. That is so cool. Now, I'm going to try something, wash, why these runs, and this is going to get to 50, and it's going to start again. So I'm going to pass this onto Guest 50, what is almost getting there. I want to see something, and we have to actually work on that because I'm working currently in the evening, and I have 17, and 48, you'll not actually see what I'm talking about. But when this gets down and very soon is actually here, you can sit down with zero, one, I want it to be zero, one, zero, two, zero, three, and that is applicable to every one of these. And I want this 17 to be equal to like in hours in formats of 12. I I don't want her to get to 17, 18, and so on. So for us to actually do that, what I need to do is if I on this, I have to go ahead and move to AAS, and I'm going to change this AS. It's no longer going to be constant. Let's go ahead and say let, let R. And we go ahead and say the crea a Meridian, and I want to say const. Comes meridian is equal to hours. And if this is actually greater than or equal to 12 hours, then we go ahead and put that to be PM. S, we go ahead and say that is am and put a semicron at the end of that. And now we are going to use code hour. So us is going to be equal to hours modelos 12. Then we go ahead and divide by 12 and get a reminder. So if that actually has a reminder that means, it has moved over to the next. You're not going to get to one, two. It has to start again from one, two, you're not going to get to 13, 14, 15. So el it goes back to 12. So when we use the statement or the operator and move that back to 12. And the square has set this, and now that is five. So consider that we are still working on five. We are working at a time is currently five. All right now have achieved this. But you can see that this is five, and this is three. I want it to be 05, 03, and Zoo anything. And in order to achieve that, we go ahead and move that to string. And to move that to string, all I have to do is I have to go over here, maybe for seconds or any one of them, I can go ahead and say dot two dot two string. And I'll go ahead and say that's two pat though to pad starts now I'm going to pad that with two, starting for very first one. So and then add a zero for anyone that is single and why he and copy this. And I'm going to pase that here. And for hours, I will also go ahead and pase that. And to pay for hours, I have to go ahead and say hours is equal to us that to string. Then go ahead and save this. And now everything in house moved to zero, zero. So now everything moved to zero, zero, we go ahead and check out and make sure everything works fine. So let's go ahead and call the constant meridian, we enter the air. Let's go ahead and also add that to here. Go ahead and say this is equal to this. And let's go ahead and save this and check this out. Alright, so everything is okay. We have equal to R, which is equal to ours as well. Alright, save this, and that is what we have. So that is really so large, I'll go back here and I'm going to reduce the size to be like a 3.5 pm. Alright, so how is cool. So in actual way, I'm making some recording while working on this. So this might actually get so little so small on your own browser. So we can also go ahead and increase that. And I can also enlarge this. Maybe you can take that to 7:00 A.M. Based on whatever you're working with. So you are free to tweak this, and let's go ahead and open up this. And now we have a 05, 54 and 55 seconds and at 6:00 P.M. So you can see that actually works. So that is a way you can be able to bet your these two clock from scratch to finish. And this is not actually moving anymore because you have already fixed this. So put it down, log on with T. And if you have any cuchon, go ahead and use the crochet and A section, and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture. 13. How to Build a Stopwatch: I will call you back again to another video lecture in JavaScript. And in this JavaScript lecture, we go ahead and learn how to got a stopwatch. So before you, you can see a stopwatch and you can see that that is actually working very, very fine. So I have not gotten to AS because I just put this on for selen minutes ago, like 2 minutes ago, as you can see from the stopwatch. So I'm just waiting for that to get to us, but I won't be waiting for that anymore. So let's go ahead and say, Oh to stop this. And then that actually stopped. So you can see that it's working fine. And I can go ahead and start again, and it continues for the way it stop. So you can see that that is a very beautiful system, and it is working very, very, very fine. And let's go ahead and stop that again, and that actually stop, you can start. Now, let's go ahead and reset that and check out and make sure that that is working fine. Go ahead and click on Reset, and everything has gone back to zero. Wow. Now this square head has start again afresh. So that is from the beginning and my stopwatch is actually working fine. So go ahead and kick off immediately. So I'll go ahead and minimize this and I'm going to the late days. Alright, so now everything is setting afresh. First of all, I'll go to my index dot HGMO and right in there, I'll start here. And the very first ten is to create a hash one. We are going to name that to be stop Wash, and that is it. Now, I want to give this an ID and lead ID. The ID name is going to be hash one, stop. Wash, and I'll go ahead and save that. Now, I'll go ahead and create some Diff tag right in here. So square ahead and create a def tag. And this diff tag is going to contain another diff tag inside. Okay, so the very first diff tag is going to be the container. So let the sky ahead and give it an ID, and let the ID name be container. And the second dif tag, I'm going to give that ID of let me say, display. Alright. Now, we're going to start by displaying the default, which is a 00, column zero, zero, column zero, zero, ***, 00. So the first one is hour, the minutes, the seconds, and the mini second. Very, very important. You know about that. The mirror second. Alright, now I have this, and if I save this, let's c on sieve and I want to refresh this and you can see stopwatch and that is it. Now, I need to add some controls like the starts which is CD then the stop and your set. So let's go ahead and create another Diff tag. And then this diff tag is going to control the buttons. So I go ahead and give that an ID, and let the ID, I'm going to give that BTN controls. So this is where all my controls are going to be. So the first control, I'm going to add that as a button and let that be a start. Then I'm going to give that an ID let the ID name be equal to BTN start. And then it's going to have an unclick. So we're going to listen to that for our Javaslp. So unclick. And then the unclick, which is a functional name is going to be a start. Alright go ahead and serve this and I can see I have start. Now let's go ahead and copy this. I'm going to copy that, and I'm going to pass that for the other two. So the next one is going to be BTN, S a and then I'm going to add another one as a BTN set. Then I'm going to change this to stop, and then I'm going to change this to set. And this is also going to be start. Sorry, that is going to be stop. And then this is going to be reset. And let's go ahead and set that. And this is all I'm going to do for my HTMO and I'm going to jump into my CSS code that is tied CSS. So this is where I'm going to work right now. So this idea, let's go ahead and look at the body. And then I'm going to give that a background color, and the background color I'm going to give that is going to be pink and save that. So that is pink. And then let's go ahead and align the items, and it's going to be center and save. And that is align items is server. And then let's goi and give it a display of flex. That's why I give the display of flex, and then they have moved. Then the flex direction, I want that to be let me see. Flex direction, and I want it to be colon and save, and now it has worked fine. Now, I'm done. So the next thing I have to do is I need the stop wash and go ahead and copy this ID, and I'm ready to move right in here. And I'll go ahead and press that ID that is for the stop wash. Now I'm going to give that a font, and the font family I want is this, this is what I always use. I love that. And the font size I'm going to add is going to be two EM, right? And I'm going to add a color. And let the colour be brown and safe, and that is what I have. Okay, now I want to correct one in because as I'm working on this, I have this Zoom to 200. And if I use two EM, that actually looks bulge, right? So you can increase that if you're working 100% so that it's going to look bulge on your own. Now the next one I'm going to work on is the container. So go ahead and copy the container. And uh we go ahead and style that. So first of all, the display, I'm going to give that going to be flex as well for the container. And then I'll go ahead and give the flex dilection and let the flex dilection be called to colon, right? And we go ahead and give a box shadow. So the box shadow, and I let the box shadow be five pixel by five pixel by ten pixel. I save that, and that is for a half. Okay, then we go ahead and give the maximum weight, and I let the maximum with the 250 pixel sieve. And the square head and giving the margin. So and let the margin be Ota and save. A, this is unnecessary because you might not actually see it now. Well, that is very important. The padding is going to be 25 pixels and sieve. And that is now big. And then we go ahead and given the boy dish and let the botary dish be equal to ten pixel and save. And then I'm going to align that. So go ahead and align items and let align be center, and that is it. Right now, I'm going to need the display, which is what I have right in here. So I'll go over here and I'm going to copy my display, and I'll go ahead and pass that. And for the display, let the font size be equal to 3:00 A.M. And save. And then let the font family. At the font family be equal to this. That is what I actually use always. Alright, so let the font weight be equal to bod, alright. Now, I'm going to make the color because I actually want that to not look so black. So I'm going to choose the black color, but I'm going to go right in here and I'm going to drag this a little bit down so that it will actually look good. Alright, let me go ahead and sift this no. I think that is okay for now. Let's check it out. So that is okay. We're going to live that. So let's go ahead and give a shadow. That's why I say wanted a text shadow a text shadow and let the text shadow be three pixel by three pixel by three pixel and serve this. So I'm going to lift that. I can also go ahead and add in the Algeb color. Let me say it's going to be block, but I'm going to also touch the block. So go ahead and reduce that a little bit, and I'm going to leave that for now, and let's serve and see it. Okay, so that looks good for me. Alright, now we go ahead and give him the marging so that this boating, we surely codonn a little bit from the clock and let the margin and that is the margin button. So let the margin button be equal to ten pixel and save, and that is a little bit down. Alright, now, we have the control bodies that is start, the stop, and the reset. Now, I'm going to, first of all, work on all the buttons, and then I'm going to work on them separately. So I'll go ahead and get the BTN controls, and after I go ahead and work on each of them to change the colors, give this one each color, they're going to look different. But for now, I need to work on all of them to be the same. So go ahead and paste that, and that is buttons. So I will drive this up so that I can be able to see what I'm doing. Now, first of all, I don't really like boda, so Ba is going to be equal to none. So the boas are gone. Then let's go ahead and see the botar release and let the boar release be equal to ten pixel. So we're moving and I want whenever I bring my Cusso so that we actually going to change. So Csa is going to be a pointer. Now if I get my Cusso to that, you can see that actually point and now let the font size. So the font size is going to be one EM and save. And then the font weight. The font weight is going to be bowed, and then the pattern let it pain be equal to five pixel by ten pixel and save. Right on the Lady Imagine, equal to five pixo and that is okay. And lady minimal wheat. Let that be 50. Well, that is minimal wheat, so let that be equal to 50 pixo. So what is in front of this quiet and remove it. And just squire it and sieve, and that looks good. Alright now, we go ahead and give the color, so I want that to actually be white. So let me go ahead and say the color is going to be white and safe, and we can no longer see the text. So go ahead and change the the bodies. So if I save this, I'll go right in year. I'm going to start with BTN start. So go to BTN start and I'm going to move start with this. So for the BTN starts, let the background color be equal to, uh that is RGB. So that should be a green first. So I want green because that is going to be the start. And then I'm going to change the squire change this. Alright, so I want this to be 200 instead of 255. So I want this to be 200 and N. I'm going to work for the Ha so that the want meta to be 200, is that the 255 is meant to be the Ha. And if I enter this and I'm going to close this. So let me go pass this and I'm going to the soul color, the Ha and let the bar round. Colo, the equal to green. So, now it's very easy for me. This one secret why I love using this. So it's very easy for me to copy this pass that, and I want to change this 255 and check it out. If I bring this actually changes. And I'm going to copy this for the remelont butts, and what I want to use is RO GB. So the next one is for the stop, and I want to change this to stop and BTN, stop. And then this is going to be a red. So the is very foursome. Somewhat to say this is 200 and I'm going to change this to zero, zero, and I'm going to change this to zero, and I want to change this to 255. So I believe you might know what this is because this is this is for the color. So this is going to be BTN, and this is also BTN. So let's go and save this. So now, if I bring it, you can see that actually changes, and this also changes. Then for reset, this is going to BTN reset. So this is a BTN reset, and this is also BTN reset. So I'm going to change this. This is going to be zero. So that is for color that is 200 and I want to change this also to zero, and I'm going to change this to 255. Alright, now let's go ahead and set that. So you can see that actually takes a blue color. And now, you want to tear anytime during my mouse, it changes. And now this changes so sharply. So I can give a transition so that this will always change. So Alright. Now I'm going to add a transition to this. And to add a transition, I'm going to do this for every button. So go right in here and I'm going to add a transition. So transition, background color. Vibrant color. And let that be 1.5 seconds. And that is going to be with ease and save out now, let's check it out. So you can see it's no longer so fast like before. Check it out. It's no longer so fast. Alright. Now, So now we're done with CSS. We'll go ahead and move over to JavaScript. And right in JavaScript, what we need now is to go ahead and get the display. So this display is vert for the clock, go ahead and get this ID. So in order to get this ID, or we need to be star this grad and say const constant display and let this be equal to documents that get eleate by ID, and the ID name is display. So why I puja semicron at the end of that now, when you have to declare some variables that is for the timer, let the timer be no because most naturally starts at the moment until we do that. Then the start time is going to be null, the elapse time is going to be null. Then we're going to check if it is running or not. So it's quiet on S. Let timer the echo to non and let the Okay, let's start with start starts time and let that equal to zero. And let the lapse Let the elapsed time be equal to zero. And then we check if it is running, it's running. And let that be called to force. So this is initially for every one of them. So nothing is happening at the moment. Everything is equal to zero. Now we have to create a function, and that function, we go ahead and use that to actually check this. So let's go ahead and say that the function name is going to be let's go and say, Okay, let's go ahead and create the function name that is different. So you're going to say function and let the function name be updates. So the function name is updates, and inside of here, you go ahead and say cons and then current time and let that be equal to date dot now. All right, so that should be equal to date dot now, and let's go ahead and save that. Now, we have to convert the We have to convert the hour, the minutes, the seconds, and the millisecond. So in order to do that, let's qui in and say hours. So let us be equal to let me say and lapse time, divide by, let's say, 1,000 because this is going to be R times 60 times 60, and then wired up semicron at the end. Now, if this action happens, it's going to be a decimal point. So let's go ahead and this is to get the hour. Go ahead and put this into a MT function, mat that Md that flow, so it's going to return just on what is sought a decimal number. Okay. So now let's go ahead and do that for the minute. Later minutes and let this be called to. Let's go ahead and put into that into your MT flow method already because we already know that it's going to happen. So go ahead and pass a last time divide by 1,000 times 60 to get the minutes. And then in order to do this, we're also going to divide this we modulus of 60. Alright, so for the seconds, let seconds be equal to Mt data flow, and then go ahead and paste that. And then we go ahead and say this mode was 60. So we're semicron at the end of all these. So we have to get the hour, the minutes, and the seconds. And now let's go ahead and get the milli the milliseconds. And let this be equal to mat that flow. And then we're ahead and passed that, and now let this be equal to 1,000 divide by ten. So that is a lapse time modulus 1,000 divide by ten. So this is going to give us the it's going to give us a millisecond. All right, so go down and move this and let's go ahead and save this. So now we have to go ahead and display that. So I'll go ahead and say display text content and let this be equal to first of all, we enter the hour. We say hour then we enter the seconds. Sorry, enter the minutes. And we enter the seconds. Then the milliseconds. So go ahead and put a SemicR at the end of this. So I hope that is cool. Check it out. So now, have you the lapsed time to create our the seconds and the milliseconds. And for that, elapsed time to actually work, go ahead and say elapse time is going to be equal to the current time. That is the current time which we have the clad year Myas the start time, the semicon, which have initialized up here. Now this square and save this. So nothing actually happens, we have to give a function to start, stop and reset so that whenever we click on them, they will actually work. And for us to do that, you have to create these functions. Through remember, we have an click for each of them. So all I need to do is to go ahead and say function, and that is start Alright, so I'll do the same for function. The next one is a stop. No primeti is needed. And the next one is a function or reset analysis and self. So have to start with the start. So for the start, we go ahead and check if it is running. So if n is running. So if that is not running, that is when go ahead and start it. So we head and say, start time is equal to dates that date dot now. So what we need to do is that is going to minus the enlapse time. So let's semicro end and let's TA, we have declared up here, Timer is now going to be equal to set interval, and then we pass in this function with create which is that this functional crit as a cobac. So go ahead and pass that as a coba and give it an interval of ten. And now, we go ahead and check this. So if I click on this and it cannot stop tifreshT. So let me go ahead and expect this element. And I'm going to go over here. So we can see that because it's now actually running. So I'll go ahead and refresh this, and it has actually stopped. So it shows that it's actually working fine. So we now go ahead and say it is running equal to true. I press the Micron at the end. So anytime you click and run, can see that's actually working fine. So it can now refresh that, and that is working fine. So let's go ahead and stop d. So now it can start with it Cam stop because I'm not creted there for the stop. So for the stop, I want to say clay interval, and I'm going to clay the timer. I press Semicron at the end, and then wear and say I lapse time. The last time now is going to be equal to dates dot now date dot now minus the start time. So so now it's running is going to be equal to fs. Now, let's go ahead and check it out. Click on Start and click on Stop. You can see the start and the Stop. A now let's go ahead on there, do that for the set. So for the resets, we're ahead on clear interval, so Gu and clear timer. Press the micron at the end, and we'll go ahead and copy everything because this is actually like Syria starting up fresh. So we're going to set everything back to default. So set everything back to default. Alright? And now then display, which is this is going to go back to its default because right in here, this is display someone to copy the display and put it back to I default. So display that text content and let that be equal to what we just copied and go ahead and press that and save. And now I can start. I can stop. I can reset, and it has gone back. Now, check out. This is just one digit, so we need to make this to be two digits. And for us to make this to be two digits, we're going to set the strength for this. So go over here for the hour for the minutes and others. So for the hours going to be equal to string hour string hours that's part starts. So I'm going to give them to digits for the start. Go ahead and add a zero, put a semicron at the end, and then I'm going to copy this. And I'm going to do that for the minutes so that the minutes be equal to this. And I'm going to change this to minutes. Then I'm going to do exactly the same for seconds. So seconds is equal to this, and I'm going to change these to seconds. And then I'll do the same for milliseconds and let that be equal to this, and I want to change this to milliseconds and save. And now I can start and down you can see down two decimal pless and I can stop and I can start and you start from way stop, check it out and continue. And then it sees that this moves to 200 and instead of stopping at 50 or 60. So what actually happens is that we have to check our seconds right in here and ensure that seconds is okay. So what actually happens that this seconds is 1,000 v by 60. Well we enclose that, and that is a problem why that is actually misbehaving. That is why let's save this again and refresh and start and check it out. So you can see it's no longer going to 100. And then if we can wait, I'm going to pause this and wait for that to continue on 50 before I can start again. Alright, so now we have entered 50, 51, 52, 53, 54, 55, 56, seven, eight, nine, zero, and now we have entered into a minute 1 minute. So that is actually working very fine. I can actually stop. I can actually set, and I can also reset, and that goes on and move on. So let me go ahead and latch this. So that is our stopwatch right in here, which actually works very fine, okay? So go ahead and pull it down and I sure that everything works fine. So you can see that my stopwatch is actually working very, very fine. So that is all for stopwatch. Put it down and process your teeth, and if you have any question, go ahead and use the question and answer section, and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture. 14. How to Build an Electronic Calculator: I will call you back again to another video lecture in JavaScript. And in this JavaScript lecture, let's go ahead and look at how to build a calculator. So Vf is a simple calculator, and that is 125 plus 25, and if you click on equal sine, that is equal to 150. All right, so you can see that is actually working, right? I can go ahead and claim that and it is off. So let me say seven minus eight and equal, that is minus one and claim that. And what if five divide by zero and equal zero error? So that is no reposib. And what if six divide by one and check it out, that is equal to six. Clean there. Okay? Six plus one equal to seven pi by five, equal to 35. So you can see that calculator is actually working five, right? So everything we need is here. So let me say 10.2 times four is equal to 40.8. And you can see everything is actually working. And whenever I'm hovering over the buttons, you can see that they're changing colors. So if I click on anyone, you can see the active ds of the color show that I have click on this. So I'll go ahead and clan that and they can see how I match the equal sign. That is what we'll be looking at in this video lecture. So let's go ahead and minimize this. And I'll go ahead and delete that. Alright, now we have a fresh page, and I'll first of all, go to my index at HH Timo because that is where everything has to begin from. So going down here, let's go ahead and first of all, create a Diff tag. So Guy and create a dif tag. And for this, I'm going to call out to be the container. So by here and see, the idea of this is going to be a container. Because that is what is going to house everything we are working on today. Alright, now we have the container. I'll go ahead and give the display because it's very important. So I'll go ahead and say that imput go ahead and put imput. And this imput Ig head I give it an ID and let the ID beca to display. And then I'm going to make that to be already only. So if we need to type on that screen, you're not going to get anything because you cannot type on it, no matter what. So let's go ahead and give the keys. So the DV, that is for the keys. So I want every key to be inside the E. So ID, I'll call that to be so we keys. Then inside this div for the keys, I'm going to give us another div that is going to house the ones. Then inside the keys, I'm also going to house the ecosine. So the eco sign is going to be separate because that is why I want that to actually look long. If I don't do that, it's going to stay separate and not look good for me. So that is why I want to house that inside the keys, and then I'll separate that from the other figures. So I'll go ahead and create another div and I'm going to call this Dave. I'll give it an ID and the ID will BTN. So these are the butties. So now I'm going to give these butties so over this in C button. And let me and give them Click. And then let me say that Olick is a pint, that is the name. I pen display. And the display I'm going to a pen here is going to be plus. So I'll start with the plus. And then let's go ahead and give the plus sign. Alright, now, we have a paint that is click, equal to plus. So let me go ahead and give this a double single. That is a single quotes. So copy this. Let's got a fossol save this and refresh this. So that is only half. Our fossol make these to actually be big enough. Alright. So later I'm going to take that back to the number size. So I'm going to enter about 12 of these so that is one, two, three, four, five, six, seven, eight, nine, ten, 11, 12, 18. All right, one, two, three, four, five, six, seven, eight, nine, ten, 11, 12, 13. Alright, so off the four start from prosin. Then I'll change these to res, seven, eight, nine. Then the next one is going to be the min. After the minus, then we start again with four, five, six, and then we go ahead and enter the exteriors. And then we go ahead and start it one, two, three, and then we go ahead and enter the divide. So we also need another one, and this is going to be for zero and dot. So and tough for zero and tough for dots. Let's save this. So how do button it. Now, outside the, I'm going to add button, and now this button is going to be the This is going to be for the equal sine. Alright, so this is going to be for the equal sine. So this equal sign, I'm not going to give it an append, right? So I'm going to change the unclick. The unclick is all going to be a pen. Let's call that to be calculate. This is a calculate. So this is one of the reasons why I want that to be separate. And I'm going to give that an ID and let the ID be equal to equal BTN. So that is equal tn. All right. Now let's go ahead and save this. So for all the operators, the plus, the minus the multiplication and divide, I'm going to give them a class. Let's go ahead and give them a class. So let that class name be operator BTN. So go ahead and copy this. So I'll copy this. I'll go to the minus, and I'll add that. I'll go to multiplication. I'll add that, and I'll go to divide. I'll add that. So this separates the operators for the numbers. So the numbers are separate. That is seven to nine, four to six, one to three, zero, and doubt. Alright, now, if we have done this, I can say that this is all that we need. So I think we're missing one more, and that is the clay button. There's no clay button. So we ahead and copy this square and copy this. Alright, the cla win, that is the C, quiet and a C right in the air. So the C now is going to be different. So go ahead and remove the click. So the click is going to be clear. Let's call out to be clear. And that is clear display because that is the job. Color display. And ahead and give this a class as well, because it's going to also be an operator and let the class be acute operator BTN and Squire and 70s. Alright. So now, if I've done this, and all we need to do right now is to go back to stay the CSS because we are done with the index dot HTMO. It's time to customize the CSS part of this calculator. So fossi, let's go back and return this to 100 because it's going to enlarge everywhere if we are not returning that to 100. So first of all, I'm going to start with the boties. So these boties we're going to start with them foss of for. And to do that, quiet and S button. And then let's go ahead and give the width of the button to be 100 pixels and save it. And let's go ahead and get the height to also be 100 pixels and save that. So you can see that. Now, let's go ahead and give the border. I don't want a border because I never like in butters. So the borders are gone, and now let's go ahead and get the butter release, the border release. So I'm going to make that to be 20, so just have a little cove, and that is it. Now, let's go ahead and give the the font size. So let's say the font size and let the font size be two EM and save. And now let's go ahead and give him the font weight that is the font weight. And let the front weight be equal to bold, and that is polled. And now let's go ahead and make the cise. Whenever I bring my crystal, it's going to be a pointer. Caisse is a pointer, and now Csdras not pointing. Okay, so go back here. And now I want to give the background. Let's say the B ground color I want. Let's go ahead and say it is a block. And for this block, if I do that, it's really very black, right? So let's go ahead and drag this down. And let me say that this is 0.16 and safe, and that is it. Now, let's go ahead and give the each of the bodies to have their text to be equal to white, and that is it. Alright, now we have achieved this. So let's go ahead and enter the keys because these keys, everything is inside here, someone to copy the keys, the ID, and let's go ahead and work on the keys, quit and press that. So for the keys, we go on and do that step by step. But there's one thing here is that if I walk on the keys, I go on to make this keys to be grid, it's going to affect the echo. So I don't want the equals to be there. Let's go ahead and choose the BTN instead. So go ahead and change the keys to BTN. Alright. Now, let's go ahead and say that the display is going to be grid because I don't want the equal sign to also be a grid and check it out. And now that grid template we're going to use, we have inside EA, we have what's called grid template. And that is grid template colon. Now, it's going to be a repeat, and it's going to be by four. So the grid is going to be by four and 11f. So that is one fraction. And now that is only F. And let's go ahead and give the gap. Let's say that the gap between them is going to be turn pixel and check it out. And now we can now go ahead and give the pattern and let the pattern be equal to 15 pixels. All right. So because, you know, everything now is except the equal sign we want to work on that separately. Alright, let's go ahead and work on the container. The container is the next thing we need to work on. So let's go ahead and say ash container. So for the container, I'll go ahead and give the background. Let background color the coal to go ahead and S. That is a purple and the purple or white hair and change that. So let me check the color that we need. I think that is okay. I can save this. Alright, now we go ahead and give the font family. Let's go ahead and get a font family for this. And I love using this always for my programs. And then for overflow, on the displays, let overflow be hidden. Alright. So let's go ahead and give a box shadow. So let me say that the box shadow let the box shell be equal to five pixel by five pixel by ten pixel. And serve this. And now it looks like a box. So I'm going to give it a butter reduce so that it can so curve. So that is the boer reduce and I'll let the butter reduce by 20 pixel. Serve this. Alright, so that looks good now. Right. So it remains this display. We have to work on our display and let's go ahead and work on this display. So I'm going to say display and let the width of the display be equal to 100%. So the display width is equal to 100%. Just give the pattern and let the pattern be equal to 20 bizel and that is okay. So let the font size be equal to five RM, and that is a little bit bigger. And let's go ahead and give it the text online go to staff on the left and serve this. And let's go ahead and add the border. And the butter is none. So you can see it has removed the butter right in there and the butter is no longer there. So you can now give the color of that. Just go ahead and give me the color. I can actually go ahead and use the same colour that I have here for the buttes, and I can guy ahead and put down and sieve. And you can see that it now matches with the body with the bodies. Alright. And if I give this color, I want the text color to be white and that is white. So anything that will appear there is going to be a white color. And now that we have given this, I'm going to touch this body so that if I open up this, check it out. I'm going to touch the body as well, so that this always going to be on the center and it's going to look good. So let's go over to the body and over here, the rain say, let's go ahead and say body and let the margine for the button or the body be equal to zero. And then let's go ahead and give a display and let the display be flex. And let it be justified on the center justified content on the center. And then you are going to mind the items to be on the center swell. Now, let's go ahead and give it a height. So the height is that from horizontal and vertical, they always going to be on the center. And for that, I want to see 100 VH, what's horizontal and vertical. So this is always going to be on the center. So we're still going to adjust add this so that the button can looks a little better. Alright. Okay, now let me go ahead and give it a background. And I'm going to copy this. That's why I don't copy this, right? And I'll press that and sieve and check it out. So how that looks good. Okay? Alright. Now, you can also go ahead and reduce that so it's not be on the same color with others. So this reduce this a little bit, and that is it. So that is where I need and sieve and it's no longer dark. So we have done this. What I need to work on now is, let's go ahead and work on the I'm going to work on the equal sign because it's very important. We also work on that so that it will look good. So what I need to do now is just quiet and say the equal BTN. And for the equal BTN, I'll go ahead and give the font size. It's going to be five rami and save it. Now the wheat is going to be 100%. Check it out. So it has moved to the end, and let's go ahead and open it up. Okay, so we're still going to work on that because our button still look so big. So justify content. Let the content be on the center. And then I'm going to align items to the center, and I'm going to give it a background color and let the background color be equal to blue and save and check it out. So that is a blue colour. Alright. Alright, so now we still have this to big, so we need to arrange this container. Let's give this container a maximum weight of 500 so that you do not go out of shape. Alright. So let's go over to here and let's go out and see that this can have a maximum weight of 500. Pigels. And let's check it out. Save this. Right now, let's go ahead and increase that. So, okay, that is good. So if no other god of ship, and that is how it's gonna always look like. Alright, so the next thing is it's quite had on C. Whenever I bring my mouse on this, so according to let's change, where phosphon want to change its operators to be the same color with the equa sign. So now the orders look good. That's quite s. The so that is let's go ahead and clap it this. I think I'm Alright, so that is Opreto BTN. I would have made a mistake here. So go ahead and say that the background color is going to be blue. And now, go ahead and sieve. And let's go ahead and hake. The background color is supposed to be blue. So, oh, that is a class. That is a class and not an ID. So that is a dot, and that is it. Alright, so you always have to be careful to know when you're using a class and when you are using an ID. Alright now, I want these to actually have a background color when I hover over them. So for the butting, I'll go ahead and say that butting. And if I hover over them, that is a pseudoclor and vi and saying that the background color has to be blue. If you're going to be a blue colour, now I'm going to change that blue color. Oh, I fossi go to boding and copy this because that is a black color. So the best thing in order to do is just to go ahead and copy this and then go back to your body and change these figures because that is going to make this to look better. So like I have this to all be six, I can change this to five and sef and check it out. So you can see that. I want the secret I always use, okay? Now I'm going to touch the operators because they don't need to be this way. Now, what I want I click on this so that it will flashlight. And if I want to do that, I'll go ahead and say button active. So for the active buttons, I'll say copy this, press that. And if that is there is five, I'll make this to be like four. Check it out. Save this. Come over a click. Can you see that one you're clicking is not flashing light. Then for the operator BTN, which is this, I go ahead and copy that and press, then this is going to be cover. So these are some of the simple secret command we use, right, so that it's bore easier for you. And because this, I have to do is to go ahead and drag this down a little bit. And now I'm able to generate this, and you can see that it changes, right. So for me to have the active button, I go copy this I'm pressed, and I'm changed the hover to active. So, and I'll just co down here and change this 0.6 to like 0.5 and sieve. And now, in fact, click on that, can see that it's not shining and is not bringing colour. Alright, so the equal sign is not actually blinking any color at the moment. So what you need to do is co over here and let's copy this. Rest phrase that. Then I went ahead and change this or a guy had us to use this because they're almost the same. So that is for H we copy this. And this is HOA. I'll press that because they are all the same blue, and this guy had on copy this again for the active. We click on that. So the active button, I'll go ahead and copy this, and I'll go ahead and press that and save. And now you can see All right. So I can actually go ahead and there, take this up a little bit. And that is it. Let's go ahead and take up a little bit. Come drag this up a little bit and save. So we have to change this to active and save. And now, they can out brink. Every one of them are bringing. Alright, so that is beautiful. Now, let's go ahead and save this. And I think at this moment, we are done with everything consigning the CSS. We need to just move quickly to script Jazz so that we go ahead and configure this. And this won't take much of a time. Foss fossil we're going to get the display and let the display we're going to get the idea of this, go out this sphere redun to see everything we're working on. So let's go ahead and save C display and let this be called documents that get element by ID and the element I want to get the Z display. So I just give that variable. Is the cre variable display. So now let's go ahead and save. So it is time to start creating functions for each of these buttons and display and click button and everything. So for the inputs that one wherever we click on this, we can be able to sit or add it to this to go ahead and say function. And the function aim is going to be this a penny display. So each of all these, they have the same clical ID, so we ahead on a couples and go right here and change that function. So whatever click on a pen is going to scan all of them because they all have the same function name. Go ahead and change this to impute so you don't want to be imput. Now, we go ahead and say display, which is this display, which we did right in here dot value, go ahead and show us what is printed out. And let's see plus equalimput and put a semicron at the end and save this and let's check out so you can see that actually works. So and it seems I'm having only plus plus. Alright, so that is a problem. So no problem. We want to correct that. So let's go ahead and go over to the next motion, which is clear and let's go ahead and use this and the function name is clear display. So I'll go ahead and copy that, go over here, and then chad name to copy display. And then let's go ahead and remove this. And we go ahead and say, display that value. So whatever you impute there is going to be equal to an empty string, and save this. So let's go ahead and say, everything is printed out full and go ahead and click. So and while to check what is really going on here. So what we're going to do is let's go back to this and check Addis. Okay, so that is supposed to be a function, Whad put in a function where in and come back here. And now let's serve this again. And let's check Addis. So that class. What exceed this actually puts in plus. So let's go ahead and know why that actually puts plus. Alright, so for append display, we are pending plus in everything. So how you change these with your names. So the first one is a plus, and this is actually seven. This is eight. This is nine. So that is actually appending whatever that is in full. Five, six, and this is exteriors, and this is one, two, three, and this is divide, and this is zero. And this is dots. So I hope that is cool. Go ahead and solve this again. Alright, let's go back to JavaScript and you cannot click on four. Alright. Four exteriors, two, and clays. So seven plus eight. And the echo sign, the equal boss is not actually working at the mermaid. So let's go ahead and work on that so that everything will start working out fine. So all you need to do is to go around the Cretanafunction. And that function is for the index, and this is unclick. So go ahead and put parenthesis and go ahead and copy this. So I'll go back here, remember to save this, and I'll go back here and I'm going to say, function and function name is calculate. Got to remove all the add oxygen and the them. Alright, so I'll go ahead and save this. So let me go ahead and use a track cache block because we are going to check for errors. So I want to use a track cach block. And for inside here, I want to see display. Oh, that is not inside. Inside track cache. Alright, so I want to bring this down in a little bit so that I will not be able to make mistake. So display dot value. Display dot value is equal to eval. So this eval in Jaluscr to actually help us to do all the calculations for the operators that are in there. So then go ahead and say, display that our value. So with this, we can go ahead and work. So this is enough, and let's go ahead and say seven plus eight. Check it out, 15. Alright, divide by three is equal to five. And 45. Okay. Five around 45 minus ten is equal to this. Alright, now, what if by that clay what if we have something like 78978 plus 45 minus equal, you see. Nothing happens. Nothing happens. So what if we said it is an error? We've guide and said that this is an error. So how do we do that? Let's quiet and say, uh display error that's value. Is equat error. So if any error occurs, go ahead and accept this, we go ahead and this an error. So 78 plus 45 minus equal to error. So it's actually showing error at the background or at back end, so we open your console who see an error. That's why I want to show that outside here. So let's go ahead and clay this. What if you have 45 divide by zero, and this is equal to infinity. So what if I don't want to show infinity but I want to show a zero error. So all I need to do is to go back to a try cache and go ahead and see that if display. Wow. So there is a statement. So if a display that value is equal to infinity. So anytime it is equal to infinity, then we go higher C display that value should be equal to, let me say zero. Sam chroneNcep this. Now, 45 divide by zero, and that is equal to zero error. Gan cladis seven divide by zero is equal to zero error, Cladis. So 45, I don't know why I like 45. Right, 0.1 multiply is equal to error because you need to actually add in something. So hope that is cool. So this is all about a calculator and everything works fine. If I go ahead and open that, this is what we have, and you can see that a calculator is actually looking very, very sweet. So go ahead and put that buck again, one, two, five plus 25. So this is how you made it where we came, and we are actually replaced that again. So I hope that it's cool. Go ahead and pull it down and ensure that everything works out fine. And if you have any equation, we go ahead and use the cushion SASection. One of the things I have to do is at dis display. This guy go to make the font weight to be equal to bulge, select with look bulge. Alright, now, can see that it's actually looking bulge. That was what I wanted to do. Alright. So for the BTN as well, you can also go ahead and make the BT to be bolds already bold. So you can see that 125 plus 25 is now bold. So pull it down, plot on with Ts and I have equation, go ahead, I use the question and the assay section, and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture. 15. How to Build a Compound Interest Calculator: I will call you back again to another video lecture in JavaScript. And in this Javascript lecture, I'll go ahead and teach you how to build a compound interest calculator. So what before us is compound interest calculator. We design and we're going to design that together in this class. Let's go ahead and open it up. So I've enlarged it, and that is how it is. So we don't learn how to build the background and then go ahead and do this box and then go ahead and activate this. So let's go ahead and say that if I go ahead and add in 1,000 and that is what I deposit in the bank, and the interest is 1%, and I live that for one year. And let's go ahead and see what I'm going to have. That is, I'm going to have $1,010. So in one year, and let's say that is for two years, I leave that and check it out, that is $1,021. Okay. And $0.01, I say one dolla. And that is for three years, and that is it. So let's quiet increasy rates to the cat, too, and check it out. So, in three s, this is what I'm going to have for that $1,000. And if I change that to $2,500 and check it out, and that is what I'm going to have. So this compound interest calculators very beautiful. And let's quiet and try to type in maybe, let me say hello, you cannot type that, right? So the E is for exponential, so that is all you can do, but it can't type in anything like A, B, CD or anything, we can type E for exponential, and that is it for now. So you can go ahead and add a fresh and clean off everything. So at that line you can also go ahead and add in a clay to clay that is for your own assignment, but no proglin can was go ahead and fresh this and that clays off. Alright, so, that is it for now. Let's go ahead and kick off. So that is at N, and that is here. So what I need to do right now is to go ahead and glass this. And this is a formula we're going to use. The formula for a company inchoice is A equal to P, and that is this. Where A is a final amount, P is initial principal balance, and R is interest rate. Then N is number of times interest applied per time period, and T is number of time period elapse. So go ahead and keep that and you're going to use that very soon. So the very first thing we have to do is to build in the webpage. And to build in the webpage, for us to build that webpage, we go ahead and move to index HMO. So inside index dot HMO, I'll go ahead and start off immediately. So I'm going to start with one so that I can give the name and I'll let the name be compound. Compound interest Cletor and save this, and that is it. Compound interest calculator. So let me go ahead and make this to be interest calculator, and then at the end, I'll guide to add in the compound so that it will not occupy every of the space. All right, so you can also go ahead and reduce this. So let me go ahead and say it can decrease that like 200. Alright, so that is cool at the moment. Now, I'll go ahead and create the foam that is the foam. So let me say foam, and the I'm going to leave the action for now. Won't be adding anything for now. So they are going to contend labels and they're going to contain inputs because we have seen that. So there will be a label for you to add principal in choice, then they're going to add the principal, the intoic and the. So for the label, this square and C, label. And the next one is the Impute Okay, so we go ahead and first of all, we're going to start with a principal. Let me say it up is a principal. Amount and the type is going to be number. So in this way, we're going to restrict anybody from entering a string inside there. Let the ID be equal to principle. And I've got ahead and copy this, and I'm going to put that four. So they're going to always work hand hand. So it's going to be four is principle, and ID is still principle. So I'm going to do that for interest and the next one, I'm going to do that for the year. So let's go ahead and change this. And here, I'm going to change this and let this be interest. Interest rate. And here, I'm going to change this to rate. And here, I'm going to change this to rate. And here, I'm going to change this to year. Okay, let's say that is s and here and we'll change that to s and also here and we'll change that to years. Alright, so now I'm going to add a column to show that we're going to insert something. Now I'll go ahead and accept this, and that is what we have. Alright so it's not looking good because we will not apply our CSS. Let's go ahead and enter a button. So go ahead and say button and let the botin be submit. And let the type be equal to butting. So we're going to also let this to know that the type is a botin and a button is going to have an unclick type, and the click type is going to be calculate so that whenever we enter the details for principal amount for interest or for the year, then go ahead I hit on submit and then it's going to calculate. And whenever quit to calculate that is when the Java script now will be enabled. All right, so that is why Enter is now a function. So when you click on submit, we're going to start the calculation, and that is submit. Alright, so it's not looking good because we have must apply the CSS. There's no problem, allow it. Then we're going to display the result just like you see the results. And that is going to be a paragraph. And paragraph and inside the prograph I'm going to now say I'm going to span that because I'm going to use a CSS to work on that, why I'm adding a spa. Now I'll go ahead and give this an ID, so let the ID be equal to Tau amount. Alright, now we go ahead and adding something like zero does zero. So that is going to be an amount. So save this and have this. So I'm going to leave that for now. Nothing is going to be done. Our result will always be displayed right in the air. We're going to use JavaScript to actually override this. So I just added this so we can always remember that. So for now, I've created a foam, and now what I need to do is to save everything and move about to Si dot CSS. So under Si of CSS, we can now work. So first of all, I'm going to start with the body. And now let the body the font family. Let me say font family. And the font family I'm going to use is area about the co I'm going to take the very first one, and I'm going to save that and that looks good right now. So that is what I want. And then go ahead and give it a background and the background color equal to pink. Alright, so it's now looking good and taking shape. So let's go ahead and look at one. And for the one, which is this right in here, so then we give it a font. A font size and let the font size be one EM and safe, and that looks good. And now that I've given the font size to one EM and looks good, then go back here and add this to be compound. Okay, compound. And now I have compounding trays, and you can see the reason why I removed that before and let the taxa MI be a cut center, and it's now centered. A, the next one is the foam. Let' quit down and work on the foam and let the foam the background color for the foam is going to be for the first one I use paint when I use a purple, and that is it. So I'll go over here and let me go ahead and drag this and change that a little bit. So and guaran change this. And later Okay, one, one out to be one. Alright. That's cool. Save it, and that is what I want. Alright, now we go ahead and put it in the bar, uh the box shuttle. So let the box shuttle be five pixel by pixel by ten pixel. Alright, so we're not moving, and let the maximum width be equal to 250 pixel. Alright. And let the Magine and I'm going to let the Imagine to be Otter. And let the padding be 25 pixel. Okay, can see that is actually taking good shape, and I'm going to put in the border reads. So let the border release be ten pixel. Okay, so consider the shape. The bota has now been put in a secular form, and let it display's go and make it display. Let the display be flex. Alright, so now looking good. So let the direction of the flex be equal to cologne. All right. And now we're going to align everything to be at the center, and I'm going to say align this align items to the cena. And now every item is now sentad and I hope that is looking good. Al, now, the next thing we have to go is to ebos. Let's go ahead and treat the levels one by one. And for the levels, but I say Lebo and lady font size for able be equal to one Em. And now we go ahead and add the font weight. So the font weight would be equal to bulge. So let's leave that for now. So for the inputs, which is the inputs, are these ones, that will be writing, and Remo will made it to the numbers, so you cannot do anything, so we can only add numbers and nothing more. So refresh that. Okay, now, let's say that wet and the width is going to be 50%, so it doesn't go end to end and it's not good. And the textile lines be equal to center. So anytime we're typing, so it's now at the center, it's no longer at the end. So you see that, but it looks good. Alright, so the next thing that we need is the font the font size and let the font size be one EM. Okay. An. I don't want a boda. I don't want any boda. So let the water be equal to none. So the boa is gone. Then I've removed the boda. Then go ahead and make the butter ready so that the swap shouldn't look good. So we're going to say butter redis. So if I make this bota redis to be five pixel, if this is how it looks, whatever I make that to be like ten pixel, it looks this way. So I take a lot of the ten pixels, and for now, I'm going to leave that for now. And now I'm going to say that everything comes together. There's no demarcation between each of these, the principal rate and the input and interest rate. So I'm going to demarcate each of them. So while I add imagine button and let the Magin button be five pixel. And now they have it separated. So it looks good now, right? So the next thing is this button here, which is the submit button. So I can actually go ahead and let that submit button the way it is, but let's square ahead and make it give it a small touch so let's to look beautiful, as well. So the button and let me say that the background of the button and let the background be record to green and then go and say that the type of green I want is squahad and say that should be like, Mmm. Okay, let's take like 180. Alright, 180 is good. And let's save that. And because this green color is why make the color of this to be white. The text is now white. And let's make the font size to be equal to one EM. And we're going to remove that black border that is there. So I don't really like adding butter, so butter is equal to none. Okay, now, we go ahead and give you a border, reduce the bottle release of five pixel. So I don't want that to take shape with the impute, so it's gonna remain like this. And each time we bring our mouse here, I want that to be a pointer. So let go in and say iso pointer. And now I get my so in here, you can see that that is how it looks, and that is cool. Now I want a anytime so comes so that this will actually change color. So we'll go ahead and add in a button. Ova. So red background, little background colour the equate to gray yellow. So for sevs and now we have this. But I just it looks too shotty and I wear hair and say, maybe I just want little girl had come down at the tobt I take a Sugarman. I should keep it there. Save. Okay, that is cool. Alright. And let me touch it a little bit so to look different. Alright. Let's save. Okay, so we're going to live that for now. And this total, which is down here, we're going to touch that. So that is the output. And over here, that is spun, and the ID of this is total amount. Let's go ahead, I copy that. So I just want to work on this, so go back to Situs, CSS. And for the ID, that is what I'm going to use, and I'm going to put the color and let the color be equal to green, yellow. Okay, so, I want that to be shotty. I don't want it to be the same colour with the button. And now I'm going to increase the font size. So little font size will equal to 1.5 am. And that is increased, and let the font weight be equal to bold and save, and that is bold. Oh, so if I open up this, this is how it looks, and this looks like something that we have been expecting to see. Now we're done with the CSS part and the hash TMO parts. So it's time to activate this because if I add ins like 1001 and one and submit, nothing actually happens, so it is inactive. So in order to activate this, we go back to Index or H TIMO. And we have this button here and we have a function, the click, and that is calculate. So I'm going to copy this and go back to Javascript. And inside Javas prevent wire and say function, and I'm going to give the function to be what I just copied. And any time the button is clicked, that is when we're going to listen to that button. And for us to listen to that button, we have to go back to index. We have to check the principal amount and the ID for the input is principal. Go over here and I'm going to say counst I can First of all, I have to check the button because that is where the click is coming from. So let's go back to button and copy the ID. So let's say ID is equal to total. So first of all, let me bring down this so that we have a claim distance. So total amount, you say total. Total amount is equal to documents that get element by ID. And the idea I just have is one I copy it right now. So I've gotten the ID of this. So we're also going to get the idea of the principal amounts, the idea of the interest rate and the ID of the year. So I've gotten the idea of the button, which is the very first one set I can start, let's turn into that. So I'll go ahead and copy this. And then I'll press press that for interest again, pase that for years. So let's go ahead and change this to principle. So there's a principal no. And this one is tn. So these ones are just the variable names, and this is the ye yes no. So to change them, I'll go ahead and get the IDs for principal. I'll go ahead and the change this to principal. Then for rate, I'll go ahead and copy this and I'm going to change this for the rate. Then for the s, I'll go ahead and copy this, and I'm going to change this for the s. Let's go ahead and save this, and that is what I have now. I have gotten all the IDs. Now I have the IDs, and when someone enters something, I'm going to take that. So I'll go ahead and start to calculate. Remove showing the forma for this. So for the principal, we'll go ahead and say, let principal the eche to principle, which is this value, the variable here, divides by so don't value. I mean, let there be whatever we got here first. So before we start apply the formula. So if I go ahead and say there's value and the value is what I have here, and let's rate number, start with rate number be equal to Okay, so let me say that rate, then I'm going to apply this. The rate, we're talking about the ID we just get. So let this ID equal to the rate number, which is this, and that gives the value, the value. Now, what what value gets for here, I'm going to divide this with 100 and put a semicron at the end, that is for the rate. The rate is always divided by 100 and late this ID. Be equal to the variable name that gives the imput the imput, that is the value. Alright, now I have this, this squire and saf and I want to apply the formula to this and say that counts. Comes results num is equal to principle, multiply matt power. So we applying the formula for compound interest, and that is one plus rates divide by one and put the cama and that is one multiply by year. So let's ground the end of this. And now I have this. Let me go ahead and show that out here. So for me to show that, I'll go ahead and say the total amount, which is this ID that shows things that text content is going to be equal to the formula that is everything that I have gotten here. So I have now added everything I've gotten here through the IDs. So that is now saved. Let's go ahead and save this, and let's go out fresh. Let me say I have 1,000 interests of one a year. And let's go ahead and save this. I have this, and that shows that it's actually working. Now, I want to convert this to local because I've done about local currency conversion. So I want to say resorts that to Local string and then go ahead and say, we have the very first one to be on decline and then let's go ahead and put the sie for the currency sie, and let the tie be the currency. And the next one is currency. We want to add this the USD currency. So the sum corn at the end of this. So how do is cool. Now I can just go ahead and drag this a little bit down so it can do good. Alright, so that is it, so we can see both of them. Let's go ahead and serve this again, and I'm going to enter this to be 1,000. And for the interest rate of one for one year, submit. Now have that to be 1010. So that looks good. So the next thing here is going to refresh and check out this. What if someone comes in adding a negative number? Let me say a negative 1,000, a negative interest and a negative year. And check it out. We have a negative value. So we have to prevent this as well. In order to prevent that, I'll go right in here and I'm going to check for any number that is below zero. So for the principal, if the principal is less than zero, then we go ahead and say that principle should be actually equal to zero. So if you atta anything less than zero, we're going to give you zero. So what the rate is less than zero, then we have a tongue zero or rate. Press sumi command at the end and also put the Samira at the end of this. Now, what edge Yes, it is less than zero, as well. We go ahead and return yes to be quart to zero. So at the end, everything is zero. Save this and let's check it out. So what if you enter negative 1,000? And let me say enter ones to be positive and check it out is still zero. Now, what if you make this to be minus and make this so be minus and check it out still zero. So that works fine. Okay, so what else is actually remaining? I think we've been able to conclude this design and kind of fresh this and let's go ahead and open it up. And now, let me say I have $1,000 deposited and in one year, sorry, an interest of one and in one year, that is this value. So what if the interest is like, two, and check it out. So in two years, what is it? That is this? So in three years, what I have is this. What if this is like 2005 so it's all I have in three years. So let means I have 12,000, and this is where I have in three years, and in five years, this is what I health. So you see that works fine. So let's check that again in two years. In two years is what you have. Then in nine years, this is what you have. So that actually works fine, put it down, use it and check this, blow around with TT. And if you have any question, go ahead and use the question and the answer section, and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture. So the code is yelling for it before you put it down and p around with Tt. So see in the next video lecture. 16. How to Build a Temperature Converter: I will coming back again to another video lecture in JavaScript. And in this video, we go ahead and learn how to create a temperature converter. So this is the temperature converter right in here. And if I go ahead and click on Submit, it asks me to select a unit. And if I select Cesses to Fahrenheit, and the zero Csius is going to give us 82 degree Fahrenheit. And if we select zero Fahrenheit to cessiuss going to give us -17.8 degree. And let's go ahead and select 100 and Chi what it gives. That is 37 point. Eight degree. And if we go ahead and select cessus to Fahrenheit, it gives me 212.0 degree Fahrenheit. Alright, so this is all about a temperature converter, and we're going to do that from scratch, is in TMO CSS and JavaScript. Let's go ahead and get rid of this and start off immediately. So over here, I'm going to create a foam and let me say that the form I'm going to create, I'll go ahead and remove this action, and everything is going to be right inside this fam. And then I'm going to create one telement and I'm going to cut that to be temperature Converter. Right, so go ahead and set that and have temperature converter right in. So go ahead and put an E right in there. And then we go ahead and give an input. So I'll go ahead and give an impute, and the type of input is going to be a number because I set only numbers word in there. And then I'll go ahead and set that and we have this wording here. So you can select numbers and you can see because that is numbers. Alright, now let's go ahead and give you an ID and let the ID name be let me say it is impute that is for temperature impute. And then we'll go ahead and give it a value, so it can be used to hold a value because if you're a fresh this, no value is. So I'm going to add a value to be zero. Quit and say value. And let baling be qt zero, and now zero is right in here indicating that number is already there. Now, let's go ahead and move over to the next one. I go ahead and add a break tag so you can move over and put in your checked buttons. So the rear buttons is what I need and now the check boxes. So I go ahead and give an imput. And the type of impute is going to be a radio. And then we go ahead and give an ID of the radio and let the ID be to fare height to farenhight and let the name be equal to temp unit. So right this temperature unit. And then we go ahead and give a label, and the lb is going to be to fahrenheit. And then we go ahead and say, it is a csius so she used to frenheit. Cora ahead I'm get rid of the two at the back. Alright, now I can change this twos in the MOG. So why had I hold the over to your keyboard and hold your Windows key with a semicolon and you can go ahead and type in row. And I can select some of this arrow. So I'm going to select this blue one I have here. And if we save that, that is Csius to felon height. And I'll go ahead and copy that because we need that for the opposite and bust that and now have this. I'm going to change that from parenthight. I'll go ahead and replace that to Csius go ahead and copy this, and I'm going to replace this, and I'm going to leave the same row. So this tool is going to be to Celsus. This is to Celsius, and I can copy that, and I give that to four and save. And now we have csius to fahrenheit and frehet to CirssO and put a break tag so that it will come down and save that it has calmed down a little. And now let's go ahead and give the button. So for the botin, I'm going to give a button name to be equal to submit and save. We have a button and let the button come down. Put a break tag and save the button is down. And this button, I'm going to give it a type. Let the type be let the type of the button be equal to button and go ahead and give it unclick and unclick and let the name be equal to temp conversion. So this temp conversion is where I'm going to use. And what it results, we go ahead and give you a paragraph tide and I'm going to give zero to Bd and then I'll go ahead and give it an ID and let the ID be equal to result and safe. And now we have this. Now, let's jump into tie the CSS and tie everything we have right in here. So starting from the body, I'll go ahead and see body and let the body the font family. So the font family is going to be this. So per the micron at end of this and let the bogram coal. The background colour, I'm going to see that is aquarium, hot and save this, and that is what I have. Now, let's go ahead and check out the hash one. The hash one, I'm going to give you the colour. And lady color will be equal to blue and save. And now I'm going to select out to be like this and save, and that is okay for me. Now, I'll go ahead and select the foam. So the foam contains everything we have right in here, all these inside the foam. So everything inside both the one is right inside the foam. So let me go ahead and say that the color of the foam. Ahead and get the background color to be aqua. And that is what I have. Now Texan line is going to be equal to be center, and I've moved to the center, and I'm give the maximum wid to be equal to 350 exo and that's okay. And then let's go ahead and give a magin. Let the magine be outta and Adam use to the center. And let's go ahead and give the padding so that we have some layers around it. So padding, and I'm going to give a pixel. And let's go ahead and give it a butter reduce so that edges, we have a very nice shape. So why and give it 20 pixel. And you can see the edges are looking good. I'm going to give it a box shadow. So for the box shadow, the horizontal offset, I'm going to give the horizontal offset to be five pixel and set that. And I'm going to give the vertical offset to also be five pixel and check it out. Now, I'm going to give the blue radice to the blow radius. I say blue. So the blur reduce is going to be 15 pixel. So that is the blow reduce, and I can give the color to be black, and I'm going to adjust the block. So I think that is okay, save, right? So that is all I need for the fam, and you can see the form looks good. Now, let's go ahead and work on the temp impute so that it will look good. So there's an ID. Let's go ahead and copy the ID, and the ID of temp impute is equal to temp impute. Alright. Now, go ahead and paste that. And then I'm going to give the weed and let the weed be equal to 150 pixel. Okay. Then let's go ahead and give text a line. And I'm going to say that move to the center. And it's okay because that the text has moved to the center. And let's go ahead and give the font size of the text. One size is equal to two RM and save. And let the font tweet. The font swt. Let that be equal to both? Alright, now, let's go ahead and give the boda to be none. I want to remove boda. I don't need the boda. And then the boa reduce the batters is going to be equal to five pixels to have nice shape at the end. And then we go ahead and give the margin button so that everything that is this stuff will condwn a little bit. So magi button, I'm going to give that to be 20 pixel. Alright. Now, I'll work on the lebels. So for the levels, which are this, I'll go ahead and say bo. Then let's go ahead and give the font size of the level to be equal to 1.5 RM. And that is a bit big right now. And let's give the font weight to be equal to bog, and that looks good. Now, let's go ahead and work on the button. So for the button, I'll wear ahead and say, let the margin top because it's too cross the very fast enough to do is to bring it down and the button looks good down. Be separated, and I'm going to give the background color. The the butraun color be equal to blue. Want to reduce the blue just slightly. That is okay for me. Now I'm going to change the color of the text. Let the color will be equal to white. Okay, now, let's go ahead and give the font size so that it will look a little bit big. Font size is equal to 1.5 RM and save. And let's go ahead and remove the bodter. Let me say butter is equal to num and I'm going to work on the Btterydis. Bteryd is going to be equal to ten pixel. And let's padding be equal to five pixel by the pixel. All right, that is okay. All I need now is to bring the mouse Cruza in, so the mouse will be a pointer. And for me to do that, I'll go ahead and say so poina and save. And now if I get my cryso close, you can see that Cusso is a pointer. So what if what we Hova on this? So the sudo class screen to change this or would say butting Hova then I'm going to copy this. Then I want to slightly change that so that it could look good. So all I need to do is to go ahead and get this and slightly bring it down a little bit. Now, if I get my muscle, you can see that actually changes, showing that I'm whole body on date. Now, the last but not the least is the result. So go ahead and check it out. So I want to copy that show that is what I have, and that is result is the IDH and I'll go back right in here, and I going to pest that, and then I'm going to give the font size and let the font size be equal to two RME. And then I'm going to give in the font weight and let font weight be equal to bold. And that is bulge. Now, let's move in and jump into script dot J. So right inside script DJs, I y head and declare the constant to make references to every of the ID we have right in here. And for the first ID we have is a temp impute a y head and copy that. And I'm going to say, Cost temp Impute is equal to Jacin dot Gates element by ID, and bar past that. We some Micron at the end. And the next one is cost. Go ahead and copy this. That is the to fahrenhight, go ahead and copies and paste that to fahrenheit is equal to documents that get element by ID. And then I go ahead and paste that, press a micron at the end. Then the next one I have is two Celsus, and I go ahead and say const that's to Celsius. So documents that get element by ID, and I'll go ahead and pass to Celsius. Pre a micron at the end. Then the next one is we and check or the result is the next ID, and I'll go ahead and say counts results is equal to documents that get element by ID and a yhead and pass my results. So put a semicrun at the end of that, and let's go ahead and declare a temperature to be temp, and that is all. Now, we use the function name, go ahead and copy this. We said that is temp consion. So with the unclip button on the by click this button, go ahead and call the temp conversion. So go ahead and say function. And the function name, I'll press that way and I'm going to remove the parameter inside there. Now, every time we click on DT, I have to check if these radio buttons are selected. So I'm going to check if to ferrehet was selected or to Celsius was selected. So to do that, I'll buy a use an statement, and I'll go ahead and say, I this is selected, else if you select the second button. Okay, let me say else if else, if you select the second button, then if you do not select at all, then we'll go ahead and ppriate result for you. And I'm going to say else we populate the result for you. So what is, I'm going to see if to Fahrenheit that check so that means you selected that, then walk up that. Then to sulcus that check, so we have to always ensure that you check each one of them or any one of them. Else, if it not select any one of them, then we'll go ahead and say result that text content is equal to select a unit and save the rest a Micron at the end of that and serve. And let's go ahead and hit on submit. So now you can see that what actually happened. So I'm going to ensure that actually works. So function is equal to this. As results, the text is equal to this. So let's go back and check what actually happened. This a function can get back to Index at H TMO and this is unclick. Okay, so we need to put this right here, and let's go back and refresh this and check it out. So now select a unit. So Os Rainbow when you give the unclick that should be a parenthesis right in here. And if you don't do that, it's not going to get anything. So we're going to check if when you select Fahrenheit, anything happens. So to do that, I'll go ahead and copy this, and I'm going to paste that. So if you actually select Fahrenheit, I'll go ahead and change it to fhrenheitGide it and say, uh Fahrenheit. And if you select sechus, so I'm going to say this is a Sass. Quit accept this. And now I go ahead and click Select unit. So Gian select this Fahrenheit, select this Celsius. That means that is actually walking, gate rid of this, and then go ahead and start off immediately. So what we need to do right in here is that I'm going to say Tem is equal to number. I'm going to type cast whatever we have right in there. So anything entire is a string. So I'm going to typecast that and I'm going to say Tem impute that's value. So tem imputes that value. And whatever you put in there, put atomic column, and I'm going to get that. Store that inside tem. I'm going to set temp equal to t. And the formula of Fahrenheit is apply this by nine. Then divide by five and plus 32. So you can also check the formula for this. So that is t equal to whatever value you get multiplied that by this formula, that's going to give you the Fahrenheit. And then go ahead and give the results. So the results that text content is going to be equal to And I'm going to add, let me see, concatenate that plus the degree Fahrenheit. So Fahrenheit and I'm going to add a degree to that. So go ahead and add degree to this. So that is by degree. And if I set this and I hit Fahrenheit and check out this zero Cirsus to Fahrenheit is 32 degree Fahrenheit. So let's go ahead and copy this. That shows that formula is working, and I go right inside here and pase this. And the formula for fahrenheit to celsius is all about any number you get, any value you get from the temperature or from the input, then you go ahead and just but on the movie's formula and rearrange that. So that is going to be equal to ten. -32, then multiply that by five, divide by nine, and that is the formula. Now, we want to change this to degree Celsius, and let's go ahead and set this. And now I can say, select Celsius degree Celsius to Fahrenheit is 32 Fahrenheit, and degree Fahrenheit zero degree Fahrenheit to Celsius is equal to minus. Alright, so you can see that we have minus right in and that we have long range of value. So if you want to take that to the smooth place, all I have to do is to go right inside the term the result, and I'm going to say that to fixed to one degree. That is one of the small points that to fix to one the smooth place. And now i and select that again. The degree Celsius to Fahrenheit is 32, and now the degree Fahrenheit to Celsius is menus 17.8. That is cool. So qui ahead and select zero, that is 100 is 37.8. And the degree Celsius to Fahrenheit is equal to two, one, two, and that is cool. You can see that a degree temperature conversion or temperature converter is actually working very fine. So put it down, pull on hand with it. And if you have any cuion, go ahead and use the cushion and Asa section, and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video, lecture. 17. How to Build a Digit Counter: So in this JavaScript lecture, we are going to be doing a walking digit counter in this video lecture. So let's go ahead and check out what is very before us, and this is a counter, and it starts from zero. Let's go ahead and decrease that you go back west and you can see that moves back west while I click on that. And now, if I click on Reset, the Reset button will change that to zero. Check it out is now zero. And when you go to increment, it goes on to increment. And once you clicking on this, it keeps incrementing. So you can see, we can increment. We can also decrement, and we can actually reset that to zero. So let's go ahead and learn how to do that in JavaScript. So go ahead and close this. Alright, now, for us to shift what have just seen, we are going to require a CSS in this lecture. So let's go ahead and open up another tab, and that tab is right inside this editor. Go ahead and open up another tab, and I'll go ahead and save that tab. And I'm going to name that to be Si dot CSS. So go ahead and save this, and we have style dot CSS. Alright, now we're going to start with index dot HGMO and if I want to do that, I'll go right in here and phosphor, link my style CSS, go ahead and say Link, and then I will hit on that and have style the CSS. And the ref, these things are just in the same folder. So go ahead and say Style dot CSS. So that is where we're going to find that. So I have sent that, and now I will go right in here, and the very first thing I'm going to create is the digit counter, which is the 0123. And to do that, I'm going to add a label. So go ahead and say label, and then I'm going to give that label an ID. Let's go ahead and say ID, and the ID name is going to be digit count. That is C N T. So that is what I'm going to be using D count, and I'm going to add zero. And if I set this, I'll fresh that, you can see we have zero. No worry, we're going to use CSS to beautify all this. That is work of CSS. Now, I'm going to create the butens which is the increments, the reset, and the decrements. And I'm going to add all this inside a dev. So I'll go ahead and create a dftug and then I'll go ahead and give that diff tug an ID and go ahead and say the ID of this div is going to be equal to then call out to be the BTN control. So go ahead and say BTN controls because we have every control right in there. And I'm going to create some buttons. So I have a button and I'm going to correct three different buttons right in here, and I have another button. And now the first button is going to be for the decrement or increment any one of them. So let's go ahead and say that is for the decrement. So I'll go ahead and say the ID, the square head and say the ID of that button. I'll go ahead and remove everything here, and you can actually keep that. Let me say the types still going to be button. No problem. And then the ID is going to be the BT. So that is for decrement. And this also squared and give it D and The idea of this is going to be resets that is three TN. And then the last one, I'm going to give it an ID, and then the ID is going to be ink VTN. So we have all these given to them. Let's go ahead and offer them some classes. So while and see the class is going to be BTN, right? I'll go ahead and copy this, and I'm going to press that and all of them. So they're going to have the same class name so that we can actually work with that. Now, I'll go ahead and save this and I'm going to add for the decrement, I'll go ahead on Adding minus for the reset. I'll go ahead on ad resets and then for the increment, I'll go ahead and Ad plus sign. Then go ahead and save this and refresh. This is what we have. Alright, now, we have all these and we're done building the digit counts, which is zero, then the increments, the resets, and the decremate. Now, let's go ahead and move over to tie the CSS, which we have right in here. And untie the CSS, we're going to start with a digit that is zero, so go ahead and say. And let's go back right in here and copy the ID name, the ID name is a digit count, so we'll go right in here and press that and I'll go ahead and sip that. So first of all, we'll go ahead and add a display to that and let the display be a block. Alright, put a semicron at the end, and let's quit on afresh and check it out. And nothing is actually showing right now. No problem. We'll go ahead and say text and let text line be equal to center and set this afresh, and that moves to the center. It shows that that is actually working. Then let's go ahead and give it a font size, and let the font size be ten Em. Let's see, that is 100% and put a semicron at the end and refresh this and you can see how big it is. Now, let's go ahead and give it a font family. Let's quid and C font family. And late the font family I'm going to add is going to be then go ahead and copy the font family name and press that so to know where's that time because it's a very long name, that is the font family I want, and I'll go ahead and afresh, and that is how I got this. So I saw that Anna Leary love that font family. You can actually change that to any one of your choice. That's no problem. There very, very good. Now, let's go ahead and move this the resets implements and deplement to the center. And right in here, the inside the ID called BTN control. So let's go ahead and copy that because we're going to move everything together. So go right in here and I'm going to core that. Let's go ahead and put that a little bit below and press that. And now, what I want is to add a Cory braise. And right in there, I'm going to say text on line and let text line be center and save this. Now refresh, and that has moved to the center. Now, I have these bots, and the class name is bote. So I'm going to actually work on name using the class name, Agana Copuda BTN, and to walk a class, you use a dot and not the hashtag and press what you just copy, and that is the BTA. Now, using the curry breast, I'll go ahead and add a pattern to that and let the pattern, let me say ten pixel by 20 pixel. And when you accept this fresh, you can see how big it is. And now let's go ahead and give the font size, and let the font size be 1.5, and that is 150 and refresh this and you can see that the font size has actually increased. Then let's qui and give it to color. And let it colour be echo to F. It should be white. That is why I'm going to add this. So I hope that's cool and go ahead and put the comma and save this and refresh. So that is white. Now, I'm going to add a background to this square headun colour. And to add a background colour, we go ahead and add something like pink. Sorry, that is a pink. And if you add a pink, it will actually look good. If you take it out, but I don't really love this color. So I'm going to add a RGB color which I actually selected for this, and I pass that E and save and refresh, and that is what I have. Alright, now let's go ahead and add a butter reds to this. Esque in and say the butter rei and let there be t pix Z and put a semicron at the end and refresh, and that is what we have. Now, let's go ahead and add a cosa point so that cosa is going to be a pointer, and that is it. Now, let's go ahead and add a transition to this, as well. So transition and lay the transition background color. Let's say transition background color. Is going to be 0.25 seconds on polly semicron at the end and save this. Now, let's go ahead and add a Ha so that when you click on this, you can actually see that change because as I'm hoving over this, you can see that there is no change. So to do that, I'll go ahead and say that's our BTN Ha and go ahead and put a bug run from, say, a bug run coal. And I'm going to ta AbogiB coal and let's go ahead and put that. And now refresh this, and check it out. So we can see if I move my mouse, it can actually change. Now we are done with our HTMO and CSS. Let's go ahead and move right inside the JavaScript and now walk with this. So the very first thing I want to work on is the bodies. And these bodies have the IDs of DBTN arbit and invitan. And we're go right in there and say counst. And I'm going to start with the very first one, which is the BTN, and that is the BTN and let this be equal to document, right? So this is going to be a locks, W document that gets elements by ID, and the ID name is still the BTN. So while I'm past that and put a semicron at the end, I want to copy that and do that exactly for the remaining three botes. And for this botin, that is BTN. Then the last one is VTN. I'll also go ahead and change that, which is the ID inside here. All right. Now I'm done with the body in, which are these three bodies. Now, I'm going to work with digit counter so that it can actually count. And for me to do that, go ahead and say count. And then let's go back right inside here, and the digit count has a level and the ID is a digit CNT. Go back right in here and say count, digital CNT, and let that be q to documents that gets elmates by ID. And that ID is a digit C N T. So go ahead and pass that and that is a health. I put a semicron at the end, and now let that counter be equal to zero. So let's go ahead and declare a counter first of all. So let's counter the echo to zero and put the semicron at the end. And now we go ahead and increment this. So starting with the incrementing or decrement butting or any one of them, let's go ahead and start with the very first one as the align. Why I say the BTN. So the Btn dot on click. So the bitm dot on click, and this is equal to a function, and we go ahead and uh a show that will write something right in here. So once you click on this butting, it show actually do something because it's not doing anything now. So what we're going to do is once you do that, let's quiet as that counter is going to decreate. So go ahead and put the decrement side right in there. And then once it decrements, it needs to be shown. So it's going to be shown on this label. So go back to this label which gets the element, did it count, and copy that, and then press that right in here and say, that text content. So the text content is equal to counter. So what about counter does will be shown in this label. And let's refresh this and the canal see that is actually working. Well, you cannot reset and cannot increase. Now, I'm going to copy this and I'm going to paste that right in here and I'm going to work on the reset button. So to work on the reset body, all we need to do is we're going to change this to on that is ARU or btn, and then counter is going to be made to be equal to zero. All right. And once you make out to be equal to zero, and refresh this and the decrement, click over set counter goes back to zero. So in that same way, you go ahead and copy the decrement button and go down here and press that and change that for increment, and you go ahead and change your counter to equal to increment. So increment and save then refresh this, and you're going to see this. So let's go ahead and refresh this and you're going to see this and you can see that that is actually working. And when you hit on reset that goes back to zero, and we hit on decrement that goes Ova. And you can see it can actually decrement and increment. So ten, nine, eight, seven, eight, nine, ten, and so on, and for set. So this is a way to create a digit counter in JavaScript. We ahead up pull it down, practice with it. And if you have any question, you go ahead and use the question So section and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture. 18. Master Checkbox and Radio Buttons: Indeed JavaScript Cs, let's go ahead and learn about checkboxes and radio Bots. So VerbfaOS is a very beautiful example. We are going to look at it, and that is about a case selection once you subscribe. So if you subscribe to this, you're going to select either JavaScript, TypeScript, or react J. So any one of these, you're going to select that. But if you don't subscribe, you're not going to select anything. So if you want to start this case, you have to first of all, subscribe to this. Let's go ahead and say that Cs. It says, please subscribe first. So let's go ahead and subscribe. Without selecting any Cs and go ahead on stat Cs. It says, You subscribed, please select a Cs. Wow, that is really very interesting. Now, let's go ahead and select TypeScript, and go ahead and stat cas. It says, you subscribe, you are learning typescript. I hope that is very interesting, right? And why don't you go ahead and select React JS, start a Cs. You subscribed. You are learning react Js. And the same with JavaScript stat cas, you are learning JavaScript. And what if you go ahead and unsubscribe, and you still choose JavaScript, go ahead and start Cs. Please subscribe first. So you must always subscribe and then choose a Cs. I hope this is a very intelligent system, and I would like us to replicate whatever we have right in there. Let's go ahead and cose this, and then let's move over to index dot H GMO, and let's go ahead and replicate whatever we have right in there. So the very first thing I have to do is to go ahead and create the subscribe, that is subscribe. Let's go ahead and add a checkbox right in there, and I'll go ahead and say imput and I'll go ahead and hit on that. And the type of impute is going to be a check box. And then let's go ahead and leave the name, and let's go ahead and give it an ID and then go ahead and say that ID is equal to my check. Box. Alright, now, I'll go ahead and set this. And down here, I'm going to add a label. So if you go ahead on a fresh dis, let's check it out. We have a checkbox, and you can see that my checkbox is working fine. Now, let's go ahead and add the label to the so that we can always see what we need, and that is the subscribe. So for this, because I'm okay with the checkbox, this is for my ID checkbox. And right now, we go ahead and So the squaha and add Lebo. So squa ahead and say the Lebo is going to be subscribed. Alright, go ahead and save this. And that is for that. Let's go ahead fresh and took it out. We have subscribe. Now, let's go ahead and add the radio buttons. So I'm going ahead and put another imput, and the type of the imput is going to be a radio a radio. And then let the name of this let the name be Cs. And then let's su ahead and give it an ID. So the ID is going to be BTN, Java Script. Alright, T Java script. And then let's go ahead and set this and let's refresh, and we have that right in here. No problem. We're going to adjust everything. Now, to bring this down, let me go over here on the subscribe and added break. So then go ahead and add two break tag so that it will come down and refresh and have that there. So there is a space OPA, that is why I added two, so there will be a cult demarcation between both of them. Now, I've added this and I need to add a label just like we did for subscribe. And let's go ahead and say the level, and that level is for JavaScript. Go ahead and copy it and paste that for JavaScript. And let the name be Java Script. Alright. Now, let's go ahead, add a Lebo Let's go ahead and add a brick tag, and let's refresh and have JavaScript. And what do you copy this for Typescript and react. And then I'll go right in here and I'm going to change this to tn type script. And I'm going to copy this, and I'm going to change this to type script, and I'm going to change this also to type script. I'm going to change this to react Js, right? So this is a BTN reacts. And then I'm going to also change this to BTN, react, and then I'm going to also change this to react Jess's got a save this and refresh and have J scripts, type scripts and react. And now you can see that radio buttons are working fine, right? And my subscribed butting is also working fine for the checkbox. Now the next thing is the start case butting so that we can go ahead and start a case. Now, let's go ahead and add a button and the type is going to be submit. And let's the ID and go ahead and change it to ID. Let the ID be echoed to BT and State. And then let's go ahead and give you the name. L square herea I say stat Cs. And let's go ahead and set this Nfresh and that is two way close, and going to add another break tag right in here, sept that fresh, and I have a play demarcation right in here. Now, that is very good. Now I'm going to display subscribe, you subscribe and you're learning JavaScript type script and react down here. That means I'm going to need some levels, or some paragraph out here. That is the output. Now, let's squa ahead and put the paragraph tag and I'm going to give this an ID and let ID of this be equal to sub output. So the first one is sub output and let the second one be equal to the square S. ID of this second one is going to be equal to cause output. Let's go ahead and set this. We're going to give the text content in the script DJs. Now, let's go over to sti dot js and sti this. So I'm go ahead and say the body so that it's going to look good the way I want it, and I'm going to give the font family. So let the font family be equal to the Homer. Alright, and put the semicron at the end. So that is a ta haga for the font family. Can go and refresh it, and you can see it has changed, and we go ahead and give the font size and let the font size be equal to 1.5 am and save it and refresh, and you can see it is now a little bit bigger. Now, the body for the start course I'm going to work on that and let that be equal to BTN, so that is BTN stat, and that is what I want, and I'm going to increase the font size and let the font size be one EM and put semicron at the end and refresh. And that looks good right now. So I can actually select this, and now I can actually click on Set but nothing is happening. Let's move over to scrap dot js and now do a very interesting work. Now, I'm going to, first of all, every idea that I have created here, I fossphl go over here and declare them. So let's go ahead and say counts. And the very first one is the checkbox. Let's go over here and say checkbox comes checkbox and let this be called to document dot get eliminate by ID, and then we go ahead and pass in the checkbox and let's go ahead and put the semicrun at the end. And we're going to copy this right now. Et'squ and copy this, and I'm going to do that for one, two, three, four, then the two output below. Lesqui say one, two, three, four, five, six. Alright, so I hope that is cool, but it's one, two, three, four, five, six, seven. Okay, the two outputs for the subscribe and for the cs. Now, I go ahead and change it for the BT JavaScript, go ahead and copy this and go over here and change that for JavaScript. And let's go ahead and change this for JavaScript. Let's go over here and the copy for typescript, that is the IDs and that changes ID for typescript, for typescript, and go right in here and choose for react and go back here and change this for react. And let's go over to the submit boating that is BTN Stat and let's go ahead and change that for the SD boating. And then for the output, the first one is sub output. I'm going to copy that, and I'll go right in here and press that and also let's go ahead and also press this. Then we go ahead and cuss output it's one ahead and press this and also press this. Alright, now, we have this and you can see that have declared all this. Now, once you have declared that, we need to click the button. And once you click the button, we can now execute everything. Now, so the button and the ID for the button is BTN. So go ahead and presbtstt dot on click. That is where the function stats, and this is equal to function. So PTN starts the onclick equals function and the square ahead and check If you subscribe for the first time, and that is I. The connection I got to check is if this checkbox is subscribed. So go ahead and okay, that is checkbox. If my checkbox that my checkbox that checked. So you have to check it is checked. And then if that is checked, we go ahead and says, you are subscribed. And that is the outputs, the sub output. So the sub output is going to see sub output dot text content. And that is equal to you are subscribed. Alright, that is cool. G on plum Cron at the end, and let's go another fresh this, and let's subscribe and click you subscribe. But nothing is actually happening. So that is cool. That is a very first step. And now, if you are subscribe, else's quite s. Ss, it says, sub outputs. Let's copy this. Copy everything and put that right in here and it says, lease subscribe. Oh, lease subscribe first. So please subscribe Foust. And go ahead and save this. Let's refresh. Start cause, lease subscribe first. Hope that is cool. Now, if you subscribe, then what it's going to do is, let's go ahead and go under the If checkbox is actually checked. Well, I'm going to do that outside the checkbox. So once the checkbox is actually checked, we're going to create an if statement. So this is called a nested if statement. So you can actually put an if statement inside another if statement. Then let's go ahead and say, if that is subscribe and then the Radio buttons are also selected. We don't start by checking the very first one, which is JavaScript, and that is BTN JavaScript. So go and press that BtnjavaScript, dot checked. So if that is checked then the square head and say Cost output. Gui and press that Cost output dot text content and let that be equal to say, you are you are learning Java script W semicron at the end. Let's go ahead and refresh this. And let's go ahead and says, please subscribe first and unsubscribe says you subscribe. Unless check JavaScript says you are learning Jascript. Now, I'm going to copy this, and I'm going to do that for Typescript and Rat. Now, I'm going to copy for the ID or for type script, and I'm going to change these for type script first, and I'm for react. I'm going to copy the ID, and I'm going to change that for react. Now, I'm going to say this is you are learning type script. And this is you are learning react Jazz. Now let's go ahead and accept this and refresh. So if I should go ahead and says, please subscribe. I subscribe and I select to react, since you are learning react Jazz. Now, let's go ahead and unsubscribe and click on Stat case says, please subscribe. You are learning ref Jazz. We don't need to have lenninRJxG have not subscribed. And we need to clay this. How do we clay this so that this can only be shown when you have actually subscribed. How can you be able to do that? That is what I want to teach you right now because most of us would be like, Wow, what is actually Geno right in so I'm going to play this paragraph tag. And to play this portagraph tag, what I'm going to do is I'll go right in here and I'm going to choose the cost outputs that text content. I'm going to copy everything right in here, or I go ahead and copy just this. Then I'll go right inside else. So the else says, please subscribe first. Then it's always going to have an empty space or, you know, space is a character. So now if I go ahead and refresh this and go ahead and click on please subscribe and go ahead and unsubscribe and choose react and static CS says you're leenin or react Jz. Now, let's go ahead and unsubscribe this and static CS. Says, please subscribe first. And then the re jx is no longer there. It has been replaced with empty space. Wow, that is cool. Wow. That is really, very interesting. And now, what if you go ahead refresh this and subscribe and static Cs says you have subscribed. But you need to actually static cons. You need to actually start something. Alright, now, I'll go back right in here. I created so many I statement right in here, which is really, really, very wrong. It is actually very wrong to create so many ifStatement right in there. I should go ahead and use Else If and go ahead and use s I. Then I'll go right in here and use s which is very interesting. Now I cannot say that the cost output for when you did not select anything is going to be please select a Cs. Now go over here and I'm going to say, please please select a Cs. Alright, now let's go ahead and save this, and let's go out of fresh this, and let's go ahead and static CS, please subscribe first. Now, I go ahead and subscribe. Without selecting any Cs and stat CS says you subscribe, please select a Cs. I hope that is truly very interesting. Alright. So that is a way Kaabu to create something very, very unique, something very interesting, and something very logical in JavaScript. So go ahead and put this down, practice with it. And if you have any question on that dis, please go ahead and use the question and answer section, and I'm going to get back to you as soon as possible. Thank you so much, and I'm going to see you in the next video lecture.