Save Initials Conditional with airSlate SignNow

Save initials conditional

hello for this lesson we are gonna be learning how to make our first game that's right we are going to be learning how to make tetris now just get it run at Macomb Tetris but I do want to say in this lesson we will be learning about if statements or conditional statements and this is really what drives a lot of computer logic it's it's important to learn and it just kind of looks like this you see this button right here that says level 1 let's say I click it now it says level 5 if I click it again it says level 10 what's happening is that there's an event listener here right listening for my clicks and it's saying if I click it once put it to five if I click it twice but it's a ten if I click it three times put it to 15 five million four times go to 20 I've cleared the five times go to twenty five and then back to level one so there is an if statement there it's like if you click it once go to five and that's what we're gonna be learning how to work with today put some basic logic and by the end of this we'll have created I think a game better than Tetris which is you know kind of like whack and tared so this is the game that we're gonna be making we have this game right here and it's called click the button and what's gonna happen is that if I click this button right here ten times it's going to say that I want bad ass right now you might be laughing at me but there's that guy who made that like cookie clicker game and like down the app there was like 10 years ago that thing was hot people loved it just click so it's like you know it's like a million dollar game right here so let's get into it so where we gonna start let's just start by looking at the HTML the first thing you can see is that there's really only four things here there is a h1 let says click the button below there's an h3 that says our initial score because of our score starts at 0 we have an image that's the picture right there and then we have this clicker now the first thing that we want a program is we want to make it so when we click this button it just counts how many times to click that we want to keep track of that all right so first we have to think like okay if I want to make this button right here clickable what do I need to do well step one would be to start by making a variable and we can call the variable whatever you want you can call it I'll call it clicker button and that really is remember you could call this your mom the name of the variable but this is important this has to be perfect then we're going to say document dot query capital S selector and then in here we're going to put the ID of the button right since we want to make our button clickable we need to get the ID of the buttons that's what we're working with this so the ID is clicker so let's bring that over here clicker and it's really important you like whenever you want to make something work or clickable you should say what is the thing that I wanted me clickable right what do I want to change and that's what you put in this ID so the next part is to add animal actually the next part is to console.log it console.log everything make sure you're doing this right so click or button and we go here and we're gonna open our inspect and should say hi and then you just have like that HTML for that clicker button right that's the button right there so we got those two things things are looking good if this says null and look out for that you spelled something wrong okay not to be all accusatory but you did so the next thing is to put clicker button and we're gonna add an event listener to this now there are many different kinds of event listeners as we learned last time but what we're listening for is a click here right there's click there's mouse over there's no set but we're listening for a click and then what we're gonna do is we're gonna run an anonymous function that looks like this alright so what do we want to happen well I joined make sure my buttons weren't working so let's just say this we're gonna say like console dot log I work let's make sure our button works and so now we go back we click our button it says I work things are going well alright so now let's add on to this now the next part is I want to counter I want to count how many times I've clipped to do that we need a variable that will track the amount of clicks so at the top of our page alright I'll just put this right under the console log let's put this at the top of our code let's say let's count and this is just our counter or whatever you want to call it let count equal zero so what we did was that we declared or we defined a variable called count and inside of this variable called count we're going to store the number zero all right this is important right we have to tell the computer we want to create something called count and want to start at zero so now we can like do console dot log count that's name of the variable right there right so let's console log it and see what we get when I click it you'll see that I get I work and then zero right because count is equal to zero but now we wanted to actually start increasing so let me just take this out that's no longer important and what we're going to add is how do we make count increase there's two different ways I'll show you the first way is this you can do count equals count plus one so that means I want you to take the count variable and I want you to add one to it so up from zero let's do 0 plus 1 which is 1 and so now that will increase it one time every time I click so let's try that if I go like this oh let's reload this oh it's it work one two three four five six seven eight nine ten eleven twelve thirty forty fifty so it's working it's looking beautiful right it's going up by one now this is actually a long form there's an easy way to do this this is just something you know this makes life easier you can also do count plus plus there's no equal sign there I saw the people doing that just count plus plus which means I want you to increase by one that's a simple shorthand way of doing it and you'll see that that works exactly the same now the first thing I want is I want to actually show the score on the screen that's important the user doesn't see the console right they don't know what their score is if I press this they feel like well nothing's happening my game so we need to show up on the screen and that means we need a little bit of what was that that's right Dom manipulation right we want to edit this document instead of saying score zero want to say score one then score two is scores three and if this is our webpage that means we are changing the inner HTML of one of our objects or our elements on the page so let's look into this how can we do that well go over here and let's see where do we keep our score we keep our score right here so if we want this score to start increasing what we need to do is actually edit the inner HTML of this h3 tag so the first we're gonna do is we're saying if we want to edit this if we want to do some DOM and a Dom manipulation with this h3 we need to first set up the variable and store this h3 tag inside of it that should always be our first thought like okay go to JavaScript set up a variable and store that thing that I want to change so we want to change this h3 tag let's go over here and right under our clicker let's do this we'll say let scoreboard remember you call it anything this is the important part document that query selector and what do we want to change well let's go back check your index the ID of that is score so we have to tell the computer store store score in there and then just make sure that you've done it correctly so console dot log scoreboard spelled correctly again all right if we look at our thing if we go to our console let's just make sure everything got console.log correctly sure enough we got the button and we got the scoreboard all right looking good there we're looking good now how do we increase it so it shows up on the screen well very simply we're gonna go to scoreboard dot inner HTML and we're going to say we want this to be equal to count right we're gonna set the inner HTML of our scoreboard to whatever cowntess and if you look now let's check this out ready for this if I go up by one it says one it says in the console and it also changes the inner HTML two three four five six seven eight and so on but if you're like me you're saying like actually there's something kind of knowing about that and see if you can notice it like what's annoying well maybe you saw it but that score goes away and that's kind of annoying that those scores should stay there to tell the user it's a score and then it should say the number and so what we have to do is actually use this thing called interpolation so this is important so we're not gonna just do count what we're gonna do is we're gonna actually do a little more we're gonna like do this thing called interpolating to do so we're gonna start over again and what I'd like you to do is go look at your Escape key on the top left hand corner groups keyboard and press the thing right under it it looks like a squiggly line that's a back tick you're going to need to use pack ticks to make this work no quotes backticks then we're going to say we want what do we want to get hold on I got this we've got to say score : all right and then what we have to do is to actually interpolate to like put this a variable in there you do dollar sign and then curly braces and then you put count the name of the variable in there you'll see this so now we go back here watch what happens uh-huh see what's happening there oh yeah that is good that's looking great so the score is going up appropriately right because it's saying the score and then it's adding to it or it's interpolating whatever the count is all right this is looking great now we've got our counter going so our games looking pretty good the last part is to make it so like when I get to ten it tells me that I want because I want the user to know like you won right you have to win a game like the game is click it ten times you win so let's check this out to make this we're gonna have to use this thing called a conditional statement the conditional statement means an if statement so like if I get to ten clicks then I want to do something the way you make it a conditional statement or an if statement is this you're gonna need three things you need the word if you need parenthesis any curly braces all right and you'll see this is error here and it's because we didn't put anything in our if statement so the way it works is that you write the word if inside these curly braces you say what do we want to evaluate to be true so like what what condition are we looking for and then inside the curly braces is what do you want to happen so in this case what do we want to be checking for we want to check for wing count is double equal to 10 so when count gets to 10 and we use the double equal sign to check if two things are the same so when the variable count is double equal sign 10 when they are the same we want something to happen and a quick way to show that you had something happen we just can use this this thing called an alert and we can just say like what let me go back here click it be four or five six seven eight nine ten look it says I want that's an alert pretty cool right but once again I think alerts are kind of like Genki that they usually see those on like spam sites that it doesn't look really good really what I would like to do is have this image change I want to do a little more Dom manipulation I want to change this image to something of winning so let's Google an image we're gonna say winning okay and oh that's yeah that's why when you use for this one so let's go back here and how do we get winning to show up so once again go to your index in like what do we want to change on this page well I want to change this image you'll notice it's not in a div so I can't do it using a div but there's an easier way to change images what I can do is actually take this image and change the source of it alright and so right now the source is this well what don't we want to change the source we just changed something else we'll down manipulate it well first we need the ID so just think yourself I need to make a variable I want to store like that HTML snippet with this ID in it so the ID is pick so we'll go here and we'll say let winning pick equal document dot that's document document top query selector say hashtag pick which was the ID remember I'm just you always have to look at your ID and make sure your IDs match up and I'm just gonna trust that it wins but you should console.log winning pick make sure that you get that little HTML segment there that guy let's tick um yeah sure enough we got it here now to change the source of it right underneath this alert let's just say this we will say winning pick dot SRC more we're gonna change it to something new so we're going to take that witty pick image and we're gonna change the source of it remember this only works if this is an image this you couldn't do this on if it has to be we're changing the source of an image and then we go over here let's copy the image address as we know how to do let's put it in here boom and let's see what happens when we try it so ready one two three four five six seven eight nine ten says you won okay boom Zacky geez he's winning alright guys that is it for this lesson a big thing here is don't forget about your if statements you'll be needing that for your exercise on this lesson tip up up up up up it peace stay true to yourselves back