Aren’t you ready? Rock Paper Scissors shoot,Dylan. I probably did. I probably did. In this video, we are going to build this amazing RockPaper Scissors game. Okay, so it’s probably the sexiest Rock, paper scissors game you’veever seen in your entire life. Right? Okay, so without further ado, let’s get started. Okay,so let’s, first thing I’m going to do is go to my desktop and create a folder called Rock, paper,scissors. Okay. Okay, and let’s go inside that. And we’ll do touch index dot HTML styles dotCSS, and app dot j s. Okay. And then we’ll open this guy and Adam. All right, so it’s opened. It’staken a while these days. I don’t know why. Okay, cool. So let’s close these guys down first,and then let’s open up index dot HTML, CSS, okay. All right. So let’s start coding. So thefirst thing we have is, first thing we have is the header.Right? So before that, let’s getthe skeleton out of the way. Rock. Paper, let’s call it Rock, paper, scissors,game or something. Okay. All right, and let’s open this guy up. And let’s type in somegibberish here. Okay. And open browser. Okay, so this is this is the working version. And this isthe non working version. Okay, so as you can see, our HTML file is working. So let’s get rid ofthat. Okay. So the first thing we have is the header. So let’s get that in a header tag, not adiv tag. So far, we’ve done pretty much everything in a div tag, and that’s okay. But we want to bemore semantic. Okay, so there’s a header. It’s a header, so we want to put it in the header tag.If it’s a footer, we want to put it in footer tag, okay.And then later on, we’ll go over sectiontwo, but in this video, we’ll just for those, we’ll just do depth. Okay, so header, and thenthis one has an h1 Rock, paper, scissors. Okay. Okay, let’s go here. Refresh. Okay. That’s howit looks hideous. Right. So we’ll add the CSS later. Okay, so that’s the header. And thenwe have a div for choices. No, no, no, we have the scoreboard, diff. So we’ll give it a classof scoreboard. Okay. And then in our scoreboard, we have two badges, right user and computer,it’s on the edges. But we’ll do that with CSS later. But we have two badges, user and computerand then we have the scores themselves. Zero is your starting numbers stewards are okay. So forthat we’ll do div of let’s do, let’s see, this one is going to be user. So we’ll say user. Andfor this, we’ll give it a badge, class of badge, we’ll copy this paste, and the next one is goingto be computer comp, okay? Now, classes are cool, because we can share, you know, the same cellsacross those two divs, right with the same class called badge.But we also want some IDs because wewant to uniquely position the user and comp later, right? Because the users on the left hand, andthen kompass on the right hand side. So what we want to do is say ID of let’s say we give it aID of user label. And then for this one, we’ll give it an ID of comp, computer label.Okay? Allright. So once we have this, let’s go back and see how it looks. All right. Nothing special. Okay,so let’s go and now actually put the scores. Okay, so now what we do is add a span tag, not a divtag, because they’re in the same line spans are in line element. divs are block level elements. Okay?So, span will do zero, right? It starts from zero. Later, we’ll change it. But for now, we’ll startwith zero.And we want to give the first span an ID of user score, because the left hand side isgoing to be user right? And then we want to copy this and then paste it. Okay. So copy, paste, andwe want a colon in the middle, and then we’ll call this computer score. Okay, so now refresh. Okay,that’s how it looks so far. Okay. All right. Let’s keep moving. Now, we also need the message, right?So now we need the paper covers rock message. So for that, we’ll create a div here, and we’ll giveit a class of I don’t know result, okay? And then we’ll say paragraph and we’ll say paper. Well,paper covers. I can’t type anymore. Rock you went, Okay, cool. And now let’s go back, refresh that.That’s how it looks. Okay. Now, we want to add the choices, right, these images.Okay, so forthat we’ll do div of class of choices. And then we’ll have inner divs. Okay, well, we’ll havethose images wrapped inside each depth, okay, so we’ll do div. And we’ll say choice becauseit’s a bunch of choices. So we’ll have a choice for each one of them. And then we’ll do image andright Now I don’t have images in my directory. As you can see, I don’t have images, right. So whatI’ll do is I’ll pull it from my working directory, okay.So from this folder and put it in thisfolder, copy it, basically. So what I’ll do is open hyper. Okay, and let’s do this. Cool. So nowI have the images here. If you see here, there it is, right? These are all images. Don’t worry aboutthe DS store. That’s nothing. So I just copied it and paste it in here. Okay. So now what I can dois go here, image source and I can say images, slash. It’s called rock. I think rock, PNG. Thefirst one is rock, right? Okay. And then I’ll copy this three times. One time, two time, okay. Andthen this one is going to be okay. Let me first refresh it. Okay. That’s how it looks so far.And now I’ll change this to paper.Refresh. Okay, that that’s how it looks. And then for the thirdone, we’ll do scissors. Cool. So now we have the images. And I think that’s it for them. Oh, wealso want to add some IDs to each of these dips, okay, because later on, we want to be able toidentify each Rock paper scissors, okay. So what we do is, we just give it an ID of our, okay,we don’t need to say rock, and then Id of P, and then Id of S. Alright, so that’s it for thechoices. So we’ll let’s go down. Hold on. Okay, cool. All right.Now, what do we have left? Wehave this message left, right, make your move. So let’s do that. Okay, so let’s P, and all youdo is let’s give it an ID of action message. Okay, action message. Sounds weird. And then all youdo is make your move. Okay? Alright, so now let’s go here, refresh. That’s how it looks like. Okay,cool. So now let’s actually add the styles. Before I add any styles, I want to make sure I link it.So link, and we’ll go here and say, styles dot CSS, okay. And now when I write something inhere, let’s do body background to like red or something.Okay? Boom. Okay, so it works. Okay, solet’s get rid of it. Again. As always, let’s start off with the universal selector. Get rid of thedefault margin and padding. So before I do that, let’s refresh here. Oh, let’s get rid of it. Okay,refresh. What? Okay, margin zero padding zero. And then we want box sizing to border box. Okay. Andrefresh that right? margins are gone. Okay. So the first thing we have to do is we have to style thisheader. So for that, we will say, so let’s go to index we have header, and we’ll just say, header.Okay, header background to be white, right? It’s white. And what is it? And for the text color,we’ll do header h1, header, h1. Color is? What does that color. Let’s get that color. Hold onjust a second.Let me open up my color picking tool. Alright. And the color is. Let’s see.Alright, that’s the color. Okay. So let’s go here, refresh. Okay, that’s how it looks like rightnow. Nothing special. And we also want to text align this to center, and then font family to ASAPand then backup is sensor. Okay, so let’s see if that works. Alright, so that looks good. And nowwe also want some margins and padding.So we’ll do margin or padding of 20 pixels on the parent.So there should be some breathing room. Okay, cool. And now, as you can see here, this,the entire body’s background is this dark, bluish color, right. So for that, we’ll just goright above this, and we’ll say body background color to that color. So again, let’s grab thatcolor. Boom, boom, okay. Okay, and actually, this should be a color for this one, too.Okay,cool. Refresh. And there it is. Right. So now it’s looking a lot similar. Okay, cool. And now wealso want to let’s see, what do we want to do? Oh, sorry about that. We have not imported the ASAP.Font yet, right. So you guys probably know how to do it. Go to fonts.google.com fonts.google.comThen go to ASAP.Right, go to ASAP. Click this plus button, and then go come down here, clickon this go to Customize, you want to get the, you know, bold and medium. You don’t need tobut you know, it’s better if you have options, right? So grab that. Go here to CSS go up at thetop, paste it and boom, right? It’s done. Now, if we go back here, right, right now it looks likethis. I’m gonna refresh and there it is. Right? It’s a little different. Okay? Once we have thisnow we have to style the scoreboard, right? Okay, so what I’ll do is let’s go to scoreboard, okay,because we gave it a class of scoreboard right? If you guys remember, we gave this div a class ofscoreboard.So we’ll do a scoreboard I’ll first give it a border of three pixels solid white.Okay, let’s see how it looks. Okay, that’s how it looks right now. It’s 100% width, okay? Wedon’t want it to be 100% width, we want it to be less than that. So 200 pixels or something.Okay, refresh. Okay, that looks a lot better. But now this one’s too close to the header, right?So we want some space at the top and bottom. So for that, we’ll give it a margin. Whoa, marginof, let’s say 20 pixels at the top and bottom and then center it. Okay. So we’ll do enter. And thereit is, right? It’s centered. And then we have 20 pixels at the top and 20 pixels at the bottom.Okay, so that looks good. Now, we also want to change the text, write the font color, okay, sothe font color is going to be white.Fresh, Okay, that looks good. And we also want to change thefont size to be 40 pixels and 46 pixels, I think. There. That’s right. So that looks giganticright now, but we’ll fix it in a bit. Okay, this user and comp is supposed to be out ofthe box. So for that, before I go into that, let’s also fix the border radius. Because if youguys notice here, this one’s kind of rounded. This one’s not rounded. So border radius is going tobe let’s do four pixels. Refresh. Okay. That’s how it looks like. Cool. We’ll also text align thatall this to center. Okay, refresh. Alright, that looks good. And we’ll also give it some padding oflet’s do 15 pixels and the top and bottom and 20 pixels to the left and right. Okay, so there’ssome breathing room now. And we also want to change the font family. Okay. And let’s do ASAP.And then sensor. Okay, cool. Refresh. Alright, so that looks good.But now we also want to stylethese guys. Okay, these bad boys. So for that, we’ll go down here. And if you guys remember, wecalled them badges, right? We gave him a class of badges. So we’ll first style that and then we’llgo into user label and computer label. Okay, so we’ll go Hold on. Okay. And we’ll say dad,badge. background is going to be let’s get that background color. Okay. Boom. Come on. Why is itnot working? Okay. The color is bad guy. Okay. So background is that and we also want to colorto be white. It’s, I think it’s already white, but just make sure.Okay, that’s how it lookslike. Cool. Once we have that, now, let’s change the font size because that’s humongous. So we’lldo font size to be 14 pixels, okay? And then we’ll give it a padding of two pixels on the top andbottom and then give some padding on the right and left. And we’ll also give it a font family of ASAPsensor.Okay, fresh. Okay, that’s how it looks like. Right? Okay, so the styling is good. But nowwe need to take it, we need to position the user to the left hand column to the right, right. Sowhat we do is for that, if you guys remember we gave these IDs of user label and computer label sowe’ll do user label, okay. And we’ll do position of absolute again, if you guys don’t know whatpositioning is just go watch my like CSS videos, okay, and then my previous project videos, so. Soif I do top zero, left zero, it will position it to the browser’s top left corner, there are lessright, but that’s not what we want.We want the starting position to be not the browser’s top leftcorner but the parent this scoreboards top left corner, okay, so that it’s easier to do thingsand it’s more consistent later when we resize our screen. Okay, so for that, we will have to giveour scoreboard which is our parent right here, the parent of this, there’s the scoreboard sowe’ll give this a position. Have something other than static or inherit, okay? So which is we’lljust say relative.Alright, now refresh, and it starts from the scoreboards top left corner,right? So once we have this now we can position it. So we’ll say top of 30 pixels. And then we’llsay left of if you do positive, we’ll push it, push it to the right, we don’t want to push it tothe right, we want to push it to the left, right. So refresh, that’s how it looks like.And if I donegative, it looks like this. Right? So we want negative 25. Let’s see. Okay, that looks good.And now we’ll copy this and do the same thing for your computer, right? So computer and positionabsolute top 30 pixels. And then now we don’t want to do left here. We can we can do left. Okay, soif I refresh, that’s how it looks like right now. Right? It’s hiding behind the users hiding behindthe computer. So if I do here instead of negative 25, if I do like 35 pixels, right, right, nowit’s right there.But let’s just do right. Okay, instead of left, we’ll just do a right. So andthen now it starts from the right hand side. So if I do zero pixels here, it starts from the righthand side, you see that, right? But we don’t want to do zero pixels. And if we give it a positivenumber, it will push it to the left. If I do 10 pixels, 20 pixels here, you see, it pushes pushesit to the left, because it’s the right property. So we want to say negative here, okay, negative 25pixels or something.Okay, maybe 35. No, 30 Okay, so that looks pretty good. Alright, so now weare done with the scoreboard. Now we want to get this thing working. Okay. So right now it’s supersmall and block. So we’ll change that. And we call it a dot result. Yes. So we’ll say dot result.And let’s enter a bunch. Bring it to the top, okay. And now we’ll say font size, okay.40 pixels. Let’s see how it looks. Okay, that looks pretty big. Alright, and now we’ll dofont color to be white. Fresh. We also want to text align to the center. So we’ll do dotresult. h1, text, align, center. Refresh, okay. Whoa. Why is it not working? Oh, it’s a ptag. It’s not an h1 tag. Silly me. p tag. Okay, that looks good. And we will also change the fontfamily to ASAP. I should really put this at the top instead of repeating font family every singletime because it’s going to be the same font, but it’s okay. All right. So now we have that. I thinkwe also need to make it bold.So we’ll do font weight. Weight of bold. Okay, refresh. Alright,that looks good, right? Yep. Is the color a little bit different? I think it’s a bit different onmine than here. Why is that? Let’s, I think the real color is this. Right here. Okay, so now let’ssee if that works. Okay, there it is. That looks a lot better. Okay. Cool. All right. Now let’s goover the actual images. Okay, for the choices, The Rock, paper, scissors hand, okay, so we’ll dofor that we’ll go down here. And index dot HTML, we call the choices and then choice for each oneof them. Okay, so we have to do is we’ll say the first thing we’ll do is start choice. Okay, we’llgrab each one. And we’ll do display inline block. Okay, so that will make it horizontal. Cool. Andnow we also need to text align this. So we’ll do go to the parent. pecks align, center, refresh.Okay, that’s how it looks like.And we also want some marginson because we want some space at thetop and bottom. So we’ll do margin of whatnot margin left margin of 50 pixels of top and bottomand we’ll do zero. Okay. So refresh. Alright, that’s how it looks like. I think we also need aborder. So we’ll do go to the choice and we’ll say border of four pixels, solid, solid white. Okay,so it looks, looks okay. That looks pretty good. And now we also want to make it circular, right?So for that it’s pretty simple border radius and you Always want it to be the half of the width. Soright now our width, I don’t know what the width is here. But the point is because you don’t knowthe width every single time you want to do 50%. Okay, because you don’t know the exact widthin pixels. I mean, we can find out, but it’s not that practical.Okay? You always want to usepercentages. Save, refresh. Okay, that looks good. We also need some padding. So we’ll do paddingof 20 pixels. Let’s see how it looks. I don’t know. Okay, that’s too much. Let’s instead do 10pixels. Okay, that’s a lot better. Okay. Now, we also want some space in between each choice. Okay,so for that, we’ll give it a margin. Okay, margin of zero pixels to the top and bottom, and we’lldo 15 pixels to the left and right. All right, that looks good. Maybe 2020 pixels. Okay, it looksgood, right? No change. Okay. I think that’s it for the images. But now we also want something tobe happening when we hover over You see, when we hover over it, the background changes, right?And cursor changes from this pointer to like, this hand tool, right? So what we do is for that,we go down here, we do dot choice, hover.Okay, on hover, we want the background to change. Andalso we want the cursor to change. So cursor, we want to say pointer. Okay? So that’s how youchange it. Now when I go over it, okay, that’s the working version. Let’s go here, refresh. Thereit is. Right, it changes. So we have that working. Now. Let’s also change the background. So we’lldo background of what’s a color, I don’t know what the color is, let’s say. Let’s just do somethingdarker. Let’s go here. Get that. And yeah, let’s do this. Okay. All right. That looks good.Now that works. But if you notice something, when when I hover over it, the color of the backgroundchanges right away, right? Like, instantly, okay? So let me give it something else. For now let’s doa read or something. Right, it changes instantly, we don’t want that we want something more smooth.Okay, so we go here and do transition.And we can do all 0.3 S is k. So 0.3 s 0.3 seconds for howmany seconds? And S is you know, seconds. So here, if I do one, as you see, it’s pretty slow, right?But that’s not so natural. It’s way too slow. So what you want to do is 0.3 Okay, that’s what I useusually. So now it’s a little bit more natural, right? So let’s go back and change this color.back to that. So we’ll do was it this coat? No, this color. Okay. There it is. Okay, cool. Sonow once we’re done with that, let’s make this Make your move thing work. So that’s called theaction message. So we’ll do action message. And this one’s pretty simple, like, text alignthis to center. color is white, font family, repeating for the 100 million time. All right,that looks good. Um, we also want it to be bold, and a little bit bigger, font way to be bold,and font size to be 20 pixels. Okay. All right, that looks good.Mmm, hmm. Why is that goingdown? Oh, okay, if you notice something here are making movies a little, you know, shifteddownwards, a little bit more than the original one. So for that that’s happening because we have50 pixels for the choices, you see that choices, this this whole thing, this whole thing, right.And this one has a margin, top of 50 and bottom of 50. So to fix this, what we can do is sayjust margin top here, instead of doing a margin, like that.So now it would only give us the margintop, and now that’s too close. But now we can add a margin top here. of 20 pixels or something.All right, there it is. Whoops, we’re missing a period. So let’s get that. Alright, so that looksgood. Alright guys. So that’s it for Rock Paper, scissors, HTML and CSS part. We’re going to do theJavaScript part. Okay, so I’m excited. I’m sure you’re excited. So what are we waiting for? Let’sget into it. Let’s get into it. So I have my atom open in there. Right hand side and the app openand left hand side. This is the working version. So let’s first take a look at how the JavaScriptis working.Okay, so I’m going to refresh here. And when I click on the rock, boom, rock userloses to paper, okay? Boom. I haven’t fixed all of it yet, but we’ll fix it. Okay. It’s supposedto be subscripted, all of it. So when you click on rock, if you when it goes, Hey, you know, youwon, and the user score goes up. And when you win the border, there’s a green border, it stays therefor like, 300 milliseconds, and then it goes away. Okay? If it’s a draw, then it’s the gray color.So that’s a draw. Okay? And you probably notice the numbers didn’t change, okay? And if it’s,if you lost, then it’ll give you a red border. border. border. border. So, okay, you won. Comeon. I can’t lose. I just can’t lose. What? Okay, cool.There you go. Okay. So that’s, that’s whathappens when you lose, it’s, again, all the other values work as well as the other buttons. Okay,so let’s go over to index HTML. And before I write any JavaScript, let’s make sure that we add ourJavaScript or link our JavaScript to HTML, okay. And again, we do that right before the endingbody tag, yo. Okay. AB dot j, s. Okay, we have that. And once we have this, we can just go tohere and just do Hello. Let’s see what that gives us. Refresh. Okay, let’s first open this file.Okay, because this is the working version. This is the final version. So we’ll go to here open inbrowser. Okay. So this is what we have right now. Right now, nothing worked. You see, when I clickon it, nothing works, because we haven’t done any of that yet. So let’s go to console and let’smake sure that our JavaScript is working, and it is working.Cool. So now let’s go to App dot j. s,let’s collapse that thing. All right. Okay, so the first thing that I’m going to do is cache the DOM.Okay, so then you’re like Tenzin, what the hell is cache the DOM? What? What does it mean? Okay,let me first do it. And then I’ll, I’ll explain, okay, so so the first thing we need are theactual scores, right? So the actual variable, so then what we can do is, say const, I’ll callthem user score equals zero, okay, it start, it’s going to start at zero cons to computer scoreequals zero, okay, now, we’re going to update this later, depending on who wins and stuff like that.But we also need to show it to the page, right, the document that our DOM.So for that, what we’lldo is, say, const. Users score lm, or just say, underscore span, equals document dot get elementby ID user score, because we gave it and gave it an ID of user score right here. If you rememberright there, right. And then we’re going to do the same thing for computer score. Okay, so let’scopy that paste. And I’m just going to do computer score here. underscore span tag, and this is goingto be computer score. Let’s go to computer. Okay, cool. So now you’re wondering why the hell am Idoing this type this weird thing right here.Okay. So, I, this is my own style, okay? You want to beconsistent, okay. You don’t necessarily have to do this. So now underscore, I put it there to clearlydifferentiate between normal variables. And then Dom variables. Okay, so these are Dom variables,right? So like HTML variables that store DOM elements, okay. So I can clearly tell that andalso now when I put span because I put those things in a span tag.Now I can clearly tell that,hey, it’s in a span tag. Okay. So that’s just my way of doing things. Okay. You can do your ownID, you don’t have to put the underscore there. You can just do span tag here. Right. But that’sjust what I do. Okay. So I think it’s a pretty good idea to do do it this way. Because you cantell, okay, it’s a it’s a very dumb variable just because of the underscore and then you know, whattype of element It is like by span tag, div tag, input tag, right? Whatever it is, you just putthat and then later on when you’re debugging and trying to look through your HTML files can be somuch easier.Okay. So I highly, highly recommend you do this. Okay. All right. Now, let’s getthe scoreboard I’m going to call it scoreboard underscore div because I stored that in a divtag, okay. It’s a div. tag and then do document dot query selector or, yeah, query selectorand I’m going to say dot scoreboard. Okay? And that’s because we call it scoreboard right here.Okay, we gave it a class of scoreboard. Alright, so once we have this, let’s keep going. Let’sget this result div. So I’ll go here and say result div, div, okay? Equals document dot queryselector, dot result. And now let’s also get the rock paper scissor buttons. Okay, so for those,we’re just going to do const rock div, because I stored that in a div I think.Yep. Yep. And I’mgonna do document dot get element by ID equals, that’s going to be our okay. Yep. And copypaste. And this is going to be paper, div, and P, this is going to be PS. And let’s go hereand do rock paper, scissors. If, okay. Alright, so now we have cached the DOM. Now let’s goback to why we call it caching the DOM. Okay, so so caching the DOM really means. So caching ingeneral really means storing something for future use. Okay. So here, what we’re doing is we’redoing exactly the same thing, we’re storing all of these things in variables so that we can useit later. Okay. And it’s not just for convenience sake, right? It’s user score span, it’s a lot likesmaller, like less to write, then document dot get element by ID user score every single time, right.But there’s also a performance factor.So imagine, every time we need to do something, we need touse that document, get element by ID user score, we need to get that reference point. Imagine usdoing document dot get element by ID every single time, right? When we do that, what we’re doing iswe’re doing a running a process, and we’re running that process every single time, we need to getthe reference to that element instead of storing that in a variable once, and then we use thatvariable again, because the variable already has the reference to that element.Okay? It’s like,imagine you’re at a library, right? And you’re working on this research paper. And you need toget the source for your research paper, right? You need a lot of sources from this particularbook. And now every time you need that book, you get away from that you stand up, you get awayfrom the table, your desk, and then you go to that shelf, find that book, take it out, read it,find that source. And you’re like, Huh, okay, you memorize it, and then you put it back, yougo to your desk, and then write the source down. And then when you need some other sources, again,you go back to that book, and you repeat the same process again and again, right? That’s terrible,right? very inefficient, it’s going to take you years, okay, to finish that paper.Instead, whatyou can do is go, go find that book, bring it, place it down temporarily here, so that yourbook is right here on your table of your desk, if you need a source. So then what you can dois go here, okay, I need a source. All right, cool. Better yet, just leave the book open.Right. So that’s like caching the DOM right? Instead of doing document dot get element documentdot query selector, every single time you play it, that is stored in a variable, so then it’s justrunning that process one time, and then we have the reference point in that variable. So we’rereally being efficient in terms of performance and also convenience, right? It’s really convenient.Alright, so let’s, let’s move forward. Alright, so now let’s talk about what happens when we click onthose individual buttons. Okay, so when we click on rock, what we need to do is take that value,okay? It’s a rock and then compare it against a computer’s choice, which is just going to be arandom choice between those three options.And then we compare those two, and then check who winsand then display the result back on the DOM in the DOM. Okay, so I’m going to first add some eventlisteners to each button. Okay, so we’ll do add, add rock div dot add event listener, on a click.I want to write a function. And that function is just going to do console dot log. Hey, you clickedon rock. Okay, so let’s see if this works.Okay, so refresh, and inspect. Go to console. And nowI’m going to click on rock. Okay, there it is, right. Once you click on it, it goes hey, youclicked on rock right? Now, let’s do the same thing for these three. Okay, so we’ll do threeDD Well, not DD. Let’s do okay, that’s fine. All right, so now we’ll change this to paper div.We’ll change that to paper. And we’ll change this to scissors. And Come on, and we’ll change this toscissors diff as well. Okay, so now refresh. And now when I click on rock, it’s gonna say, hey, youclicked on rock. When I click on paper, it’s gonna say, hey, you clicked on paper. And same thingfor the scissors, right? There it is.There we go. Okay, so now that we have those buttons working,let’s go further. Okay, so right now we’re just console dot logging, we don’t want to console dotlog, okay, we want some things happening. Okay, other than console dot log. So what I’ll do is Iwill create a function called game, okay, so I’m going to pretend like I’ve already created thatsum game. And then if the user clicks rock diff, I’m going to provide an argument of rock, okay? R.And if the user clicks paper, I’m going to give it an argument of P. And then if the user clicksscissors, I’m going to give it a give it an argument of S. Alright, so let’s get rid of theconsole dot log console dot log. And if I refresh, right, now, nothing’s gonna happen, it’s gonnagive an error because it says, game is not defined, okay? Because we don’t have a functiondefined for a game.So let’s do that. Before I do that, I’m actually going also going to createa function called main, and then wrap all of this inside of that. Okay, let’s do this. And come downhere, and then we will indent all of this stuff. Okay, cool. And now to run this, we’ll just domain up top here. Okay, so now if I refresh, right, it’s still going to give you that error,because game is not defined. So then we can define that game down here. We’ll actually just keep ityou know, in a chronological order. So now let’s define a function called game. And, of course,our game function is going to take a user input, right? user choice in this case. So what we’resaying is, again, when somebody clicks on any of these buttons, take the value of those buttons,whatever it is RPS, right Rock, paper, scissors, and then compare it against a computer choice,and then get the result back.Okay, so here, we’re just gonna say user choice, choice, userchoice, choice, choice, choice, user choice, and let’s say console dot log. Poop for now, okay, solet’s copy that and paste that a couple of times. And we’ll do plus, and we’ll do user choice, okay,whatever it is. So choice, what is happening? Come on, give me I don’t know why it’s not doing that.But let’s do that. Alright. So now let’s see what happens. Okay. So now, what I will do is click onthese buttons, and it should basically give me you know, whatever I pressed on it. RPS, this givesme r p. s, it’s kind of hiding in there, but it’s there.I promise you right there. Okay. So let’sgo back. Rock, paper, scissors, right. So again, it’s just a function that we’re calling here,right? So when we call this r gets passed in here, and then this gets passed to this, and you knowhow functions work, okay, if you don’t know how functions work, go watch my go take my JavaScriptcourse. Okay? So, go do that. Alright, so once we have this, again, we don’t want to console dotlog. So we know that we have our user choice.But now we need a computer choice. Okay, so to geta random computer choice, I’ll just put that in a separate function. Okay. So I want you guys tobe comfortable with at running functions in other functions, okay. So what we’ll do is function andwe’ll say get computer choice. Okay, and we’ll just do this. Alright. So what are what are theoptions, right? What are the choices? The choices are our P as K. So we’ll create the choices constchoices equals an array, and we’ll say well, are P and S? Okay, so we have those. And now toget a random element from the choices array. We do that with the help of the built in object inJavaScript called math. Okay. I think we’ve used that in the Unit Converter. Yeah, I think so. Sowe can do things like Matt. So here, let’s just do console dot log math dot random Okay, so that’swhere you use math dot random.Math is a built in object in JavaScript. And random is a method thatexists in that math object. Okay, so we can use that. So what this does is it gives you a randomnumber between zero and one. Okay? So you’re like, What? What does that help with anything? Let’s gointo that in just a little bit. But let’s first see what this does. Okay, so we’ll do refresh. Andwe have that refresh, refresh, refresh, refresh, refresh, right? It’ll never go. It’ll never reachone always be between zero and one. Okay? It will be a random number. Basically, now what wecan do is say, okay, it’s a number between zero and one is cool. But in this case, we don’twant that. Okay, what we want is a random number between zero and three, right? 01 or two. Sothen we can say, Okay, if it’s if we get one, we can just do Oh, choices. One, give me P. Ifwe get a random number, let’s say zero, we can just do choices zero, which is our right.So howwe do that is with times three, okay? You’re like, how does that work? How does that work? Well,let’s, let’s see. Okay, so refresh, refresh, it’ll never go over three. You see, will alwaysbe like 01 or two, you see that? I’m refreshing like a maniac right now. And how that worksis let’s do some math here, like zero point, let’s do something really low, right? between zeroand one, which is like 0.01 or something. So let’s do 0.0001 times three, well, that’s just goingto give you something really close to zero. Okay, that makes sense. And now let’s do somethingreally close to one. Okay, so let’s do 0.99999 times three, you see, it never reaches three.So that’s how we get random numbers between zero and three. If you want random numbers between zeroand 10, all we do is just put 10 there. That’s it. And now you get random numbers between zeroand 10. Okay, you will never reach 10. Okay, if you want it to reach 10, you can just do 11 there.Okay. But again, this is not helpful to us.Again, let me change that back to three. This is stillnot helpful because we still can’t do choices, you know, 0.4, right? It doesn’t make sense. Okay.So what we need to do is actually rounded down, okay, make it a poll number instead of a decimalnumber. Okay, so for that, we use another method that exists in the math object called math dotfloor. Okay. And that’s it. So now, refresh, look at that. 1120 I’m refreshing like maniacagain, command R, you see, it will always be a random number between zero and three, right?01 or two.So now what we can do is instead of console logging this, we can just store that in avariable. So we’ll do a random number equals that. Okay, cool. So we have that so far, but now wedon’t want the number we want the element. So we can just do return choices. Random number. Okay,so now let’s run this. refresh, refresh. Whoa. What is going on here? Let’s see. It doesn’t seemto be working. Uh, oh, we didn’t console dot log, this console dot log. Go here. Okay. There itis. Right. refresh, refresh, refresh, refresh, refresh, refresh, refresh, refresh, refresh. Soit’s going to be a random, it’s going to basically give you a random element from that choices array.Okay. So let’s get rid of that. We know that our function works. So now we can move forward inthat game, user choice function. Okay. So now we have user choice. Now we need to get the computerchoice. So we can just do const. Computer choice. Choice equals get computer choice. And that’s it.Okay, so now, let’s do console dot log computer choice here.But we know it works. But let’s justtest it for the hell of it. Let’s go down here a game. And let’s just do C or something. It doesn’treally matter right now. So you see that? Right? It basically gives you the random computer choice.So again, if I do console dot log, user choice, let’s do user choice. I don’t know let’s dosomething like user choice. That plus, yeah, let’s do that. And then let’s go here. Get thatguy. Put it down here. And we’ll do this is going to be computer choice. Maybe I’m going overboardhere, but let’s, let’s test it. Okay. There it is. Okay. So again, refresh. You see the computerchoice always changes, but the user choice doesn’t change because we said See, right? So, but if weget rid of that, and actually press on a button Now, let’s see what happens.Right? So now when Iclick on the our rock, it’s always going, the user choice is always going to be wrong, are and thecomputer choice changes, right? It’s going to be random. And if I click on the hand, right Rockpaper, then it’s going to be the user choice is always going to be P, and then the computer choicechanges again. And then if I click on scissors, it’s going to be as the user choice is going to beasked and computer is going to change again. Okay? All right. So once we have this now, what we cansay is, now we have to compare, right? Now we do, if you know, user picks, rock and computer pickscissor, then it’s a win, right? If the user picks paper and the computer picks scissor, then it’s aloss, right? So we have to do that.So then, now what we can do is, instead of using if statements,I’m going to use switch statement here, I’m going to give you a quick intro here, but Ihighly recommend you check out the documentation, we can check the documentation of switch. Sobasically, how it works is, let’s say we have a variable here called name, okay, and we’ll justsay name is David. Alright. And now, usually what we do is if name equals, you know, David, youknow, console dot log. Hello, right? If we do and then else, if name is equal to pineapple,then then then do console dot log, hey, right. And then, depending on how the name changes,it’s going to either do Hello, or Hey, right, if I put right now it’s going to do Hello, becausename is David. Right? But if I put pine there, console dot log Hello is going to run, okay, butswitch statements, how it works is very similar. All you do is switch.And then the argument. So inthis case, it’s named right. And then what you do is case and say if the case is Apple, colon, allI want you to do is say hello, console dot log, or console dot log, this is Apple, and then break.And then all you do is say, case, pine, then I want you to do console dot log something else,like whatever. And then well, and then break here, right? So this is how switch statements work.Okay, very similar. You can do everything that you can do it’s do with switch statements withif statements and vice versa. But in some cases, switch statements make things a lot easier thanif statements. So here, what we can do is say, switch. User choice, plus computer choice. Okay.So let’s first take care of all the cases, all the situations when the user wins. Okay, so theuser will win. If the user choice is R, and rock, and the computer choice is paper. Yep. And if theuser choices, paper, and the computer choice is rock, and if the computer choice, user choice isscissors, and the computer choice is rock, no, paper, yeah.Yeah, rppr s p, okay. In those cases,what we want to do is say console dot log, user wins, okay? And then break, you always need toput that break, or else it’ll keep going to the bottom. We don’t want that. So we’ll also do case.So now we’ll take care of when the user loses. So if the user picks rock and the computer picks,what happens with puck, paper, okay. And user picks, Rock paper and computer picks scissors,and rock, scissors, and computer picks rock, okay, in those cases, we just want to say consoledot log. Computer wins. Okay, or user loses. Let’s just keep things very consistent loses All right,and break again. Okay, now let’s do the same thing for the rest. So we’ll do five why why paste?Okay, cool. And now for the case that last one is if the if they’re both equal, right, so we canjust do RR this one simple, right? Rp Rs. Okay, cool. So are our PP SS in those cases it just it’sdraw. Okay. All right.So that’s it. So now, let’s see what happens when we click on these buttons.All right, so I’m going to refresh here. Nothing’s there. Click on rock one time. Well, nothinghappened. Okay, let’s hold on. Let’s do it again. Click on rock. Okay, cool. I don’t know whatwhat happened there. Click on rock, okay. It’s, it works. User wins. User wins. I’m click keepclicking. It’s a draw. It’s a wins wins. I’m never losing. I think there’s something’s wrong there.Is something wrong there? I think something’s wrong there. Let’s see. Oh my god, silly me. Okay,so here it’s not supposed to be. Rp. It’s supposed to be rock and scissors. Right? If computer asuser picks rock and computer picks, scissor user still wins. Okay, so I knew something was wrongthere. But I was just so gone earlier. Okay, so let’s refresh and see if it works.Okay, sonow we have loses some losers, some wins and some drop, okay? Which is, which makes sense. So if Iclick on the hand icon, paper, we have some wins some losers and some drops. Same thing for thescissors. Okay, so we know that our game function works, okay. But now, it’s just another consoledot log, right? It’s not showing anything up there on the page. It’s not doing anything, right,which is not what we want. Alright. So for this, what we can do is we can, again, separately createdifferent functions for winning, losing and draw, okay, we never want to put an jam all the logicin one function never, ever, okay? Because then later on, it’s it’s hard to read.It’s hard todebug, it’s hard to work with other people. It’s just bad. Okay. So instead of logging winds andstuff like that, what we’ll do is we’ll say winds create a function called wins. Okay, so rightnow we’re just pretending that we’ve already created a function called wins. Okay? So when theuser wins, actually, let’s do win, okay.And when the user wins, I want to do something with thewin function, okay? And I also want to do when the user loses, I want to do lose, and then whenthe user draws, it’s when it’s draw, just wanted to drop. Okay, now, I can go up top here and dothose functions again. So let’s do function. When, and then let’s just console dot log when for now.Okay? I just want to, again, test it right away. Okay, don’t move forward.I mean, this is like,we know this is gonna work, but I’m just trying to prove a point. Okay. So let’s do y, paste,paste. Okay, let’s go here. Alright, cool. So now, if for this one, lose, come on, lose. And thisis going to be lost, and go down here. This is going to be draw, and we’ll just say draw. Okay.Alright. So now, let’s see what happens. Okay, so it’s still working. So, again, let’s go back andstart working. Okay. So right now we have when, and now when we when we want to show? What do wewant to do? First, we want to first increase the user score, right? So the first thing we do iswe go up, we have user score and computer score, right? So what we can do is, say user score.Userscore plus plus. That’s it. All right. And let’s go to the last I mean, it’s, it’s this is notreally, really realistic. Usually, you don’t like work in three functions functions at once,right? But I’m just showing you here, you can just do like, computer score plus plus here, okay?But we’re not going to do that. We’re just work on this function, and then work on this and then workon draw, okay, so, one at a time. Alright.So user score plus plus, and now let’s just show you thescore. Okay, let’s see what it is. Okay. And let’s wait for it. Let me hold on. Let’s do console dotlog. It’s a win. Okay. Alright, so now refresh. And let’s see what happens. Okay. It’s a draw.Let’s keep clicking draw, draw, draw, draw. Okay, so now it’s saying assignment to constant. Okay.So what’s happening right now, it’s saying you’re trying to Change the constant variable, okay, thisconst. So what we do is instead of const, we can either use let, or var, okay? We should we shouldbe okay using lead here, okay, so we can just use let. Alright, so now let’s go back here and dothe same thing. Draw you see that when you when you when we when the score went up by one, andit’s a one now again, if I keep clicking You see, whenever we when it goes up Holy crap, we justwon like, seven at once or something like eight, eight times in a row.That’s crazy. So let’s goback. And instead of when here, I don’t want when I don’t want to console dot log user score, what Iwant is, I want to show it on the page. So what we do is instead of console dot logging, we just gouser score span, okay? Because that’s the element, right? Because we’re saying usually get element byID user score, and that’s the span tag, this span tag right here. Okay, so let’s go back. And allwe do is use your score span dot inner HTML equals user score. That’s it. Alright, so now, and thenwe can also do the computer score, right? So we’ll also update the computer score, even though rightnow since we only have the wind function, it’s not going to the computer score is going to remainthe same.So let’s do equals computer score. Okay. All right. So now, let’s keep clicking, yousee that? When the user wins, the score goes up, right? Again, it says assignment to constantvariable. Oh, innerHTML. Alright, not in our text, HTML. Okay. Refresh. And that should be okay.Now. Okay. So every time we when the user score goes up, okay, so once we have the score, and nowwe need to actually display the message that says paper, beats rock or whatever, right? And forthat, we can’t do that yet. Okay. And that’s because we, we don’t have anything that says,you know, any reference in our wind function, right? We have that in our game function, but notin our wind function. Okay? So what we can do is give it some parameters here and say, user choice,and computer choice, okay? Or you can just say user computer doesn’t really matter what you callit, okay? A, B, you can call it anything you want, okay? I’m just gonna call it user choice.Computerchoice, okay. And down here, again, just to just so you guys don’t get confused. I’ll just douser computer for now. Okay. And then down here, what we can say is when when you actually runthe function, right? This is defining a function, but when you actually run the function, pass in,whatever the whatever the user choice and computer choices, okay? So as the as an argument here, I’lljust do user choice, and then computer choice, okay. And then I do that for all of the otherones. So user choice, and computer choice, and we’ll define the lose and draw function in abit. So user choice, and computer choice. Okay. And now let’s do console dot log user. Choice, notuser choice, let’s just do user because remember, we changed it so that you guys don’t getconfused computer, and refresh. And now you see, it’s going to be RS every single time becauseit’s always going to be a win, right? Because this is a win function, it only takes care ofwin, right? It’s not going to take care of when you lose and draw.Okay? So that’s what happens.But we don’t want that what we want is, we don’t want to console dot log, we want to show it onthe page. So what we do is get the result div, result div dot inner HTML and say, you know, userchoice. Plus beats plus computer choice. Okay, and then we’ll say plus, you win. Okay, so let’ssee if this works. So let’s wait for one way when user choice is not defined, why is it thatokay, we call the user and computer I can I keep forgetting that? So we’ll just call it userchoice.Okay, that just makes more sense. So we’ll do user choice computer choice. Okay. All right.I don’t know why it’s doing that right now. Oh, okay. So when we actually got the reference tothat element, we said, document dot query selector dot result, okay. And if we take a look at ourindex dot HTML, we stored that not The result I mean, we did but it’s inside of a p tag inside ofthe result. Okay? So here really what we want is say, P, okay? Get the p tag, get the paragraphtag inside the result. So now when we actually change this, it’s going to be a paragraph. Okay,so here we should really call this not div, but P. Alright, so let’s go down here. And where’s the?Where do we use resolve p anywhere else? Let’s hope not. Okay. And let’s go here, and let’s callit P, and this should work.And now let’s see, when we when there is Orbitz as you will,right. However, Orbitz S is not so readable, okay? Our beats s not so readable. We want itto be human readable, okay. So what we can do is convert this to rock and this to scissors, okay,and we’ll create another functions for those, okay, for those things. So in this case, afunction, not functions, okay? function and we’ll call it convert to word or something.Alright, and it’ll take in a letter, and then we just do if the letter is equal to r, justreturn rock. If the letter is equal to P paper, return paper. And if those two are not met,then just return scissors. Okay. Okay, so now, here, what we can do is just say convert to word.And go down here as well convert to word. Okay, and refresh. You see that? Right now? It sayspaper covers rock, because we’re not winning. It’s a draw, draw. But then when you win rockbeats scissors, okay, you win. Okay, so that works.But now, while we’re at it, I also wantto introduce you guys to some ies six. Okay, so, right now, this is the CS five right here, right?When you have to combine a variable with a string, all you do is plus, okay, which is cool, but notso cool. Okay. So in year six, there’s something called template strings. And all you do is withthe backticks. Okay, and if you don’t know what, where the backtick is, you can Google that.But on a Mac, it’s on the top, left corner, right below the escape button, okay, and Windowsis probably there.But if it’s not just look it up on your keyboard, you should be able to findit. Okay? And then all you do is wrap the end in a backtick as well. And that’s it. Okay, so nowyou can get rid of the pluses and, and the quote, so let’s do that, get rid of that. Get rid ofthat. And let’s get rid of the pluses there, you win. Okay, that’s good. Let’s get rid of thequotes at the end there.And now, the Convert to word user choice is not a string, right? Right.Now, if I displayed this is just going to display them as strings, which is not cool, right? That’swhat right? That’s not cool. So what we do is, if it’s a variable, in this case, it’sgoing to, you know, return it’s a function, so we just do dollar sign and wrap that with curlybrace.Okay. So that’s all it is. Okay. And then we do the same thing with convert. And there yougo. Alright, paper covers rock, you will keep going rock beats scissors, right? Now, there’s,it’s not going to say convert to word user choice, you see? Right? So this is a lot more readable.Okay, so now that we have the basic functionality of the wind function working, now that we havethat we can move on and just copy this, okay, copy this and just paste it right here. Okay,so we can just say, actually, before that, let’s work on one more thing before we move on.Okay. So right now we have rock beats scissors, but it’s still like not clear who’s winningwho, right? You can see your numbers going up.But you can’t really tell who’s who’s whopicked rock and who picked scissors. Okay, you can kind of you know, calculate that becauseif you pick rock, of course, you’re the one who picked rock. But let’s keep let’s make that superclear. So what we can do is right here, we can just add something and we’ll just say we can justSomebody do something like, you know, let’s do, let’s just do, this is always gonna be user, rightuser and this is always going to be computer comp. Okay? This is cool.Like, that’s cool, butit’s a little too long. Okay, I don’t want to, I don’t want to make that and it’s, it justdoesn’t look good. Okay, I thought about doing it, you know, make, like putting a picture somewherehere, right? That’d be pretty cool. But I didn’t I wanted to keep it keep things simple. Okay. Sohere, what we can do is say const. do small word or small user word. Yeah. Small. user. Word. Sure.Or equals user, and just do dot font size. Okay, that’s how you control the font size. Okay. Andalso, I also did this so that I can expose you to these little, you know, string methods inJavaScript. Okay. So user dot font size, we’ll do three, okay, we’ll make it super small. Andthen we’ll superscript that. Okay, so now, what we can do is make the same thing and do comp.Andthen we’ll do font size of three and superscript. That as well. So superscript is basically let melet me remove that for now. And let’s first Well, let’s first let’s go up, up, okay, so now insteadof user here, we just put that in a curly brace, okay, like that. And then do small user word.Andthen we’ll say, come down here and do the same thing with this guy. So we’ll do small comp word.Wait, I don’t think I call it comp word. Okay, let’s go up. Yep. For this one. It’s gonna besmall comp word. Okay. And this is going to be calm font size three. So let’s see how it looksnow. Come on, you see that? So that’s how it looks right now.But right now it’s on the same line.So what I want to do is, I don’t know superscript or subscript, I think subscript word would workbetter. So subscript superscript, would do this. Let’s do that as up, dot s up, okay. And thesemethods exists on the string object in JavaScript, it’s built into JavaScript.So and if you put sup, it’s gonna move that down, or be the fresh, there. Let’s okay. So this looks a lot nicer thanjust that. Okay? Again, if you guys prefer the brackets, it’s okay. Doesn’t the parentheses It’sokay, you get you guys can use it. Okay, bracket, parentheses, you parentheses. See, please use thatif that’s easier to understand. Okay, so alright, so we have the basic functionality working. Sowhat I want to do is, I just want to copy all of this, okay? So I’ll just do copy and paste. Okay?Because the functionality is going to be the same thing, right? And let’s do this and let’s pastethat as well. Okay, so we have that. And let’s indent that. way. What? Okay, so we indented that.Alright, so now let’s take care of loops.And then we’ll go into draw, okay? So right now, when welose, we don’t want the user score to go up. We want the computer score to go go up. Right? Andwe don’t want let’s see, we don’t want we want to show this right? You just spend innerHTMLequals dad, that is good. That is good. That is good. And then in the result p what we want tosay is do loses, too. Okay? loses to computer. You lost. And not. Not that. Okay, hold on. Okay,not that. And that’s it. So now, when we lose it, you do that too. Let’s let’s add in a poop there.Okay.Okay, let’s do that. Refresh. Okay, whoa, user choice is not defined. What’s going on? Let’ssee. It says app j. s, line 38. User choices not Oh, okay. You see that? We didn’t define it here.Okay, user choice. Computer choice. All right. So refresh. And you when, let’s see what happens. Youlost. Okay. We have a poop. That’s a happy food. He’s happy even if even we lose. Okay, cool. So wehave that and you can see that the computer score goes up when we lose You see, whenever we lose thecomputer score goes up, okay? And when is draw, nothing happens right now because we need to,again code that. Okay. Okay, so we have done that. And now let’s go to the draw. And here wedon’t do user score plus plus or do any plus plus, because let’s draw, nobody goes up. Okay? You can,like make both of them their score go up, but that just doesn’t make sense. So we’ll just do thosetwo. And we don’t need to do these right? Yeah, we don’t need to do that.And, or do we? Let’ssee. Yeah, we don’t need to do any of that. For a draw. For draw, we can just keep Yeah, we canjust keep that the same. So it just like, equals, we’ll just say equals, and we’ll do it’s a draw.Okay, and what emoji should I use? Boring now? I don’t know. Let’s just use apple. Let’s just notuse anything. Okay. Um, okay. User choice is not defined. Again, in our draw, we got to definethat. So choice user, computer choice, refresh, and look at that. So now when we when isgoing to say when C. And when we lose, it’s gonna say last, right? And when we do,draw, it’s a rock equals rock. And it’s a draw. Okay. All right. So that’s pretty much itin terms of the main logic of our app.Alright, now let’s add some finishing touches and do thelittle things. Okay, you know what they say? They say the difference between the good and the great.Is that little extra, okay, that little extra? I don’t know who said it, but the first time I heardit, I mean, and that’s why I still suck. Okay, let’s keep going. So if you notice on theworking app, refresh, I don’t know why that piece that but doesn’t matter. So when I clickon it, you see if it’s a draw, it’s that gray, it adds that gray border, animated and goes away,right? If I lose, that happens, and if I win, let’s see if I win. There we go. Right, the greenthing, good border appears. So for that, what we can do is in our win, lose and draw functions, wecan add some things to it.Okay, so what we do is we can first work with the win, okay, so we’lldo is go here. And let’s go to our working app, right now, if I refresh, nothing happens, right? Imean, the message pops up, everything else works, but animations not there. Okay. So for that, whatwe can do is add a class to each of them. Okay, so when the user wins, and if we click this guy,it should add a class with some styles to this div.Okay, so how we do that is, first, we haveto make some styles. I mean, some classes right in our style, style dot CSS. And this is JavaScriptvideo, but I left this off for JavaScript, because I felt like this had more to do withJavaScript than CSS, okay. So here we can do green glow. Okay. So when the user wins, we wantsome green border to appear. So I’ll do border, four pixels solid, and let’s do four D, cc, sevenD, okay. And then we’ll get a box shadow, okay, box shadow of 004 pixels or 10 pixels. And we’llgive it a color, a darker green color. Let’s do three, one, B Four, Three a for this. Okay,and now let’s do the same for red glow. Okay, red glow, and we do something similar. So, grabthat and in this case, we want to add a color of something reddish. Let’s do FC 121 B. And forthe box shadow color, let’s do d 01115. Okay, and now let’s repeat the same process for forthe gray color.So we’ll do gray glow, and we’ll do something grayish. 464647. And for this one,we’ll do two five to nine to be more darker. Okay, that looks good. And if you don’t know how thebox shadow works, this is the horizontal vertical offset. And then you have the blur and the color.Okay, that’s all it is. And then you can, you can have an optional value here for spread, how faryour shadow should go. But again, you can look that up. It’s super simple. It’s not that hard.So now let’s go to the JavaScript part. And here now that we have those classes, what we can do issay, when the user wins, okay, when the user wins, what we want to do is add a class of green glowto whichever div the user clicked on. Okay, if the user clicked on the rock div, it should give itshould give that rock div a class of green glow, okay? And that’s going to give that border ofgreen. Okay, so now for that what we can do is say document dot get element by ID of our right.But Ris a hard coded letter, right argument. And that’s not what we want, because then it will only givethat green color. Only if we click on the rock, what what if we want, when we click to onthe paper, right, it’s not going to do that, we’ll have to hard code everything. So that’snot what we want to do here, what we want to do is get the user choice.Okay. And again, userchoice here is whatever your user clicks on it, and then it’s either, you know, it basicallyis either r, p or s, okay? It’s one letter, depending on what the user clicked on. Okay. Sowe do document dot get element by ID, user choice dot class list class, this is a method that existsin the DOM. And with JavaScript, when you do that, what it gives you is an array of all the classeson that specific element, okay? And now what we do is on that array, we just do a dot add, and thenadd our class. So then we can just say, dot green glow here. Okay. And that’s it. So now let’s seewhat happens when we click something. And if we win, let’s see what happens. Okay? refresh, click,click, click, let’s see fly when it’s winning, but it’s not doing that. Let’s see what why thatis. Oh, I’m not supposed to put the period there. Because we know it’s gonna be a class. Okay? So wedon’t need to put that there. Okay.And there it is. So the border here is not working. Okay. Sothe glow is working, the box shadow is working, but the border is not working. Okay, so it’s stillwhite. And I think there’s some CSS conflicts. So I’m not going to look through everything andtry to fix it. What I will do is I will just put that important flag, okay, maybe we can just moveall this down at the very bottom, and that should fix it. Let’s try that first. Because puttingthe important flag is never a good idea. Okay, so we’ll go down all the way down and put it here.Okay. Let’s see if that makes a difference. Okay. Let’s go here, refresh.And there it is. Okay, sowe didn’t have to put that important flag. Okay, cool. Let’s also make sure it works on paper andscissors, okay, it works on all of them. If we when clicking on any of those buttons, it willadd a border of green However, it’s still green, right? It’s not supposed to be green, if yougo here, right? If we when it just goes back to white, right? It’s, it has that little animation.So how do we do that? Right? So we do that by using something called a set timeout function inJavaScript, okay. And we can do this thing with CSS. But I just wanted to do this with JavaScript.So I can introduce you guys to set timeout. Maybe we’ve done that with the digital clock. Ithink we use set interval there.But yeah, let’s do set timeout. Okay, so let’s go overwhat set timeout does. So here, let me just run it in the out in the global scope. Let’s doset timeout, and set timeout takes two arguments, okay. It’s going to take in a function, and let’sdo function. And let’s just say console dot log. Hello. Okay. And the second argument it takes isthe time in milliseconds of how long you should wait before you perform that first argument, firstfunction.Okay? So if I do 3000 milliseconds here, which is three seconds, it will wait if Irun this, okay. It will wait three seconds, and then it will say hello. Okay, so if I refreshhere, let’s count 012. Boom, there it is, right. If I do one second, it should happen in a second.Refresh, one. There. That’s right. So that’s how that works. So let’s comment that out. Let’scomment that let’s get rid of it. It’s pretty silly. Maybe let’s undo and actually grab it. Sothen we can just use that in our function there. And there we go. Okay, so instead of consoledot logging here, what we need to do is run something else. Okay? And what we do here is, sowe added a class called green glow, right when we clicked on that div, when we won, but nowright after that, what we need to say is, hey, wait for three seconds or one second, or howevermany seconds and then remove that class.Okay, so let’s do that. So then we can just do documentdot get element by ID of user choice again, and then dot class list. dot remove. green glow.Okay, and now, you can see it happening if I go to let’s refresh and let’s go to here, inspect.And let me drag this to the right a little bit. And let’s go look at all these depths. Okay, let’ssee what happens when I when Okay, let me refresh again. I shouldn’t have done that. Okay, thereit is. Alright, so I’m going to click on this. I lost draw. No, there it is. Right. So it wasthere for a second and then it went away.Okay, again. Again, let’s come on, let me win. Thereyou go. Right. It adds that green glow class and then it removes that, okay, again, again, it workson the paper and scissors to like, come on, when they go. scissor goes away. Okay. So right now,it’s not so natural. Because if you notice here, come on, let me win ones, please. No, no, no, no,no, no, no. What? Okay, you see, it’s, it takes a little too long for it to go away. So what weshould do is make that like 300 milliseconds, okay, which I think is a little bit more natural.So now, if I went here, I don’t have luck with paperless to go with rock. There you go. Right.It’s a little bit more natural. It’s faster. Okay. So now we can just copy and paste this. Andalso you can, you can probably, you know, put this in a variable because we’re using it twice here,right? Let’s be efficient. Let’s just do it. Okay, let’s just do it.So we’ll just go up top here.And since these are variables, we should probably move this top here. Okay. And let’s just do const.We’ll just call it user choice diff. Let’s go here. And we’ll call it document dot get elementby ID. User choice. Okay. And now we can replace this whole thing with user choice, diff. Okay. Andlet’s do the same thing with this guy here. User choice, diff cap, that looks good.And now we canjust copy this two more times. Let’s go here. Copy that. And here instead of green glow, what we wantis red glow, right? Because we lost. And let’s go here as well. red glow. And let’s go down. Andfor that we can just do, paste. Well. Let’s get that. Okay. And here. Let’s just do gray glow.Let’s go up top. Gray below. We’ll have to get that variable as well. So copy, just get to thetop, paste. Paste. And let’s move this to the top as well. All right, so that looks good. Let’srefresh her. Let’s see one. Gray. Last. Okay, this seems to be working. Let’s go to the paper.Gray. Gray. loss. One last. Last gray. Come on. did I win? Can I can I please when I swear.Okay,there we go. It’s working. Gray last Okay, so last and gray works. Okay, winning works too. Okay.All right. So that works. Now I want to do one last thing before I call it a day. Okay, so let’sgo here to our function and let’s sexify it. Okay, so let’s, instead of doing it the s5 versionhere instead in this inner function in ESX, what you do is get rid of this function name,and then add an arrow. Okay? And then if it’s just Just a one liner here, this user’s choice divclass list is just one line, right? So for that, we can just get rid of this curly brace. Okay.And now let’s get rid of it. And this should still be working. So let’s go to red glow,and see if it works. Let’s see, when we lose, what happens.Come on, can I lose now? There itis, right? It still works. So we can do the same thing for all of this. So let’s get rid of that.Add an arrow. And since it’s one line, we can just get rid of this and get rid of that. Cool. Andnow let’s go to the wind section. And let’s do the same thing. Get rid of these two. Let’s go andget rid of that. And at the arrow, okay, refresh. It’s still working. Whoa, what happened? Oh, getrid of that.Okay. There it is. It still works. Cool. Everything looks good. And I think we havesome Yes, five. Yep, yes, five code here. So we’ll also fix these. Alright, so here again, we canjust do the same thing. Just go here at the arrow, get rid of this, this, get rid of this, this this.And that’s it. And let’s do the same thing here. Get rid of that add an arrow. Well, and let’s pullthese up. Get rid of that. Get rid of these to get rid of these two. All right. And now again,let’s do the same thing. Okay. Okay, that that. And that’s it right? I think that’s it. Okay, solet’s make sure it’s working before anything. All right. This is working. All the clicks are workingand looks good. Let me delete the lines here.Wow, this is looking very, very sexy. Okay, um, I thinkthat’s it. Alright guys. So that’s it for rock paper scissors. If you have any questions, leaveit in the comment section below. Peace out dude..
