BUILDING a Etch-A-Sketch game with javaScript (part 1) || DOM MANIPULATION

what's up guys and welcome back to my channel so a few months back actually almost three months ago i decided to learn how to code and uh and since that time and i'm actually having some fun with my with learning how to code and i decide to share with you i actually made a video explaining how i will learn programming in three months and i will not be lying and saying that i became a professional in three months but i actually learned some cool stuff like html and javascript and css i learned some some cool concepts and i'm having fun with it and i just want to share with you what i'm learning and what i did so far anyway i made this uh this hover game and as the title suggests uh it's gonna teach you how to manipulate the dumb and remember i'm not a professional i'm just a beginner i'm just sharing with you what i learned so far and what i'm doing and if you like this type of content and subscribe to my channel and because this will help me will motivate me actually to keep going and improve the quality of my videos maybe in the future anyway let me explain what this game is so when you when you load the page you will have this cool animation in the background of course and you have this grid 16 by 16 yes and when you hover over these small boxes right you will have a black color you can change the color if you want an rgb color a grayscale color right and so on rgb whatever and you can actually change the size of the grid you can have it five by five grid like so one height smaller bigger whatever 20 and change the size dynamically right so very simple but it will teach you some amazing concept and i actually in the styling i use the grid and flex flex box excuse me but because of this video might be so long because i've recorded before and to be honest the video is so long and i don't want to make a very long video so i will focus on the javascript part of this video and in the next video i will uh style it and we will make the animation and the cool stuff right but for now let's make it functioning let's put everything on the on its place and make it work and in the next video we will style it right all right so this empty folder and i made these three files of the js html and css file right all of them are empty of course so like i said i will not be focusing much on the css part in this but still let's link our style sheet right and our javascript file as well okay so basically in the html we will not do much in html because we want to learn how to manipulate the dom and that's why we will do most of our work in javascript even though uh the way we are do we gonna do the stuff we should do it in html and css but because it's a down manipulation video we are going to do most of it in javascript so the only thing we need in here give with a section pass and inside of it we are going to have an h1 with the name of the game okay all right and then underneath it we are going to have a div with the container class okay and another div with buttons class all right that's all we need in javascript okay and the next step would be to select all these three containers right javascript and create some buttons this is our next step all right so i'm gonna speed up my code here i don't want to get bored all right so after typing all this actually we forgot one more thing we forgot the buttons okay all right as i was saying after doing all this now we are going to make a function so we can dynamically make the grid i show you at the beginning right all right and this function should have a column size whatever we will input like 16 or 10 or 5 or whatever and the row right so this function will take these two values let's loop and generate our boxes or divs whatever you want to call them i smaller and we will multiply the columns by the rows okay and inside our loop we will generate of course the small boxes or the small divs right elements all right now we will select the container and uh i will use the bug ticks in here and this will be whatever we will input um like i said i will not focus more on the css side because this should be done in css but because it's a down manipulation of course [Music] i'm just trying to show you that it's possible to do whatever javascript anything you can do javascript basically uh it's very good actually there's a cool way to was gonna do almost exactly the same but for the rows right and we will change also this one yeah all right the next step is to append container dot append child what we will append is div we made but we will add a class to it last list but let's call it box right now we actually made creatives we made our 16 by 16 for example let's say for now because later it will be dynamic right we will be able to change the size of it as we want okay but for now let's make it 16 by 16 and hit save and let's go actually we will not see anything because it's white so let's go back here and and add some style to it right style.background or border let's let's have a border have a border of one pixel it's palette okay and hit save and switch right now this is what we have because we have no style and that's why it doesn't look like this but bear with me in here right it's gonna look like that soon uh okay we can add some a little bit of styling maybe let's style our container so we can see what we are working with right let's tie the section as well okay let's style this section and hopefully it's not going to be a very long video because i don't want to make it but anyway let's use flexbox right display flex and justify content to the center and align item center as well okay and now let's do the flex direction because i don't want everything the buttons we're gonna make in a while and uh and our grid to be in the same row i want them to be um uh on top of each other right i want them to be a column not in a row and we are going to give it a width of a hundred percent and height of hundred p view port height it okay let's do quickly uh the h1 as well so we can center it we can position it in the center as well position absolute okay and we we're gonna give it a top of 50 pixel only i don't want it to be very far from the top and the 50 percent uh left and transform translate minus 50 percent and this will center it exactly in the middle of the page and finally i will give it a font size of 4 am right ok and next let's move on quickly to our container right let's move on to our container and give it a width of let's say 600px and i'm going to give it the same height height oh okay name height and of course let's display it as a grid and i want it to be always on top of everything so i will give it a higher value whatever you can give it 10 or whatever anything and uh that's it for now we will not go further okay and just keep it at that and let's see what we have so far right and if we switch right now this what we will have is grid 16 by 16 but they are all on top of each other there is no row there is no columns right and we will fix it of course we will get here soon enough okay anyway let's continue continue by what we're gonna do next is to create our buttons right we already create the buttons but let's make them function let's add them to the page let's inject them to the page right so how we are going to do that all right very simple very easy let's start with a gray color yeah all right so we are going to call it gray gray color you can name it whatever you want not a problem and we are going to select the boxes we made these boxes right is this okay we are going to call the container.queryselector but this time all we want all the boxes inside of it box right because it's not one it's 16 by 16 so it's it's too much boxes right merge this and we are gonna call a btn gray this one that we created here right right here okay and we are going to set the text content of it to be simply gray okay and then vtn gray add event listener this event listener will be a click event yeah and we are going to use the arrow function it's the as6 syntax and now we are going to generate a random number okay we can manipulate it and create a grayscale color like the one i showed you before let me show you again real quickly uh in this one in here so when i click let's reload reload i can show you okay and if i click gray it's gonna look like it's gonna give me a scale of gray color from a very light very dark and it's going to be random this is exactly what we want anyway let's switch okay so now we are going to do it by making uh making a random value like so we are generating a random value actually yes and we multiply it by 255 why 255 because each color has a range from 0 to 255 there is they call it like it's rgb like the r is red stand for red and green and blue right so each one of them has us has a range of uh 255 different different shade of the same color right it's 255 so we will and this math.random this math will uh dot random generate a color a number excuse me a number between zero and um zero and one random color between zero and one so by multiply multiplying it by 255 this will give us a random number between 0 and 255 and this is exactly what we want random color so we can generate a grayscale yeah hopefully that makes sense so actually i will not create another variable i will just create set the box notebook box but i just make i just made a mistake actually yes i should i should i should do it but not now i should look first we should loop for each wishes loop through all the boxes first and then set the background color to whatever we want okay and in this case we want it to be grayscale like i showed you before right so let's add an event listener for each box we'll add an event listener but this event listener will not be a click event it would be a mouseover event okay and in here you will have again yes tax and so what we did before we are going to do it in here and we will set the box dot i dot background be equal to let's use the backticks rgb okay and we are gonna give it this value right and we are going to repeat it three times so we can have a grayscale color that's it very simple very easy okay and now let's append this to the body and we will add a class of button again okay and now if we call this gray scale not gonna look exactly the same but it does the styling and we will style it later so let's switch again we are going to see the gray button right if we click this button we are going to have a gray scale color so now all right so i'm gonna copy the same function we did for the gray color and i'm gonna paste it right but i will just change here from gray to black and instead of vtn gray gonna be btn black and we are going to copy it we are going to paste it in here and here and i will actually leave the class name i want all my buttons to have the same class name and i'm going to get rid of this line in here and this one here we are going simply to say black color set the background of the of the box to be black and the text content will be black as well that's it very simple very easy right and if we save and switch back now you are going to see the black one right and if we hover we see black colors right if we switch to gray all right so now quickly let's do the rgb one right i'm gonna copy again i'm gonna copy this function because i'm very lazy and then let's change the name to rgb and let's call it in our rgb color okay and instead of ptm black gonna be btn rgb copy paste it in here and paste it in here and uh what else what do you want to change okay we are removing this one and now we are making three different variables right for the for each color for the red color we're having of course a random value okay but and we will multiply it again into five and we are going to copy this a few times and we are going only to change the variable name okay that's it and here we are saying box dots i dot background color we equal uh our rgp random values we just selected and if you guys are wondering what's different between and the gray one because this function whenever we call this function gonna give us yes a random value but three of these value will be exactly the same like if this random value is like let's say a hundred for example this would be a hundred this would be 100 and this would be 100 you know but in here we will have a completely different number for each one like if this one is 100 this one would be who knows like i don't know 50 or 2 or i don't know 200 whatever any random number between 0 and 255 all right for each one that's why so let's use again backticks and say rgb that's it that's all we need to do in here and now we are having our third button so let's hit save and let's switch to see what did we do so this is our third one oh we need to change the text content you need to change the text content instead of black be rgb right now let's hit save and switch back and now we have an rgb and it's completely random rgb all right so let's switch back to our vs code and make the final function right but before i make the resize function uh i want to make a small function to reset my grid and remove all the boxes from it right and i will explain why almost actually too lazy and now i'm going to loop through them boxes dot for each box use the arrow function you don't need to have a bracket here box dot remove will remove everything right but i will not call this function like the previous functions i will make now let's make the last function resize and and we will call the button we have we created uh at the top x content let's set the text content to be equal to grid okay and now let's add an event and listener and this event listener will be a click event listener and again let's use the arrow functions okay and in here we will create a variable user and prompt prompt prompt the user to give us back an input and we will ask this user to what size you want your grid to be or whatever question any question you can think of whatever and now we are going to check if the user did not give us back anything so if the user did not give us back anything i want it to be exactly the same to behave the same way because uh when you when you prompt the user i think the page will reload yeah and uh when the page reload i don't want it to lose anything because if the user did not give us anything and press enter all the other functions will not work for some reason i don't know why but they will not work and that's why i have to call them back again inside of here right let me show you how user now if the user is less than one okay in this case i will call the reset function and i will call create this function with the same amount of the 16 by 16 same number i gave it at the top in here is b16 i will keep everything i will call all the other functions black color i will call the gray color yes and finally i will call the rgb color right and in case of the user gave us back an input input like 5 10 16 whatever the input i wanted to do and in here we will say else okay else i wanted to do exactly the same thing but with the small different in here i wanted to call it with the user amount with the user input okay and finally i want up hand i want to append this button again nice and also want to forget the class and finally we are going to all a function in here and we save and let's switch back to see what we have and we have a resize button so now i want to to tell you something uh i did not understand why so now if i press here will prompt me yeah so if i press like for example let's say five i want it to be five by five okay it will change it but you see the resize button which from here to here and i have no idea why i have no idea why so it's working perfectly if i click black it will be working perfectly gray working perfectly rgb working perfectly resize again four by four let's say gonna be a four by four again it's working perfectly everything is fine but why does it jump because look now if i reload again you see it's back on the left side if i resize any number okay gonna jump in the left side and i have no idea why anyway that's it for this video and i will see you in the next one and we will do the animation and the styling and thank you for watching see you in the next one

Channel: Rise To Code

Views: 1,776

Keywords:

Id: ACP61O9f618

Length: 33min 46sec (2026 seconds)

Published: Sun Jan 31 2021