Build a Rock Paper Scissors Game with JavaScript, HTML, & CSS

guys are doing amazing this is nice and today we are building we are building a rock paper scissors game that's right a rock paper scissors game check this out right i can go ahead and go through this game you've got a score if i for example click on hand the computer will pick one for you right here the computer picks something for you and then basically if it's a tie we'll say it's a tie now let's try play it again if i for example say it's like this oh you lose ah i suck okay and then you lose if i play again let's try another one let's try this one this one it's a tie again damn it let's do this one you win and you see as you win your score increases right here again guys this is a project by front-end mentor so if you guys want to check them out right the link is down below in description of course and i also have the github for you so if you want to follow along with me the whole time right i actually have the full project done for you go ahead go down the description there will be a link right here it'll be this link right here the challenge link it's a github link click download download a zip okay and then you can actually just follow along as i go along with it of course you can use the images that's there on here and so forth but if you guys want to actually fully check it out i would say go to fundamentor and then you should see around here so if i go for the mentor here let's go to challenges yes go to challenge if i just type right paper scissors rock paper scissors right here boom boom here it is so i highly encourage you guys go ahead and just view it and i highly encourage you guys just uh create a creative uh you know a login there as well okay guys alright with my friends hope you guys are excited hope you guys are ready to get started i know everybody is hello hello hello everybody hello adrian hi adrian good to see you good to see you okay those who are on youtube guys you know the drill down the description below follow along uh you know as much as possible if you cannot just watch the video and of course you can always rewind later on all right guys okay cool let's do it my friends so this is what you're going to be building of course the rocket scissors game what is this using well a few things one is going to be using javascript so js and of course we have html and css now this might be a very simple stack but the thing is with this stack is you can do a lot of the stack with this stack you can do a lot of different things and of course with this stack you can you know uh most importantly learn the logic there's a lot of logic that goes behind the scenes and how to actually make this work and that's what we'll be focusing on all right beautiful let me go ahead and make sure this is a world caster beautiful uh amanat if you can please go ahead and mute everybody and please just unmute me thank you i'm all good now all right cool at this point that's pretty much it so the first thing you guys want to do is everybody those are on zoom those are on youtube let's of course you know the drill let's create our new application i'm going to put this to my right hand side i'll put this on my right hand side i don't need this anymore and of course i'm going to create a new project so let's go ahead and go to projects and let's create a new project and then let's right click click new folder and what should we call this project we'll call the rock paper scissors see this right there okay rock paper scissors again empty project nothing inside of that okay i'm going to move my project to the left to the right-hand side so i can see some of the code it's getting started in here [Music] sorry i just love that song such a good song okay beautiful and then what you guys want to do is go ahead open up file a new window you know the drill file new window open up this right here click open and then let's open up the rock paper shoes game let's go to projects here and a rock paper scissors click open on this one again like i said guys you guys have all the code download it go watch it you guys there's no restrictions on it whatsoever okay beautiful first things first we're going first things first we're going to do is create an index.html file that's of course that's usually the beginning that's why code does not seem too difficult that's right a beautiful so the first thing first we need to do is create an index.html so it's going to right click new file we'll say index.oh let's say uh new file we'll say index.html just like that all right i'm gonna place the music as we're cutting this up of course right and of course let's let's add the boilerplate and you guys know what is the way to add the boilerplate html anybody remember this anybody remember this what is a way to add boilerplate html yeah that's right so just not just tab but exclamation point right here dumb boom done okay done just said bulletproof html is already added by the way okay with this a little bit smaller beautiful all right bulletproof smell let's change the style to be rock paper scissors scissors rock paper scissors beautiful okay and of course now that we if we look at this page right of course there's a lot that's going on on this page that we need to do right it might seem complicated and actually it can be a little bit complicated if you don't know exactly how to divide a project up this into small little pieces guys all right trust me there can be some difficult parts so for us to make this easier i want you guys to tell me okay what would i do for example how would i develop this project what are the first steps and what is the second step let's go and look at this what's the first step we should do to maybe create a project like this anybody know here you're on youtube maybe you're on here what is the first thing we should do to create a project that's right shamar create a wrapper what is another thing we should do make divs yeah make divs that's right so let's think about number one is okay what kind of boxes is this dividing into right but before i even go into that guys sometimes i do this and i want you guys to follow along with me let's go ahead and create a new file and i say plan.md that's right planetmd and so for example i like to create a small plan so for example number one i'm gonna say you know what let's go and create the boxes create the boxes for how it looks like okay number two all right now of course let's figure out how do we make sure that how do we for example right number two let's go ahead and add create the header right that's that the header is gonna be which part the header is gonna be which part it's gonna be this part right here right that's the header right here okay so create the header portion oh the link to the project uh great right here isn't the project i give it to you guys boom the project okay so we've got the header okay after gen creating the header what else do we do guys tell me what is number three what else did we do what is number three anybody know well for me it's going to be to actually create the to that's right well the header is the banner the header is the better i'm going to say to create the rock paper scissors buttons paper and then scissor scissor buttons right so always like to divide these things up because i know that a lot of you guys right a lot of you guys i know a lot of you guys do not know somebody said what the link project what no the link cannot be from yesterday guys if you are in let me make sure it's all good no the link in the description is not from yes it's from today guys you guys are not correct on that one all right good no worries right number four is going to be the following right the one thing i want to think about is is okay well what happens when i click on on one of these buttons right how do we make a decision right how do we showcase who who won right remember and fundamental if we look at our wrapper game it kind of looks like this right we have you know uh basically when you go ahead and say i win or whatever might be of course it's going to showcase who wins as you can see on the inactual picture right so how do we do that that's right user interaction right so basically we just say create an on click event right create an on click event for the rock paper scissors paper scissors okay and then five five the last thing is going to be what after that after you create an unclick so we can have an event what should this event do what should happen when i click on something anybody know those who on zoom lamont david craig anybody what do you guys think right what is the answer that's right what is it who wins that's right right but what should actually happen well when clicking the button right we need to hide we need to hide right we need to hide one we need to hide this portion hide this portion right hide the buttons and show the actual winner right so to figure out a way to hide these things right because remember if i click on this you see it replaces it it replaces the actual content of that div you see so we need to be very careful around that okay great six six okay what now we've hit the buttons we showed this what now what do we need to figure out okay so we figured a way okay to maybe to we figured a way to go to this page okay [Music] go to this page what do we do after that to that page not necessary we want to focus on this just yet because remember there's one big thing we haven't done yet guys one more thing i've done that this one we showcased that's what we picked what about the house how do we know what the house picked how do you know what the house but you guys are going to we don't want to think about the score just yet no we're not clicking the score instead we're figuring out hey what is the computer going to pick now that's right that's right we need to figure out what is the computer going to pick so so figure out what the computer is going to pick it's going to pick that's right you see we're figuring out what the computer is going to pick that's part one that's the most important part guys right there's that's right it's a random loop so we're going to pick a random pick basically from that section okay so after we've picked that section okay after we after the computer so we pick this computer picks this what's next anybody know maybe david maybe sam anybody know well here's why i say to that that's right compare the results now you compare results and figure out who wins now awesome but of course we've done this the one thing we didn't account for is we create the header we create the operations game but we did not create the actual view for this we do not create the view for this guys that's the interesting portion right that's an interesting portion so actually after we create the right procedures buttons we need to create the view up for the contest i call it the contest the contest is this view because remember think of it like this this right here is a div it's a div okay it's a div and basically when i play again and this is also a div remember this is also a div right here but this div get this div right here this div right here oops no not this one this div right here gets replaced with which div anybody know this dude gets to play with what div anybody what is it anybody what would it be what do you guys think sam david jay you guys think what is this replaced with i'm winning you guys result that's right with the results right see this replace it now this this div right here replaces the other div you see what i mean so we're swapping the divs is what we're trying to do here right so if you think about it what we've done right now is we created a visual representation of how we want to create an application like this and for all you beginners all you beginners who have the hardest time of starting anything because i know you do i see this every single second i see this every single day oh i have the hardest time starting anything i can copy i can watch tutorials no problem but i can do not know how to actually create something you're not spreading your application into small little parts you see what i mean you think too big sometimes the thing is when we think too big when we think too broad we think too broad and we think that oh this project is so big then this project is undoable for us versus if you make a project and you're like you know what okay well i just have to do step by step you know little step by step that's right right you go okay we'll create the boxes create the header create the right resistance buttons create thank you for the contest create the on click events you know so that's pretty much it my friends you see now we have staffs we need to take does that make sense everybody yes or no can i get a thumbs up can i get a thumbs up beautiful thank you awesome sweet so let me go ahead and continue on let me drink my ah my tea because i like my tea always gives me the power and let's go to minus html beautiful now image html a few things i want to do one uh before i actually go into the body i wanna uh do this i want to change the font style of this whole thing right so i wanna change the font style of this whole thing okay now to change the font style i'm actually using your font cold let me show you here here i'm using this font right here so this is called barlow something barlow so barlow font and the way you guys can get that is if you go to google fonts here google fonts okay and google fonts and then you just select the search up font called barlow okay i'm gonna say barlow right here you see if you just simply go to barlow okay and then you see we have weight of 600 right here all you do is now say we have a weight of 600 you will select this barlow so select this style for example and by the way it tells you exactly what you need to do to actually use this simple as that so for example it tells me hey i need to use this so right here see so i select this 600 and what does it do well i just copy this whole thing i'll place it in for you guys let's have it and i'll just paste it in for myself boom that's it you see and so now what we've just recently done is we went ahead and we imported a new font family okay something i want you guys to really focus on all right next up let's go to our body the first thing i want to create is create a wrapper for this whole body okay so let's do this we're going to we're going to say div deal class is equal to wrapper beautiful all right and this wrapper is basically going to be the whole wrapper of this whole body to make sure the whole body is just a full height i understand that okay understand it all right beautiful so we're doing that and then while we're doing that i'm going to create the css so let's go a new file and i'm going to say style.css beautiful right so the style the css right well we'll do well remember the drill we like to right away update the padding in the margin for everything so i'm going to say over here star i'm going to say padding 0 and anybody know who in the zoom chat or maybe you're on youtube okay and this is not pre-recorded by the way if you guys are new to this is not pre-recorded this is me okay that's right i need to say code see it says reset so i'm gonna say padding zero why are we doing this anybody know why we're doing specifically yeah but why are we doing padding zero margins here that's right joe margin zero margin zero okay margin zero great why are we doing this well because it's because we want to reset the each one the you know every each one all these p tags they have all these little weird margins and paddings okay okay and so what we want to do is not that so we want to do margin padding zero and then do box sizing border box border dash box right here box sizing border box beautiful next i'm going to do is i'm going to change the font family of the whole body so i'm going to go to the body here i'm going to say here font family okay and i'm going to say the the following found the one that actually told me right so it's going to be like this font family boom barlow condensed sense syrup that's right that's right that's right right to reset the default padding but that's right or die is it is to reset the default padding and margins you're correct on this one right you're correct to remove the phone that's right a bull that's correct right right to kill the defaults amazing job everybody now once we've done that of course once you've done that let's go and save this let's go back to this html so you have nothing inside the wrapper we've created nothing so far but which is okay i want to right away already let's go on an open fly server some of you guys might have the live server hopefully you guys do if you guys don't do this just uh add the extension for live server okay open with live server let's go ahead of course it's a wide screen but that's okay that's not that's not our issue the next thing we want to do is let's go ahead i want to change the background color of actually the whole wrapper and make this wrapper the whole width and height of you know of the what's it called here let's go to style the css one more time and wait wait wait wait wait wait wait wait a minute wait a minute the application go sorry application go right here there it goes i'm gonna talk about the wrapper dial wrapper and inside the wrapper a few things i'm going to give this full width of 100 100 vw now anybody know what vw stands for anybody know what the w stands for what is that website anybody know what does that vw stand for yeah with w basically stands for the whole view width that's right so basically the whole view width which is going to be this whole thing right that's the 100v vw okay great i'm going to say height of 100 vh of 100 vh okay that's the what is the h stands for guys that is what the vertical height that's this height right here that's the vertical height okay and then i'm going to give it a gradient a small gradient and here's a gradient i want you guys to use you guys have it in the file so you guys don't have it so let me go ahead and put that for you i can actually put in the zoom chat if you guys want okay boom boom boom okay and i would put in the zoom chat for you as well right here okay right so this is a radio gradient and let's see save that and we have absolutely nothing anybody know why that's the case well let's take a look at it here video grading it looks pretty pretty good should not be the reason why it's not showing that's going to inspect them but on this one rapper sometimes it just happens for some reason which i have no idea why which is okay oh i know why it's not happening anybody know why this is not happening that's right malisha we need to connect the stylus to the style sheet let's go inside html let's type link and we see link css boom it right away as the style says for us don't have to think about too much hey there we go there is our full on gradient okay there is a full-on gradient beautiful now after the wrapper we've created we need to now go back and now create the scoreboard so let's go with the header scoreboard right i like i like to call it once i div class and again the scoreboard is going to be that's what section that is this section right here okay it's cardboard so div class i'm going to call it scoreboard okay so we're cleaning the specific divs and then within the scoreboard we have what a few things okay in the scoreboard we have what we have the um what is it what do you guys know the title so we have a few things right we've got this uh little title logo i call it okay this data title logo right here of course and we have the score so let's take a yeah that's right title and picture that's right so here here's what we have so number one is div class okay title okay deal quest title and then inside the title what are you gonna say well we're gonna actually link the the title image so those of you who guys again we have the all the assets down below in the description below you can either go to find a mentor we have the access below as well okay so from the actual whole project so if i do this if we go to assets right here here's all the projects all the assets you can just go ahead and click download the whole zip so what i will do is just simply because i already have it inside in here i am going to download it as a full zip so that i can actually get the assets myself let me see download zip hey beautiful let me go ahead and unarchive it beautiful nice i'm gonna take the assets and i'm gonna pull them up i'm gonna put them into my project what will just happen take them and put them all the way in my project right here add folder to workspace yes right here done see oh no i wanted to put it inside here that's right oh come on not inside the actual whoa okay i got a better idea let's create a new folder inside in that case let's call it assets because it's not pushed put in a whole folder for me and i'll just put the images like this right here okay that's much better right there see so i put the assets individually for here i don't need to do this in that case i need to i can just simply remove folder from workspace don't need that and right here so we have the assets folder in here you can just simply add it just the way i did it as well okay now let's go ahead and include our image right we'll say source is equal to what assets and we'll say what we'll say the title.png right there that way if i look at this right here let me go ahead and do this tell the png is not showing up am i doing something wrong anybody um let me see out of that png it's right here right spectacular it's really weird why that's the case i think the live server dropped that's why okay now open flight several more times okay there we go i think the live server dropped that's why it's okay all right so save that so we've got the title next one is gonna be the score card right so let's go ahead and create a score card that's gonna be inside the the scoreboard so day of class right that's gonna be what score boom right there inside that okay inside that is gonna be uh we're gonna create one a score like this and then the number of the score is going to be an h1 like this that's gonna be for now it will always start with zero guys right what what dot is there a dot did i miss something what that sam what did i miss i think i got it right i think it should be good yeah it should be good i think right so h10 right there so now we've got this situation of course but it's not done now let's go ahead and actually modify now something the way i like to do it sometimes is let me show you a really cool trick here so if i right click right click and inspect i'm on this one okay here's a really cool trick sometimes i actually just like to do it myself right away inside inspect elements so i can see how the styles are changing really fast and this is a really cool tool that i like to use personally that you know just helps me out and make things css a lot better so for example if i go to the scoreboard here okay if i go to scoreboard here and i want to change it so for example first things first i'm going to give it a width so here so width oh 700 pixels to give a specific width after that i'm going to say border i'm going to give it a border actually you guys can see exactly what i'm working with one pixel solid solid and it's gonna be white why because if you look at it here right we have a solid white border around this whole thing makes sense beautiful after that we're going to do what well we'll say whatever it is to make it a curvature or the radius and how much do you guys want to give up whatever it is anybody know what do you guys think how much water is you guys want to do i want to say maybe 10 pixels 15 pixels i'm gonna say 15 pixels right here beautiful that looks good okay that looks great yeah sometimes at 2 em that works too 2 am all right then after that what's going to happen let's move it a little bit more up so let's do margin top if i want to push it from the top side what i guess you would i use guys if i want to push on the top side so margin top margin dash top is going to be equal to what 50 pixels that's right right so that's push it to the top don't worry about this whole thing don't worry about it that's going to happen okay don't know whether just just yet okay don't worry about it just yet all right yeah that's right 10 pixels 50 pixels after that what i want to do is let's also so we have a width let's also give it a height we get a height of 150 pixels okay beautiful right and then what we want to do guys you see how currently wrap up the scissors what does it look like well it's here then this is here we're going to put the score to the right hand side what do we do anybody know you guys know at this point right on zoom on youtube what do you guys think display what display flex my friends that's right so we'll do display flex yeah beautiful display flex okay and you can see it went from left to right now how do we push to use away from each other how do we push this away from each other so make sure it's all like this what do we guys use let anybody know anybody know well we're gonna use what justify content you guys can play it for me justify content what yeah space between that's right space between a beautiful okay that's exactly what i want to do it's exactly what i'm doing nice beautiful now the next thing for that is let's go ahead and go to our what um our this how to make sure this wrapper you see this wrapper is great but how do i center this whole little thing in the middle anybody know how to send this whole little thing in the middle anybody know that's right display flex as well the place by effects as well so i'm gonna go with the wrapper here and i will say display flex flex a display flex and this can be what direction are we gonna do it with remember we have the top we have top and bottom what direction are we using guys anybody know what is it what is it anybody know i'm waiting for you guys column that's right so i'm going to say flag design column so i'm going to say lex lex direction column that's it right column okay and of course you guys know the drill this point if i want to center this horizontally i'm going to say align item center like this okay that's it you see i have sounded the way i wanted to do okay beautiful next up inside the scoreboard of course i want to make sure this is also centered of course so i'm going to say justify content space between what about the vertical alignment guys what should i do here for the vertical alignment what do you guys think well online items center right there see now it's all centered like just how we wanted to center right so now we've got the scoreboard that's beautiful we've got you know uh this let's now take a look at the actual score card which is which one the actual this score card right here let's talk about this one i want this course card to also be a certain way so i'm gonna give this scorecard a with off 150 pixels okay and a height of 114 pixels okay next thing i want to make sure that it has a color of what what color do you want to make sure it has well let's take a look at it you see we have it's like a it's a box right so it's a box right here and what is the background color for this box well one it's white so let's do that right now so let's do background color color white beautiful of course right and then of course we need to have a border radius for this one so let's do border radius radius is going to be what what is the border we are speaking we should give it guys maybe eight pixels like this i like that okay good good good good good now of course after that we have you see that we need to add some space in this to the right hand side how much basis should we have guys anybody know what do you guys think i will say what maybe 30 pixels so on how do we do the spacing anybody know how do we do spacing if i want to add more more space at the right hand side what is it yeah margin that's right so i'm going to say margin right margin that's right and i'm going to say here what 30 pixels yeah exactly right 130 pixels beautiful that's right that's right i need to yeah okay that's correct that's correct okay beautiful let me go ahead and make this a little bit smaller one second hey guys i won't be able to read all the comments yeah i'm actually using vs code that's right i will use this code here in a second okay i will use this concept i like to do this so you guys can see this really fast right after you've got the score what do we need to do everybody so we got the score everything is good of course we want the score to be centered so what do we do if i want to put the score the zero in the center anybody know what do we do going to use anybody know those on zoom what are we gonna use do with the score in the center what do you guys think just curious yeah a line yeah so well first thing you display flags on this one so display flex and this one of course and it's left to right but we want we wanted to have it like top to bottom so when i say what yeah so i'm going to say flex direction column right that gives a top to bottom section and i want to say what justify content center this is for her vertical alignment now and then align items what center that's it right that's kind of how it goes right there look it's looking a lot beautiful already right um beautiful sweet i love it okay next up what i want to do is i'm actually going to just copy all these styles that we just created and i'm going to you this one they want to add is for this title if i i'm going to add a small padding for the title here so i'm going to say padding left here or margin left here margin left because just how we have the padding for the top right section i'm going to add the margin for the left section too boom let me see here beautiful right there see looks so much better yeah knitting it's text line won't work so well in this situation like this okay so that's it guys so why do i do this very simple sometimes i like to just test it out in my you know inspect element and then i will right away put it into my actual application so now check this out now all i have to do is the following i right click i go to here right and i will slowly do this so i'm going to go back to my style of css i have the class wrapper here so i'm going to say wrapper and i'm going to give it all the styles that i copied here so display flex select direction copy this of course and then paste it in boom done you see what i mean boom done done and done so the wrapper that's so good after that i go to the scoreboard so let's go to scoreboard here so the scoreboard same thing i'm gonna create a class here called scoreboard okay and i'm just gonna copy all these styles right here right copy all these scholars to scoreboard boom done you see just like that after that i'm going to create what i'm going to create which uh style i'm going to create the uh i need to focus on the title section so i'm going to say scoreboard what i'm going to say that title so i'm saying that title okay same thing margin left 30 pixels so copy this one right here good after that one we have the score that we focused on let's go to score one right so we have now that score that score and i'm going to copy everything from there into there right boom beautiful all right what's up cannon how are you my friend awesome sweet so let's go ahead and save that and now we've saved this right we put it into our celsius set if i refresh this okay see it's default it's just how we did it how do you order formula you should have a prettier if you're not if you're not out of format you should have a prettier right here a prettier so you want to use an extension called a prettier extension to do that awesome sweet so we got that portion uh next up is i wanna change these colors a little bit and modify the actual uh h1 so i'm gonna say right here dot score h1 h1 okay and i say give it a color color and i'm going to say the color is the following you guys the color is this one right the color is this one so if i save that and i'll go to my application here's the color right here see that's the color of the h1 right that's the color okay yeah that's right harshal looks much better now okay sam your images should be working sammy just download the whole thing it was just if your image is not working it's because you put the assets folder in the right in the wrong folder sam you have to put the assets folder in the right folder okay okay so try it one more time there's no reason why your images should not be working my friend there's literally literally no reason whatsoever no reason period because it's a simple html application so if you have your index.html make sure your access folder are inside if you don't see your if you do this and you don't see access folder disappearing you did something wrong that's right there's something wrong right and if you go to for example your index.html right if you want to actually add that's this folder right look this right here means homepage that's where it means hey go to the homepage and then go the assets folder and as you're doing this you should actually have it so dash assets dash title png and of course make sure you have the live server move your images or change the folder name yeah that's right do not change the folder name do not move your images guys okay do not move your images there's a large code and will appear when i add to asset it is a large what somebody talking about sam no it should not be so if i have here let me show you guys here i have my app purposes game main which is downloaded okay and my access folder is here here's all my images take all these images and just drag them into right here just drag them that's all you have to do sam just drag them that's all you got to do my friend just drag them in okay you don't have to do much more than that okay just drag them in you can even go simply to your whole folder so if i just simply go to my projects folder right rock paper scissors here just drag the whole folder into here as well that will work as well okay that's it we want to make sure that you do continue with us okay beautiful so we've got the the h1 let's go back to my style the css go back to my style.css okay yeah good good thing retro that's right that's right yeah there's there's there's no you guys can get it if if sam if you can't get the images working i'm sure you can trust me i'm sure you can you just have to copy in the right direction that in the right way that's it i have my full i have a full confidence you can okay next one i want to focus on the score one this title right here score it says right here right so let's do that right now so i'm gonna say score score p tag done so right color color changes now the color is gonna be the 2a whatever this colors is called right let's give it a different font size font size of what font size of 16 pixels okay and then save that of course and then let's do a font weight of 600 of 600 okay and then let's do line height of 19 pixels just so it's a little bit higher right there beautiful okay and after that let's go ahead and give it a letter spacing of 2.5 pixels boom nice and then honestly that's let me see here um that's pretty much it the only thing i don't like is like i feel like this number is a little bit bigger this h1 i feel like it's a little bit bigger okay and that's pretty much it i think the reason why this is bigger right here is because i need to go to find a different font size sam did you get it by the way sam the color my friends is going to be the color right here sam just keep trying man you just keep trying you just keep trying make sure the folder your assets are on the right folder that's it what what do you mean about missing info what do you mean download go to the download it's here right here code download the zip here code download zip that's it code down the zip and then then your assets folder should be in there okay unzip it guys unzip it unzip it once you download it good and it should be right there there's no reason why yeah right here unzip it from here that's it and here's your assets folder guys okay got it got it yay okay cool you got it sweet nice yeah i just you know i don't like small things like these to just to for us i do not i do not like it when things like these like you prevent us you know from containing like small things like you know do not allow you guys to continue on so then font size or 56 pixels guys and of course that's pretty much it so if i do that save that hey let's go so here's our whole scoreboard that's it our scoreboard is done right so if i go to my plan right the header which is a scoreboard scoreboard is done i like to call it it's done so right let's go to the rock paper scissors buttons of course now we need to create this one this is going to be a little bit more difficult guys but that is okay the way i want to do is the following right if i go to my index so we have scoreboard what should we call the next section which is let me play this one this section what should we call this anybody think right what should we call this section what should we call this section well we i'm gonna call this section the uh main i'm gonna call it hands like which hand did i pick that i picked this hand this hand so i'm gonna call it actually hands guys okay i'm gonna call it hands okay so i'm gonna say say df class boom okay do class hands boom and then inside that is going to be very simple inside that is a few things we've got our left hand okay we've got this one this one of course and this one okay so let's do this right here we'll have the class is equal to what is equal to um paper so we're gonna have paper as a hand as well right then i'm gonna have which one div class okay i will start adding javascript in a little bit after we have the hands done okay div class scissors because like there's no reason to add javascript if the html is not done it's as simple as that guys okay there's no reason that javascript if the is not done then javascript is useless scissors and then we have div class dev class is equal to rock done gif class rock okay then i go to my uh and i'm going to add a few images one of course we got the left image right here got the left images okay why use html because graphic we use html because well pages are made from html this is not a react.js application it's a javascript html it has application okay so let's do this right now now let's do the image if you want to create html using javascript then be my friend go ahead okay then i'm gonna do the assets okay assets okay and then i'm gonna give it a that paper.png so first it's going to be paper.png the next image is going to be which one guys and there's next image so i image image source is equal to what acids oops like this okay assets and which one p uh what is this one this is the scissors one right so scissors boom and the last one is gonna be image source is equal to what assets and then i'm gonna give it what a and okay hand no actually no which one rock paper no rock that's the one rock that's right so we got these images okay let's see what actually how it works out okay let's see hey we've got it nice nice beautiful beautiful so okay with that with what we have so far of course okay we've got these images in here but of course they're not functional there's nothing going on here so let's go ahead and make them functional let's go to stylus css and the first thing i want to work on is actually going to be well it's hands right so the one thing i want to work on is the following so let's go ahead and do the hands boom oops that's not the one right well again we want to go where make sure these hands come from left to right like this right all these little hands go from here to here right the way i want to think about it like this i'm going to constrain my box no way i'm going to put my box like this i'm going to create this div right here and give it a session of width in a way where this will go here this will go here from left to right and then this is still going to go left to right but it's actually going to wrap and go to the next line it's going to wrap to the next line rosa asks why did i not add slashes good question don't have to add a slash here honestly because this slash means root folder that's what this means roots folder and um the inside html is actually already in the wood folder so that's why we did not add that slash in here i mean i can actually remove this it doesn't matter too much honestly but right sometimes i do it because to make sure it is for it it's gone from the roof because let's remember access is inside the root folder guys okay okay as inside the the root folder so let's do that hands and inside there uh a few things one is going to be what let's give it a specific width i'm going to say width is going to be it's going to be 476 pixels okay and then after that we're going to give it a height of 430 pixels boom okay so now it's again it's top to bottom but now the specific height and width that we are constraining it to right then i'm going to do this i'm going to take this up and say display flex flex okay see now it's from left to right great no problem now of course it's still not wrapping though like why is this still not wrapping let me see here for a second look at this if you look at our hands you see you see how we have we have constrained the actual box so it's smaller but this rock is actually outside the box as you can see if you guys can see that right there see it's outside the box not necessarily flex direction left retro not necessarily all we need to do is say this flex wrap wrap boom see right there just like that so it wrapped the next line right away you know if you constrain it actually magic it's going to look amazing and mobile actually so you're wrong on that one because if you're looking for the mentor it's going to look amazing as you can see yeah it's about how you design it you can always make out everything it may look amazing if you design it properly that's it so so then we're going to do justify content center to make sure it's all centered here eh you see now it's all beautifully centered i love it look we're already already already in a much much better position okay next up i want to give some margin to push this to the top right here so what am i going to use anybody anybody know what i'm going to use well i'm going to use the following let's say flex wrap no not flex who knows what am i going to use do i use what do you guys think margin top that's right so margin dash dash top like this our desktop and i'm gonna say what let's give it a about 100 pixels boom done okay so now it's that now of course now we've got this one thing you guys want to see is you see how we have this triangle thing right here you see this triangle triangle zoom zoom see this triangle well it's actually just an image that's right it's actually an image that's correct okay it's actually an image so if you took a look at it let's take a look at our image if i took a little image it's going to be the strangle so assets triangle.png this is the whole image right here boom right there you see so this is an interesting way how would you put this image behind these three little buttons anybody can anybody think of how you would do that just really curious can anybody think of how you would do that but this absolute no um yes osada background image okay background image that's right the easiest way is going to do background something for example i'm going to say background image here i'm going to put it here on the top i'm going to say background image url okay i'm gonna say assets right here and this one i'm gonna say triangle if you guys have the um the actual this page i'm you i'm saying i'm doing this if you're actually using i'm saying this right here right i don't need to do that anymore because my assets are directly inside i'm in all i'm inside the root folder right now you know currently you know here i'll be split this up into folders of css that's we have to do the dot dot slash to go back to the root folder you see that's how we did that but anyways just wanna make sure you guys are clear with that okay as i struggle the png let's see if i save this what's going to happen here oh yeah that's pretty crazy huh that's right retro now repeat so let's do back on repeat back on repeat back and repeat no repeat i save that so now it's in the left section what do we now need to do to put it in the center guys anybody know no not absolute yeah that's right back up position center so now i'm going to say background dash position center a look at that much much much better right much better guys okay now you see how there's more space in here than there is here what do we do with that one what do we do here anybody know what do you guys think well a few things we just add some margins so for example i'm going to go now to the um the nssg model you see how there's scissors i'm going to say okay so dot scissors that's the one the right-hand side i'm going to give it a margin left margin left of what margin left of 20 pixels okay and then for the other one the dot what the dot uh what do you guys think the dot no what is it what is it again the dot paper the paper that's gonna be margin what anybody know margin what margin what for the paper what margin we want to add zoom right yes retro margin right also 20 pixels save that hey look at that guys how cool does that look huh how cool does that look how cool does that look so cool sweet that was pretty amazing just like that we have our pretty much score game that's pretty much it we're done hope you guys have a great day and i'll see you guys tomorrow i'm just kidding all right next one all right so next one is going to be well if you think about this okay i want to make it so that when i hover over this they have like this really small like feeling off you know of it's an actual button okay actual button what do you guys think we need to do to make it count like that what did you get something to do to make a cow like that yes hover but hover on what how do we set the hover you see right now we have all these different divs and it's a little bit weird honestly right well if i'm gonna do this check this out here's what how here's how i can do this and you have to be very careful to make sure it fully works so i'm gonna say the hands every single this oh that's not the one for this one i'm gonna give it a hand class because i want to target them all in the same way just like that okay uh the github link is here guys can somebody please paste the github link that'll be great you got you guys have it i think okay so if i do that and give it a hint that means if i go to my style of css i can say hands down hand yeah transform translate or fake that's right transform translate that hand okay i'm gonna say hey one i'm giving a cursor pointer okay because now you see how it is a pointer you see right there it's a point now and then what i'm going to do is on the hover of this hand so the hands on the hover of any hand again i think ahead i'm giving the same class because i want every single item to act the same that's i'm given the same class guys i wanted to act the same so that hand boom boom boom i'm gonna say transform and i'm gonna give it a translate it's called a translate so right here i'll show it to you guys right here it's called translate so transit 3d is going to basically translate the button this is gonna be x-axis this is y-axis so basically minus eight pixels is up eight pixels is what it's going to do so if i save this look at this if i hover hold on oh that hit hover i forgot about this one go point go point okay i'll do this one oh but of course it's jittery right we don't want that that's not a good user experience so what do we do we just add a small transition so we say transition 0.25 seconds done boom hey there we go and we my friends have created the transition that we need that is right that's right that's right that's right that's right beautiful that's all good that looks amazing now the question is of course what's next you've got the hands are complete all right there's no plan here doesn't everything look good next one is what we need to create the view for the what for the contest okay create the view for the contest now of course um a few things we can do i can actually go and quickly for the contest or we can work on this create the unclick click event just in case we can do some javascript how about that guys okay shall we do that let's maybe go and skip ahead a little bit and just pull into the javascript portion and then we can always do the contest here right after so let's just do that one that's right newton okay good so let's go ahead and do that so to create the javascript portion again um i'm actually going to follow along just the way i did it here with js so let's go ahead and do that let's create a new folder called js boom inside here i'm going to create a a javascript called index.js so i hear new file let's call index dot oh it's not creating it index.js guys beautiful all is good the well all right now okay let's think about this okay what do we want to do what do we want to do once we you know click on something what do we want to do what do you want to do what do you guys think what about zoom youtube chew that's right choose right you want to choose it right well um not in not a hr link and nature of link is about taking to the next page we're still on the same page we're not trying to any new page not necessarily joe we want to have we can add in event listener but i'm going to do a little bit differently i'm going to create a function called the pick user hand right so when i click on one of these buttons needs to call a function to actually pick for it right so to actually make some functionality happen so we can we can actually pick the next the computer can pick as well so you know so we can start playing this game right so what i'm gonna do is i'm gonna create a function i'm going to say const pick user hand and i'm going to pass in a hand here now you might be wondering what kind of a function is this not this is called the arrow function guys those are completely new it's called an arrow function and it's a new way to write functions inside es6 usually you would do this you'll say function function pick user hand right same thing guys this is the same thing as what this is right but no we're using error functions for now because that's the new the new kind of latest ingredients i guess you can say right something you said here link the js file that's right magic man that's good so we need to link the gs file as well so let's go to ins.html and everybody know how we link the html file or the script file so we'll say what script or you can even use a shorthand i call it script source right here see shorthand ammo variation enter enter and i'm going to say what js slash and is the gs done done that's right asada on click to the html element so now check this out right we have a function called pick user hand basically this is going to be cold whenever you pick something right let's go to our organization and what we can actually really do which is really really cool is on the click of of an image we can call a function on click look at this guys on click i'm going to call this function called pick user hand pick user hand just like this right here unclick pick user hand right unclick same thing with this one unclick pick user hand right also to a function same thing with this one unclick oh on click pick user hand as well right here and that's it my friends pick user hand so go ahead and save that that's right that's right that's right so pick the user hand but of course we need to tell this function what do we pick do we pick this this this we don't know otherwise otherwise just one key right so what we want to do is actually make it so we know exactly we picked so for example if i select something i'm going to say what for this one i'm going to say what do i pick here i'm going to put it into a quote here i'm going to get a parameter i'm going to say here what paper nice then i'm going to say what this is going to be what scissors sellers okay great then i'm going to say what then it's gonna be what rock rock that's right okay paper scissors and rock just like this so save that right and so let's take a look at how this actually works guys i'm going to console.log this hand parameter console.log hand boom console.log let's see what actually happens in here so okay save that right click inspect element so we know we're working with boom console guys got it now let's see if it actually happens okay wait that's that's actually that's actually the one that's already built this one oh it's not happening oh okay oh because inspect element i didn't set the wrong one let's do console oh look at that guys boom rock rock rock rock rock crack rock rock see see there says see so what this tells me is now i've connected my html to my javascript you see my goal is to pass the data that what i clicked on to what to the javascript portion that's the goal guys all the time okay that is a goal all right that is a goal beautiful okay sweet guys sweet sweet sweet sweet sweet sweet sweet so we've got this consola log hand okay awesome after that what are we going to do i'm going to do it we have picked the hand now and of course we're going to do we're going to do something with the hand what what should we do what's the next thing we should do guys anybody know what should happen inside this function guys what should happen i wanna i want you guys to think for a second here what should happen inside this function zoom youtube sam okay we can do that yes we can put into variable but technically this hand is already available um the choice is already saved it's this one so remember guys when we click on something let's look at what happens here i click on it what happens yeah display the hand on the next page that's right so we want to what one show the next page with the hand you picked you picked right but we also want to hide the current page yeah hide the current page right we want to hide this page right we've clicked on i'm going to hide this page and show the next page guys that's correct that's right so it's actually hi so let's actually hide this page how do we do that well we can use something called a document that creates selectors so for example i'm going to i'm going to create a variable called let hands let's go to document that what query selector query selector and i'm going to give that uh the class dot hands okay and on this one i'm going to say hands anybody know how do you hide an element anybody know so the hands by the way the hands how do i do this is because this whole element is has a class called hands by the way now how do i hide the element anybody know that's right display none that's correct so i'm gonna say hands dot what dot uh style dot display play is equal to none that's it right so it's gonna be display none everybody right so if i take this boom it's gone so you see we've gone the first first portion it's now gone but of course now we need to create the next we need to create the next portion now all right this is where it might get harder a little bit let's go into it the next portion i'm going to call it is with an inside it's going to call it a contest okay let's go i'm going to call it a contest the hands are all good that's not a problem here all right let's create another div after the hands and we'll call it the contest so div class contest and this is where we'll show you the results okay now of course if you look at my results alright what do we have you know what boxes do we need to create to actually showcase the results anybody i want you guys to think about what box are we going to create inside here anybody know okay anybody know thank you monolith what box we're going to create here guys three boxes okay one two and then what and then three that's correct right one two three one that showcases which what you picked one the showcase is the winning selection who went who lost and then another one for the computer choice so let's do that right now okay the first div div class is going to be the user hand so div class is equal to i'm going to say user hand okay close this one out and this user hand has a few things of course what do we have inside this username what do we have guys we have what the title and then we have the actual what anybody know the actual image so let's do that right now so we'll say here h1 that's gonna be what you picked okay you picked some image and let's for example and then let's wrap this image around the div so i'm gonna say div class is equal to hand image container boom and for now what i like to do guys is i know that we need to have the actual image that we should have but i actually like to have a placeholder image one key thing you can take away from this is whenever you're creating something and something changes all the time but you don't have the javascript yet just create placeholder code create placeholder images so for example i'm going to create a random image i'm going to add a random image here and say image image right source source is equal to let's just say this is assets and i'm going to say um paper why not doesn't matter too much right now if we look at it what do we have you picked right but if i close this out look at this if i hit this disappears now we have this right so now we're working with something awesome sweet our next one let's go and pick which one our next one is going to be the you win right which is which portion the center portion which is going to be the dish portion right here okay i'm going to call the referee portion so div class okay referee boom dunzo referee it's good for free and this one let's say day of class is equal to what is equal to decision now the one thing you need to create is this this decision right here so you know you lose you win going to say div class decision here like just like that and then i'll put an h1 tag inside here and aside i'm going to say you win for now again temp this is temporary data okay you went again placeholder data okay and of course we need to have a created button so i'm gonna say give class there's the new game button to new game your game like this new game that's right magic i'm going to set the edge of the image later on new game and this is going to have the text what text play again play again right here okay so save that okay hit this to remove this you win play again okay okay no no no no issue here nothing too crazy next one let's create the next one just gonna be the computer hand right so the contest that i was that's right i'm excited too so i'll say div class what should we call this one guys anybody know what should we call our next computer computer section if you call this user hand what should the computer one be what do you guys think what should the computer one be zoom huh okay actually kind of like a house hand or we can say computer hand oops not this one hold on we call computer hand yeah you call house hand too actually yeah okay inside that as well same thing we have on h1 this is what the house picked okay okay great okay and then of course and then of course after that one is going to be we're going to get another day for the image day of class if class is going to be a hand image container hand image container boom and inside there's gonna be an image again placeholder image guys okay placeholder image thank you sean appreciate that my friend all right i'm gonna say image oop i'm gonna say image and source is again placeholder image just for now i'm gonna say assets scissors why not okay also all placeholder images no need for that okay so if we pick something again this will again so now we can work with something like this okay so yeah you picked you win the house picked okay we've got this content that's gonna appear randomly later on okay let's just style this content for now let's style it right if i have this let's go to my style the css let's just touch down the actual full on what the actual following contest so one one first things first i'm going to give uh create a class i'm going to say um that contest because remember this is the the whole wrapper is called contest right here and for this dog contents contest will say well let's give it a width for now of 900 pixels okay 100 pixels okay why'd i do that because it's supposed to be a little bit bigger if you look for the mentor you can see that if i go ahead and just simply think is a little bit outside these boxes you see it's outside the boxes right here that's wow okay nice so with 100 pixels next up is we're going to say dot contest and the dog contest now of course guys what do you guys see on the contest section okay what do we need to do to make sure you know of course one it's a little bit weird right now because we don't have what there's one thing that we don't have right now it's top to bottom we need to make sure it goes from left to right what do we need to do anybody know why didn't you do anybody know well you display flex display flex hey that's right display flex sean that's correct right now here's an interesting one we display flex no problem whatsoever all right let's now maybe i want to change the images to be a little bit bigger so i'm going to say contest image i'm going to say this is what has a width of 275 pixels and a height of 275 pixels right here so now the images are a little bit bigger okay which i like a lot okay now what i want to do now okay is something very interesting how do i make sure that all these divs are in here they're equal width what do i do and we talked about the last time guys those who are new to those who you are what do we do we're talking about the last time not a line we're not going to going to align it no that's right grid may also work but it's actually going to be the following i'm going to give every single one of these now flex column i'm going to get every single one of these divs right here a flex one so what does this mean check this out if i do here dot contest i'm gonna give it a say div now what this means this right here means contact the divs right under so so that contest i'm i'm going to target just this div this div just and this dip right here because you see how there's diff inside this div if i do this without that then it will target all the divs this one and this one this one and this one to not target it i could do like this meaning hey target the the one that's the closest okay to the contest and now i'm gonna say flex one check this out you see what just happened all of a sudden we just changed that's right every single div is exactly the same width now it's weird the way it is right now but don't worry we'll figure this out okay flex one i'm going to add some margin to the contest i'm saying margin top top of what or 50 pixels just like this okay to add some space into it all right and then let's not target the h1 so i'm going to say that contest boom under h1 i'm going to say color white color white right so i want to change these titles right here to the color white i'm going to change the font size font size to be what to be 20 pixels nice so it's a little bit smaller okay i'm also given a margin top for this specific h1 let's say margin top here of 12 of 20 pixels as well and we'll give it a margin bottom of 50 pixels to push it away from these buttons right there let's see that's it much about 20 pixels beautiful and then i'm going to say this one and say text align center to put it in the center oh you see that's it right now i know it's not fully still centered but then don't worry about it we'll figure this out in a second here okay hopefully in a second the one thing i want to figure out now however is well uh the what what do you guys think a few things let's talk about the actual uh the you know this right here this right here so we have these and what you can see is you see this right here is centered so i just want to show you just how these work out so we have the contest and you can see how every single div is centered exactly not centered exactly but has the same width everything has the same width the left the center and the right why because flex one flex one says hey you know what this is saying hey the the importance of this div is the same as the importance of this div which is the same as the importance of this div that's what that means if one of these divs has the importance of flex 0.5 this step will be much smaller just let you guys know how that works out okay so we're given the same exact importance it's all about importance guys html likes importance likes to feel important that's right now let's look at these images you see hand image container what do you see right well it's you see that it's not standard actually correct how do we center this image inside this div who knows come on let me know guys ninten that's correct one fr one of our that's right grid may also work it's correct but zoom what do you guys think how do we center these image inside this div anybody know yeah that's right so display flags on this one right so if i do the simply display flex flex and i say align if i say justify content center boom see it just centered it just like that beautiful it's so easy not that's right that's it so to target this one inspect helmet you can see that what am i targeting here i'm targeting hand image container that's why i created the class because i want to be able to target this and this together all right so let's do that right now so we'll say dot contest dot hand um image container hopefully this works all right and i'm gonna say display flex beautiful and then justify content that's it that's it now it's centered perfectly okay next up let's work on this section right here right here this section right here this section right here okay one uh need to make this bigger two you need to center it in the center so it's all in here okay uh how do i do that well let's go down to downside that referee referee okay referee okay again how do we make sure guys you know there's the drill how do we center this you win and play again so let's see here you everybody know you guys know the drill the drill the drill the drill it's so simple the drill justify content and what and what justify content and what that's right we put that's correct you put into a column that's right sam so number one is put into a column so we'll say display flex right see and then i and i put into a column so i'm gonna say flex direction column it's a good catch on this one okay but man call remember just columns puts it from top to bottom but how do i center them sam or how do i send them uh le monde how do i center those that's right align items i'm going to say this one i'm gonna say align items center and just forgot you guys can see i'm reusing the same the concepts are the same guys the concepts are the same there's so much you can do with just a few if you know the most some of the most basic concepts that are really important in coding and look at this you win and this is so much better all right so much better okay now let's go ahead and change this you win so i'm going to say here dot referee h1 i'm going to give a font size font size of 45 pixels beautiful that's correct asif and brian that's right okay okay and then after that uh well at this point i want to now focus on the actual new game button so let's do this one now okay so we got this play again button let's focus on this new game button right this new game button is just this it has new game okay so let's do like this we'll say that new game that new game like this beautiful all right first things first we need to give it a background color so let's say background color of what white that's it white right now it starts to white now one cool thing you can understand in order for us to create this into an actual button yes we can give it a width we can give the height one cool thing though here's what we can do and you can remember this for your whole life okay it's a really cool trick that i use all the time a button is not really about width and height it's not really about that a button is about a piece of text and then you telling that piece of text to have a specific padding and push the button out that's all you are doing my friends so if you want to create a button that surrounds a piece of text it's like you are taking for example you know let's just say this this little airpods i have here and you're right you're and you're saying hey you know what you know put space here i want you to put space here put space here put space here put space here and so now it becomes a much bigger square or circle whatever it might be okay so back on white after that i'm gonna say padding i'm gonna say give it a padding now the first this is a shortcut for you your first one could be top and bottom so i'm gonna give it 12 pixels this stands for top and bottom both top and bottom okay the second number stands for 24 pixels that says for left and right guys so this stands for top and bottom left and right i can individually say top bottom left right i don't want to do that okay that's not for me so look you see it just simply expanded guys that's it it's simply just expand it okay next up let's go give it a border radius and that's going to be what six pixels okay six pixels nice job save that okay look at that starting liquid button let's give the cursor pointer nice let's go ahead and give it a transition transition off actually forget tradition for now do not want that um let's go and change the color for it here's the color guys this is an interesting color as the color looks a little like this boom this is the color i put a few guys in the zoom chat here [Music] boom that's the color guys all right everybody that is the color right here so the color is like this oh there see it's starting to look a lot a lot a lot better now let's make an interaction button so it's going to create a new game that hover so we'll do a new game hover i'll put create a hover section okay um after that we're gonna number one let's change up the background a little bit so background color here's sometimes what i like to do for example i like to like alica you know how it gives me some options like bisque beige let's just call it a bisque right now because if i hover this is like a very small difference you see very small difference and then i'm gonna say transform i'm going to actually transform it up so when i click when i hover over it it feels like there's a button there right there transform translate 3d minus two pixels boom boom now right there see but of course because we don't want to have it to be jittery what do we need to to do to make sure it's not that jittery guys what do we do anybody know what do we do what do you guys think what do you make sure that it's not it's not jet jittery so it's smooth what do you guys think on zoom le man yeah that's right transition oh sada that's right so i'm going to say transition here transition and that will be what transition on all zero point what 15 seconds see that hey look at that so much better of course it does nothing for now but this is not where javascript comes in guys so we have the you know play again a beautiful my friends beautiful so look at that so guys look at this it's pretty much there if i refresh the whole thing of course this is here but don't worry about that if i click on it see so okay now let's think about like this now this is where the jealousy comes in we've got these two pages they are there no problem we need to think about how do we interact with it and show the right stuff well for one when we first start out okay this shows right now we have a where this shows let me go ahead and remove this this show is showing and this is showing which one do we actually need to show which only which one do we need to show which one the top one or the bottom one the top one in the show or on the bottom one now tell me which one way to hide the bottom one or the top one which i'm going to hide now the the which one the bottom one that's correct the bottom one so to hide the bottom one right if we go to stylus css it's the contest right you see use the display flex well let's change it to display none for now for now it's not for now it's unnecessary for now it's not necessary but you see it's just hidden no problem that's right now when we go back to instags check this out we're hiding the hands but we need to show the contest so what can we do with that now we need to hide this portion needs to hide which it is using this you see i'm going to show this portion so what do we do same thing let what let contest is equal to document dot query selector beautiful i will say dot contest dot contest right so we're going to grab the actual div contest and anybody know for those of you who are on zoom i know on youtube you might know some of you guys might know dorsey and zoom how do we change what do we do with the contest how do we show the contest now guys what do you guys think lamont craig what do you guys think sam how do we show the contest if here we have display none to hide it what can we use to show it necessary oh flex that's right so instead of displaying none i say display show well yeah it's kind of like show yeah so i say contest style dot display it will take you back to flex because remember before it was flex so now check this out guys ready them boom yes of that we hit one we showed another one that's it and so we just keep doing that back and forth back and forth back and forth back and forth back and forth and back and forth okay let's refresh it again see right there boom see right there refresh again beautiful so we got that portion okay awesome now of course when we click on something right we need this to actually show the correct you know well what you picked what you picked so what do we do currently we have a placeholder paper the png well how do we change it well again document the query selector guys here let's create a comment here um i'm going to say set the user pick i'm going to say the following let's say document dot get element now i need to actually grab this image it's hard for me to grab this image and there's no id so let me see command z i'm going to give this image an id and i will call it user pick image user pick image save it user pick image right here guys okay yes i just say gala element dot get element by id i'm going to say what is it user pick image and i will say what dot source is equal to what this is the interesting portion is equal to what is equal to what this might something be really complicated for you right remember we have this we know what we picked here is equal to what we're changing the source to the source that needs to actually be correct so if i clicked on this the hand the source needs to be paper or if i clicked on scissors the source needs to be scissors if i clicked on rock the source needs to be rock right there guys well not necessarily him because if i do this that's not going to do anything for me right so if i click on that it's just it's a weird image right so i'm changing the source guys remember see if i right click on this one i'm changing the source you see this one just became hand so this is what we need to think about this for a little bit here well how about this i'm going to say like this i'm going to say if if hand is equal to let's just say a rock i'm gonna take this right dot source and i'm gonna give the source of what or let's just say the source of what that's right oh good good that's a good one i saw that actually it's a good really good one that's a really good way of doing it you can say well it's right here it's assets assets slash what rock dot png right so let's try that i'll click rock see now it's rock guys you see now it's rock but of course i want to do the same thing for you know the scissors and everything else i can actually make this a little bit shorter for you check this out i'm going to create a dictionary object some of you might know might know that it is some you might not a dictionary object is a key value pairing it's like when you go to a dictionary and you open up the dictionary right inside the dictionary you have the word and then the definition for that word i'm going to have the same thing here i'm going to have a word and for that word instead of having definition i'm going to have the url to that specific word so all right let's do this i'm going to say const and options now this is something that's a little more advanced guys options i'm going to create a dictionary object okay again dictionary it's literally like a dictionary with a key value appear the key is the left hand side the value is the right hand side so for example i'm going to say a rock here this is my key this is my key the right hand side is going to be the url for that key so the url is going to be assets slash rock.png boom okay what is the next key that's right it's a data structure that's correct what is the next key this is why algorithms and the other searches are so important guys next key is what paper right paper so i'm going to say dash assets dash paper dot png boom dunzo and the last one somebody tell me is going to be which one somebody tell me in the zoom chat scissors that's correct scissors bomber that's correct come on let's write scissors so scissors again dictionary is an important data structure that you guys absolutely have to learn it's one of the most used ones that i personally use i've always used at work and it's something that yeah something we teach very much in the boot camp assets slash i'm gonna say what scissors dot png got it guys scissors dot png right there okay save that okay cool that looks all good no problem now how do we use this actually right it's just there but we don't use it we'll check this out i don't need this if anymore that's right it is kind of like json you're right it is kind of like json you're correcting that one that's why json can really be easily transformed into an object so instead of having source like this this out i'm going to use the hand options i'm going to say hand options i'm going to get the value using the key of the hand remember when i click on something this hand can either be a rock a paper or scissors right either one of these three values okay okay so whatever depending what it is if it's hand let's just say for this if it's a uh a rock if this value is rock it will go to hand options and it will find rock and give me this value that is what this does i'm accessing the actual object it's not 0 1 2 it's actually a key value pair david an array has indexes of 0 1 2. this is key values it works based on keys it's like when you take a key right you unlock your key with your uh to your door the key is the actual word in this case the hand is the key the value is what you unlock after you put the key in okay guys just so you guys understand the hand is the key this is the value you put this key in into the hand options let's just say it's rock it will give you the value it's kind of that's right bummer it's kind of like case statements you're writing this one it's a mapping that's right you call the value hassan by the key so here's the cool part because of this shortcut not only can i reuse this everywhere in my application but the shortcut allows me to just have one line to do everything that i need to do that's it so if i for example select this hey look at that see it picked it if i select this it picked it again if i select this it picked it right that's the cool part about this it just makes it so much easier for us whichever one you pick is gonna be the one that's it all right cool so we got that portion that's the pick right that was taken care of that's right it is it's very impressive it's very interesting for us just if you use data structure like this yeah it's javascript it's pretty cool and you guys haven't seen anything yet so now look we picked ours okay we picked our hand but how about let's use let's have the computer pick the hand um not asada sometimes but the thing is osada is like sada says hey can't you just use concentrate the path and go to the location you could in real life however the path might change the path might be different the path might look completely crazy so sometimes you cannot use the name so the you cannot sometimes it's better to have a mapping like this because you know later on you know what if i change this path to have to be different name you know and so if i use this dictionary i can only change it once okay i have to change it once and then everywhere else is still working okay oh you missed a lot retro you missed a lot don't go to the bathroom next time i'm just kidding go to the bathroom you have to all right so we've picked our hand now the next porsche is going to be well let's have the computer pick a hand so i'm going to create a function called pick computer hand it's actually not the heart pick computer computer hand okay pick computer hand that's right pick computer hand okay so let's go ahead and have the computer pick some kind of a hand as well okay so um let's do that well okay what are the options that the computer has what are the ops the computer has has rock paper scissors so let's create those options i'm going to say let hands is equal to what equal to either this i'm going to use an array this time that's right sam i'm going to use an array why you'll see why and there is a list of items so i'm going to say here rock then paper paper then scissors right so the computer can choose from any of these ones right the beer is going to choose from it that's right we're going to use and so we're going to use now is we're going to use a math.random because check this out right for example if i want to console log let's just say here i want to con i want to let's just say i want the computer to pick you know paper all i have to do is say this hands at the position of one this is position zero this is an address right well what this is is an address just like how like you have an address to your house everybody right an array has an address to its elements this is address zero this is address one this is address two that's right okay so for example let's go ahead and check this out right i'm gonna i'm going to call this function right now pick computer hand some say console.log pick computer hand no not because all the log i'm not actually called a function sorry take computer hand boom let's call the function okay let's call this function okay and i'm going to call this function and so now if i go right if i click on something like this let me see here inspect element on this one console you see i had the computer pick paper just the way i wanted to hands one is paper that's what i had to pick paper that's it guys you see so now now that we know that now that we know that okay all we can do is the following let me see here okay now that we know that let me see here for a second what i can do is kind of like this i can go ahead and you pick a random number what if i used math.random to pick a random number and have it pick rock paper scissors based on that okay so i'm going to say let cp hand that's the one it's going to pick is equal to hands remember we can say zero or one or two well what we can do instead of j of zero one and two let's have the computer pick a math.random what is math.random well it's kinda like this i'm gonna remove this i'm gonna say math.random just so you guys know it as well with me you see math.right now returns a number between zero and one so it can be 0.5 0.3 0.4 whatever well but you can make it any number so for example if i say math.random okay i'm actually going to multiply it by the length of these options because for example if if the if math.random says 0.5 0.5 times 3 is what what is it 1.5 right 1.5 correct you see so depending on what on what it is so for example right let's say we're gonna multiply this by three let's say math.random picked 0.9 okay 0.9 0.9 0.9 times 3 what is 0.9 times 3 is how much right there see 2.7 just like that okay 2.7 all right so that's what i'm going to do here now based on that what we can do is we can round the number correctly so right 2.7 now is 2.7 closer to 3 or 2.7 closer to 2. is 2.7 close to three or two what do you guys think two three that's right so we need to some some find a way to round this right so for example let's go ahead and and round math math round what is the best run number that's right see so i can do math.round to round to the nearest number right so if i pass it a for example 5.95 it will say six if i pass 5.5 i'll say six but if i pass this 5.05 it will say five so what we're gonna do we'll say math.round that's right math.round actually no we cannot do that actually we can do that because no that that should be um let's see 0.12 3 3 3 0 1 2. we can't really okay never mind so we can't really do math.round we have to do math.floor why let me show you why math.floor is gonna take it to the bottom so let me show you why because if we do math.round we can we can it will give us a three number three but the problem with that is this is zero this is one this is two remember computer goes from zero to two guys right go from zero to two right so we can't really do three we have to always go to the bottom one and math.floor what that does is the following math.floor math.floor i want to show you floor returns the largest integer less than or equal to a given number so for example if i do 5.95 it will always tell me 5. 5.05 is 5. so always say to the bottom number the closest whole number right to the bottom that's what floor does okay guys and so because of that if i if i get 2.73 0.73 what am i gonna get what index am i going to use two or three anybody know two or three that's right obama two right so this will be scissors okay if let's say somehow i got 1.73 1.5 what am i gonna what index am i going to use one what if i got 0.95 what am i going to use zero that's correct you see that's right so that's how that's being picked guys okay and so all we did here is look math out random pick a random number multiply it by three and use mata floor to just you know i call it florida that's what i like to call i call florid right so now we've picked our hand guys and once we've picked our hand what can we do now well we've picked our hand let's actually change our hand on the right hand side right here whatever is inside here and just how i did it here i'm gonna copy this portion right here you see boom document dot get l by d user pick image source handout but of course we can't do user pick image no we cannot do that we can use what we need to create a new id for this one so this i'm going to say what computer pick image to change this was this one so it's like computer computer pick image let's copy this one save that computer pick image go to inside.js instead of this one i'm going to grab the one that's computer pick image and i'm going to change the source based on the options but not based on the hand but based on what anybody know not based on the hammer based on what this is b that's right somebody asked the question why do we multiply by 3 because math.random gives us a value between 0 and 1. and so we need to increase that ability so that if it's 0.5 it's actually 0.5 times 3 which is 1.5 you see what i mean so otherwise you know it's just going to be between 0 and 1 and so we're not gonna be able to get like scissors we need to be able to get to bigger numbers right that's always how we use it that's right cp hand and let me show you how this looks like guys let's let's take a look at here for example i'm gonna say console.log log log cp hand cp hand comma cp hand boom oops that's right magic man that's right to save that let's go back to our rocket procedures game okay now if i right click right click inspect them on this one let's click on it boom you see it picked scissors as well you see that's what i picked if i try again epic now rock so that's what it's doing it's picking specific ones right based on the random number based on a random number guys that's a really cool part so look we've got that now let's go ahead and actually return ours our uh what's it called our suggestion what do we pick so here i'm going to click return cp hand return cp hand now i'm going to attorney why because i'm actually going to capture here i'm going to say let cp hand here is equal to pick up your hand so basically i have the user hand which is here right i called the user hand and then i have the cp hand the computer hand right okay we've got that we've got that amazing but here's my question what now what do we do now well now we decide who's the winner and who's the loser cause let me say you you look like ill must thank you i do look like elon musk a lot of people have said that right so now we need to decide let's let's now go ahead and create the referee function say const referee const uh referee is equal to two two two two beautiful right so we're gonna pass in two parameters what parameters are we going to pass and anybody know what parameters are we going to pass in there's two ones and there are three i need to have the referee hand and then which hand do we need to have the which one the computer hand and the which one guys what do you guys think and the user hand that's right so i'm gonna say user hand here comma cp hand now this is just now a bunch of if and else statements guys just be patient now with me it's a bunch of if and l statement so for example guys okay if i know it's a little bit crazy if user hand is equal to right paper paper right and ncp hand is equal to what scissors scissors who wins right then who's the winner guys am i the winner or no am i the winner or no who's the winner the computer is doing right and technically i lose so we need to tell me that i lose so i'm going to create a function called set decision const set decision basically to tell me that i lost is equal to decision right and i'm going to console log my decision for now right so tell me i lost guys okay all right so now what is my decision am i going to say set decision here what am i going to say guys anybody know i'm going to say what you lose i'm a loser that's right i'm a loser okay that means i get no points i lose okay but what if else if what if my user hand my user hand is equal to for example paper and the cp hand and just so you guys know where this means and so both of these need to be true and the cp hand is equal to rock then who's the winner do i win or do i lose switch statement is a certain could work but the thing is because there's switch timing actually would not work sorry in this one switch that would not work that's why i win i'm the winner so now i say what sad decision you win you win just like this right now i win but i also need to increase the score so let's go ahead and create another function called set score const what set score is equal to here's the new score that we have right and consol log the score right let's set the score right so i can increase on my current score console.log [Music] that's right consider log score okay now how do i set the score if i'm going to set set score how am i going to set the score i want you guys to tell me i want you guys to give me your ideas what did you guys tell give me your ideas there's a few ways to do this okay a few ways to do this that's right score plus one well let's go and create actually a variable called let's score the one that's gonna keep track and it's gonna initiate from zero let's score initially it's zero and so when we do set score i'm going to say score plus one i'm going to increase that score below one and so now we have a new score that we can use everybody see that that's right ashika increase the count that's correct all right increase the count all right so we got that portion that's all good now guys i love it but what i'm going to do is i'm going to copy and paste i have all these if not statements for you here okay i'm going to copy and paste all of these ones for you right here if user hand cp hand right you guys can kind of and look at these ones these are all also inside the github guys go ahead and check it out by uh below okay check it out below those of you who are on uh zoom i'm gonna copy this for you as well and just paste it in for you come and see you guys can just copy and paste it okay because there's no point of me just writing all this out it's all about a bunch of decisions and you can see there's only a few ways that i win if i have the scissors and the sap hand i score plus one and if i have that rock and score plus one so it's kind of then otherwise it's a tie this really depends on what happens all right so guys what do we have here there's a three and a few ways only to win here just won't let you guys know that okay but at that point you have a referee a referee will set the score and will tell us what's who's the winner who's not so let's go ahead and actually do this okay hopefully you guys copy and paste it just copy and paste it guys that's it just copy this portion that's it you might not even need this else if you just then you can do you don't need to add this alphas if else if as well just remove the else that portion just to make it easier for you those you are on youtube yeah i can do it for you too here hopefully i'm not sure if i can actually no i cannot sorry i cannot put it in youtube guys sorry i have a limit of how many i have a limit to how many uh how many characters i can put into the comments so that i can't do it unfortunately but that's okay okay those are you on zoom did you guys get it give me can i give me can you give me a thumbs up you guys got that yes david got it thank you sweet beautiful all right if you're gonna go spin for draws that's right so now okay we've got that portion of course you have a decision so now the interesting is what happens when we set the decision to you win or you lose okay you win or you lose okay decision is you when you lose so if i do this okay great let me see if i inspect what do we say here console log refresh it doesn't do anything why do you think it's not doing anything because why because we're not actually calling this function guys we need to call this function so remember we have the referee we get rcp hand now we call the referee function and we say here the following we say referee okay we first we pass in our hand our option and then we pass in the computer option cp hand boom save that beautiful inspect element on this one and console and now i will say this you lose you see the house big you lose because why i picked scissors that's in the freshest one more time boom it's a tie right there that's it my friends that my friends is it okay then friends is it beautiful let me go on now go back the one thing we do see the score is not currently or setting correctly let me see here uh because i need to win actually okay great so we got that portion let's go ahead and do this for decision we need to change this to you win or you lose depending on the decision it is okay okay here you guys want the github yeah here's the github guys for those of you who are on youtube this is the full code guys those are on youtube here's the full code okay you guys can use it all right let's set the decision remember decision is where is that where is inside here to change that all i have to do is do document that what the query selector right class like this dot decision and i'm going to say dot what the inner actually that decision h1 right the inner text text is equal to what is equal to decision that's right that's it so now for example you see i'm going to replace the text with a decision that i passed in either you win or you lose that's what's going on and so let's try that right now save it you lose makes sense let's refresh it one more time okay it's a tie beautiful one more time a it's a oh damn again holy moly come on oh i want to win come on give me winning one and i win right just like that okay beautiful so that's already working guys we're almost done so close guys so so so so close next one same thing with the score remember guys we need to set the new score same thing if you go to any html the score is where the score is here and we can change that so we do dot score so document the query selector selector we say dot score right and we need to modify the text within the h1 so that score i'm going to say h1 as well correct and i will say dot inner text is equal to what score that's it so now ready let me do this you lose okay so there's no score again so refresh this two you lose oh dang i keep losing every time boom you oh come on give me something you win and look the score increased by one just like that guys just like that it's already working guys at this point everything is almost done there's one last thing finished last thing that we need to do which is what this play again button we need to make sure that we can play again after i added the above i got them wait your file couldn't be accessed may have been moved edited or deleted um i don't think so i want to make sure you have the whole function my friend so here sam copy this whole function the referee function and just replace yours here right here there's the whole referee function copy and paste it okay that's it my friend okay cool so save that beautiful now one last thing is play again button so again with this one we're to create a function called play again so let me do that right now it's going to be called restart game so let's go and create a function const restart almost done guys almost done beautiful nice okay i'm liking this okay and then what do we need to do to restart the game remember to initialize the game when we do this we hide this box this box and we show this new box but just to go back to the page what do we do now what do we do guys who knows we do what we that's right hide and flex it hide and flex it i didn't flex this now we reverse the psychology now now we say the following we go back to our see this contest right here where we display none i'm actually going to copy these ones right here coming from pick user hand paste it into here and i'm going to reverse them so now the hand is actually what display what flex versus the contest which is this one is display what none so look okay but of course it's not going to work because we need to uh we need to actually call this function so let's call this on the click of the play game function let's do this on click on click i'm called restart uh game right there save beautiful all right we restart the game all right my friends let's try this out okay first out boom all right you win score added play again hey another one you win but hold on score was not added hold on it's a tie you lose you lose you win why is this score not added it just does not keep edit that's interesting let's score the inner one does not increase more than one for some reason why is that the case i'm really curious the restart game my friends was put inside here you see this day of class new game i put an on click on this restart game so it's looking like it's working but hold on it's a tie okay you win plus one you want but it's not increasing anymore plus one why is that the case hmm that's interesting why is that the case they're so close i'm so close score zero oh i know because i need to actually set the score so i said to say the new score is equal to score remember we're adding one here but we're not actually saving that the new score right i'm adding one as a parameter which is being added here but i'm not replacing this score yeah that's right that's right that's correct correct yeah be careful using cons you cannot use cons to add you cannot change yeah and that's it so now if i say this one more time let's try one one last time guys one last time boom you win okay score one boom you lose you lose you hey score two again score three alright guys how about this question okay let's actually play this game guys you guys tell me what to pick and we'll see if we win or not you guys tell me in the zoom and in this in the youtube chat what do i pick and i will pick that specific thing let's say rock paper bull hand hold on i mean not you need to give me rock paper scissors rock paper scissors oh that's the hand okay so i see hand hand okay okay if you vote for hand say hand put a zoom chat hand if you both hand i see a lot of hands okay i see a lot of hands okay let's see you guys all right all right let's see let's see let's see it i'm gonna say in that case and ready and what is it oh i win let's go beautiful so it is a hand let's play again one last time what do you guys think i see now rock okay if you if you want me to put rocks a rock hey let's do rock now rock and oh damn you guys are good okay okay okay okay one last time one last time what do you guys remember to pick one last time what do you guys think i saw right i picked paper paper again craig okay paper again okay let's do paper now holy moly you guys are good okay okay okay okay okay can we keep the streak going okay what's next guys tell me tell me what's next what do you guys think what do you guys want me to pick hand again see le mans says scissors okay le mans says scissors okay let's see who okay scissors okay let's try it okay guys ready ready scissors okay ready oh you lose lamont come on i'm kidding so there you go guys but we're not done yet i want to actually put this live for all of us to use so let's go and do this guys remember the drill how do we make this live for you guys to use let's go to netlify number five not netflix not netflix not the fight netify not legitimately fire okay i should have picked rock craig says all right now let's fight all right okay you guys on the drill now at this point let's go ahead and open this up i'm going to log in with my notify account which i already have okay you can sign in with github whatever you got you you got to do okay i'm going to go to sites and all you have to do is you know you see how this scrolls to the bottom you just have to upload it so let's go and go to projects rock paper scissors game i'm going to take this whole folder guys take this whole folder and just move it down like this just move it down like this and boom a beautiful move it down let's see is it published now i think it's published so if i look at it now let's see if it's published open it up it's published right there you i'll give you guys the link all right i'm gonna give you guys beautiful i'm giving you guys the link that's it my friends my friends this is done so for those of you who are on youtube thank you very much what i would say to you now at this point i'll tell you something all good sam just just continue doing this this will be on youtube maybe you're going to rewatch some portions sam okay all right so that's it guys look we've done the rock paper scissors game it's a clean clean application okay um nothing too crazy but the logic is really interesting here for example we learned about objects we learned about functions you know where to call the functions of course we learned about how to manipulate the dom right when you put the dom using the document the query selector we learned about how to hide one thing and then show another thing correct that's one of the things that we did for sure right so a few a lot of things were showcased in here awesome sweet so this point guys that's pretty much it for me your homework if you're in the challenge your homework is gonna be the following of course let me show you the homework where's my homework where's my homework let me show you where's my homework where's my homework swag here are my slides okay oh come on i'll come on here in my slides i hear the following so that's it guys your homework's pretty simple now at this point and i'm gonna create this for you all right like i said i would say for you is you know most importantly guys you don't have to modify anything crazy for those of you who are in the challenge don't have to modify anything crazy i would say for you is honestly just i mean you can make a few things my suggestion of course you can change the background the font the colors i would say add some animation so for example maybe if you win if you win if you win if you win at a jumping animation for the winner yeah that's right right so maybe something like this maybe if you win win maybe add a sound you know something like that right and you can use your uh imagination for this okay one two complete most important is complete this application guys once you complete make it into a homework post right this will be homework post paste it in there and of course after that submit it into the april and that's it my friends so guys that's pretty much it those are you on zoom you feel free to stay those of you on youtube guys thank you so much for watching this has been an amazing application we finished the rock paper scissors game we used javascript html css all the foundations you need we learned what we learned about objects we learned about functions we learned about how to manipulate the dom right and of course we created a game using javascript so that's it hope you guys enjoy smash that like button okay that'd be much appreciated subscribe for more videos like this of course we have we have more videos coming up tomorrow so come back tomorrow at 11 am pst where we are building a sas product a sas product so come back tomorrow and we'll put that with you as well okay other than that i hope you guys have an amazing day and i'll see you wait wait wait wait in the next video [Music] those are you on zoom feel free to stick around [Music]

Channel: Clever Programmer

Views: 14,933

Rating: 4.9305739 out of 5

Keywords:

Id: C6jSg4VPNZE

Length: 137min 7sec (8227 seconds)

Published: Fri Aug 20 2021