Javascript Fun: Build a Guess The Number Game!

1. Welcome To The Class!: Hey, welcome to this class. If you are a web development beginner and want to just jump in and build some fun projects, you've came to the right place. The idea behind these series is to show you what you can do with regular HTML, CSS, and JavaScript. We're not going to be using any frameworks, any boilerplate, any libraries, or any templates, instead, we're going to be building everything completely from scratch, step-by-step, to show you how these three technologies all work together. This class's project is going to be a guess the number game. A computer will generate a random number between one and 100, and then we can select if we want to try to guess this in either five or 10 attempts. When we select one of these options, this [inaudible] our game view where we can add any guess into this input that will replace a value such as 50 inside here. We see our guess is too high. This now means since our guess is too high, the correct number is now in the current range of 1-50. We can then add a second guess. This is also too high, so this now means our range is between one and 25. Let's go for five, it's just too low, 12, and we'll begin to narrow down this range between 12-25. As we're making these guesses, we are also logging the number, the previous attempts, as well as the previous guesses so we can keep track of things as we go. We now have six more attempts to get this right. Let's go for 20, 22, and on this occasion, the correct guess was 23. You see we've got this correct in eight attempts. We then have the option to start a new game which will take us back to our start screen. This game is constructed completely from scratch. We use regular HTML to construct all of the user interface. After this, we take advantage of CSS for styling, positioning, and layout. Then we introduce JavaScript to make our game fully interactive. We handle all of the functionality with regular JavaScript. We need to capture the user's input. We need to generate a random number between one and 100, and then compare this to the user's guess. We need to log all of the previous attempts. We need to add difficulty settings. We need to handle what to do when the game is over and also update the range slider too, though the user can narrow it down after each one of their guesses. So this is what we're going to be building. I'm excited to teach you this one. Let's jump in it to the first lesson. 2. Share Your Work On Skillshare!: When taking any course, it's really important to not get in a habit of following along just for the sake of ticking off another lecture. Take the time to process each lesson, review the code which you write, and think about how you might approach these solutions yourself. With this in mind, this class is project-based and this gives you the opportunity to really make something personal and unique. You don't need to get too lost and diverted away from the class and you can even take a step back after you've finished the class and come back and make some project changes afterwards. This will really give you a good chance to practice what you've learned away from the class. Also remember to share your project too here on Skillshare and only will I check it out, but it will also inspire fellow students too. For more information on the class project head into the project and resources tab where you can not only upload your project, but you can also see other class projects too. With this in mind I look forward to seeing what you create and upload here on Skillshare. 3. Creating The User Interface: Hey, welcome to the start of this new game and this new section. This is a first look at what we're going to be building. It's a random number game, where the user is going to generate a random number between 1-100, and then either at 10 attempts or five attempts, whichever one the user chooses. We'll then have a chance to guess which number the computer has generated. So 1-100 is a pretty wide range, so during the game, we also get some pointers, let us know if we are too high or too low. Our guess of 50 is too high, meaning our current range is now at 0-50, and the number is somewhere in this section. We also see the number of previous attempts at the bottom and we also make a log of the previous guesses so the user knows which ones they have selected in the past. Let's go for 20, 10, and 1. Now, our number is between one and 10. Let's go for 5, 2, and now we've got this in six attempts. The number was two. Then we have the option to select a new game and start again with the easy or the hard mode. As ever, we're going to begin by creating the user interface with HTML. We're going to create this section here, which is a wrapper, and then inside, we are going to create two sections. The first one is going to be the wrapper for everything we see on the start screen just here, including the text and also the two buttons. The second section is going to be the game area which you see here. Let's get started over on the desktop by creating a new project folder. We want to call this one Guess a Number. Then drag this over in the text editor to open this up. We can either create a new file by clicking on this icon just here, or use Command or Control N to create a new file, which is going to be the index.html. Let's add some HTML structure to this document. I'm going to use the Emmet command, which is HTML:5. The document title of guess a number game. Then down in the body, we'll create our main section, which is the wrapper for both of our start screen and also the game area. We'll create our div, which is going to be the welcome screen. Let's give this an ID of welcome screen, and also just after this, we'll create our second section. This one will have an ID of game area. Let's start in the very first section, which is the welcome screen, and this is the section which you see just here. We'll begin at the very top with a heading. Let's add this inside of our first div. The text is, guess the random number. Then we're going to add a break tag, just to place the next line just below, so between one and 100. Then just after this, I'm going to create a section which is going to have the difficulty title and also the two buttons. The first one is going to have the text of select difficulty setting inside of the P element. Followed by a div which is going to be the wrapper for both of our buttons. Inside of this in the CSS, we're going to give this a class, which is equal to button-wrapper, and then inside we can place our two buttons. The top button is for our easy setting. We can add the text of easy and also 10 attempts. Followed by a second button, and this one is for the hard mode, and this is five attempts. Let's open this up in the browser and see how this looks. Let's copy the path for our index, and then paste this into a new tab. A pretty simple start screen. We just have our text and our buttons, and then we're going to move down to our game area just below. If we click on any of these buttons, we're then taken to our game area, which we are going to begin to construct now. But at the top, we're going to start with the text of your guess. But if you remember from the demo early on, we also do have a button at the top, which is going to be hidden during the game. This is going to allow us to start a new game once the game has ended. The very first element we're going to have inside of our game area will be a button, and we'll show and hide this inside of our JavaScript. We're going to create an ID of new game button. This button had the text of new game. After this, we'll add a section which is going to be the wrapper for the text at the top of your guess and also the input. A level 3 heading with the text of your guess. This level 3 heading is also going to be replaced during the game to let the user know if their guess was too high or too low. To do this, we can also add an ID, so we can tag this with JavaScript, and the ID I'm going to give this is text output. Followed by our input just below, with the type of number. The ID which is going to be equal to input box, which we'll use later on to grab the user's input. Then since our game is between one and 100, we're going to add the min and the max attributes. So the minimum of one and the maximum value is 100. Let's take a look. But now this is also going to be on the same page since we haven't used JavaScript to show and hide any of these sections just yet, but that's completely fine for now. Back to our game area, and just after the section here, we're going to move down to our range section. We've got the text of current range. We'll then update our section just here as the user adds guesses, and then also a section for the progress bar. Let's wrap this in a new section, and the P element of current range, followed by a span element which is going to be for our text, which is currently 1-100. This text is also updated during the game so we can add an ID to this span. We can change this with JavaScript, and the ID I'm going to go for is range output. After this, we're going to create our range area. Now, this is going to be created by using a div as a wrapper, and then nested inside, we're going to create three sections. Let's add some guesses inside of here. So let's go for 50 and 90. We're going to have this green section in the middle, which is the current range, which the user is in between. Currently, our number is between 50 and 90, so we want to have this space section just here. Then either side we're going to have a high and low section to fill in the rest of the space. This div here is for our wrapper and we'll give this an ID of range. Then nested inside, we're going to create three separate span elements. The first one is going to be for our low section, and let's duplicate this two more times. The middle one is our green section and we'll call this space, and then at the end, this is high. This will be our first red section on the left, the green section in the middle, and then the red section over on the right. Our final section right at the very bottom is going to be for our stats. This is going to be logging our previous number of attempts and also the previous guesses. The first of this section is going to be stats, and then nested inside, this will have two divs. The first div is going to be for the number of previous attempts and we'll give this a class of info, with the text of number of previous attempts. We'll then have a span just afterwards and this is going to be for this number which we see here. For now, we'll just add a value of zero, and then we'll update this in JavaScript later on by selecting the ID of attempts. The section below is just going to be pretty much the same, so we can copy this div section, paste this in. This also has the same class of info, so it has consistent CSS. But this time, the text is your previous guesses. The ID is also going to be guesses, and then display a dash inside the browser. Let's check this out by reloading, and this leaves all of our HTML content in place, ready for our styling in the next video. 4. Styling With CSS: Let's now get to work by creating our style sheets inside the sidebar. A new file alongside our index.html, which we're going to call the styles.css. Close this down. We can also link this up in our index inside of our head section. Create a link with the href of styles.css. Let's start with the HTML inside of our style sheet. Inside of here we're going to introduce our font size. I'm going to set mine to be 10 pixels, and also a default on weight, and I'm going to use 300. Just before we go ahead and create the rest of our styles for this project, I'm going to introduce something which may save a bit of time. Well, this is going to be a plugin called Live Server, and this is going to save us refreshing the browser each time we make any changes. We can make changes in our code, save the file, and this will instantly update. This is completely optional. You don't need to install this plugin, and if you're using a different text editor, you may not have the same one available. To introduce this, we need to go over to the sidebar. If you're using a Visual Studio Code, click on the "Extensions", and then use the Search at the very top. We give a search for the Live Server, and then inside here you may have multiple options. The one I'm currently using is this one just here, and then you will need to install and enable. Once this is enabled, you should see a button down at the bottom which says Go Live. You can then click on this to start the Live Server, and this will then open this up inside the browser. If you don't see this icon at the very bottom, you can go to View, Command Palette, and then do a search for Live Server where we'll have the options to open this up with our Live Server. This is completely optional and you can continue with the same way we've been using previously. But now if we go into our next [inaudible] , which is the body, I'm going to set some properties inside here. Let's set the width of our body to be 90 percent of the viewport. We can center this with margin zero auto. Then I'm going to set a background which will be a radial gradient. We're going to use this to blend between two different colors. This is going to blend in a circular motion from the center right out to the end of the page. The radial gradient is going to take in two values. The first one, I'm going to use 343e63, and then separated by a comma the second one is going to be 2a3352. Give this a save and we instantly see the changes inside the browser. After this, let's go for our main section which is the wrapper for all of our game. We can create a wrapper which is going to set the text alignment to be in the center, a background-color f8f1e9, a border which is going to wrap our game on the left, the bottom, and also the right. First of all, we need to set the border color and also set this to be a solid line. We can then set this to go on three different sides. Our border is going to be a solid line, and our color, which is going to be equal to ef7b54. If we save this, currently, we see the border is placed on all four sides. To select this on multiple sides we can use the border-width property and then enter the width we want the border on four different sides. The first one is the top. We want zero on the top, eight pixels on the right, eight pixels on the bottom, and also for the left too. Let's make this section a little taller with the minimum height of 80 percent of the viewport height. We can also round these borders on the bottom left and right with our border-radius. The top left on the top right is zero, then three rems on the bottom right, and also at the bottom-left. Also, one rem of padding to give it some spacing inside of the section. The text-color value I'm going to use is going to be 1f2933. So this is our main section and now we're going to target some of the elements which are nested inside. Starting up at the very top of our welcome screen we have this level 2 heading. Then we can also select our text elements too. First of all, let's go for our h2. We can set the font size to be a little larger, so 2.2 rems. Also, we can create some spacing on the top and bottom. I'm going to give this quite a bit of spacing on the top and bottom, and then zero on the left and right, then our text which is inside the p elements. We can also increase the font-size to be 1.8 rems. Sticking with this welcome screen section, next up we have this button area which has a class of button-wrapper. Currently these two buttons are placed side by side, so we can change this by setting the display type to be flex, the flex-direction to be column. Next, we can target the individual buttons with the button element. I have to move the default border with none. We can also set the cursor to be a pointer once you use a hovers over this button. Then the background-color for our buttons. Let's go for a hex value. This is going to be a green color with the shade of 83e1d0. Some padding on the inside of the button of two rems. Then we're going to apply some border-radius on the top of our first button, and then the bottom of our second button. This is going to give us this rounded effect we see on the buttons just here. For now we'll target the very first button inside of this selector. We can set the border-radius on the top. So one rem on the top-left, one rem on the top right, and then zero on the bottom. Currently this is going to apply to all of our buttons. Now we can override this by selecting the last-child. Last-child is going to target the last of all type of buttons, which is inside of this wrapper. If we had a third button, that would target the third button, if we had a fourth button, that would target the fourth one, and so on. We only have our two buttons, so last child is going to apply to this hard button just here. We can override the background, and I'm going to make use of the same red color which we have for this border. We'll also use the same red color for our range slider during the game too. This means we're now using a same color multiple times. We could go ahead and include the same color, but we can also use something which is called CSS variables also known as custom properties. Just like when using JavaScript, we can use CSS custom properties to create a variable and use this multiple times inside of all file. The way we can do this, if we go to the very top, I'm going to create a section which is going to contain all of our variables. The first thing which I'm going to do is to target the root. This is going to allow us to create our variables which we can use across our whole page. The way we create a variable inside of CSS is by using the double dashes. We then use a variable name such as green, and then we can select our value. The green value which we are currently using is this one just here for our buttons. We can copy this, paste this in, and add a semicolon. We can also declare our red color, which we are going to reuse, which has a value of ef7b54. Next, we can also set the color for our background, so dash, dash background, and this is going to be the color for all the main section. The main section, if we scroll down, there is one that's just here, we can grab this and set this as a variable. If we wanted to, we could also set the colors for our radial gradients. Let's copy these, gradient-1 and also the gradient-2. Now we have our variables declared up at the very top. How do we now use these in our project? We use them in place of our colors, so let's remove these first radial-gradient. We then set these inside of a var function and then we declare the name which we gave it just above. This one was gradient-1, and then the second value is going to be gradient-2. Again, inside of our var function. Save this, and now our gradient, now being reinstated. Down to the main section, we can replace our background also with our variable. You border. We also have this stored inside of a variable, and this one is color red. It still works fine inside the browser. Now if we scroll down to our buttons, we have the green variable, so dash, dash green. The background color for our last-child or our second button is going to be the red variable, which we also set just above. The border-radius for this is going to be different too. We can override this with the border-radius by setting the top to be zero and zero, and then the bottom right, and also the bottom left to be equal to 1rem. We also have the new game button just here, but we'll hide this with JavaScript very soon. Now down to the game section, let's go for our level three heading, which is the text of your guess. This will also be replaced later on to be a message to the user. All we're going to do for our level three heading is to set the font size to 2rems. Next we have our number input. This is the only input which we'll have on the screen, so we don't need to be more specific about selecting the type. All we're going to do is to set the border to be one pixel. A solid line, which is going to be light gray. We'll make it blend in with the rest of the background by setting this to be transparent. Margins give some space in outside of our elements of 2rems on the top and bottom and then zero on the left and right. Padding for some internal spacing of 1rem, this is the top and bottom, and then zero on the left and right. Your width, 16rems. Then we can also set the text align to be in the center. This is going to be the text which the user enters inside of this field. This will push this into the center of our elements. Below this we have our range section, which is the wrapper, down at the bottom here, which contains our three spans. We're not going to do a lot with these span elements in the CSS. We'll leave these until the JavaScript section later on, but for now though, we can set the range section to have a certain height and also the background color. This was an ID. The display type is going to be the flexbox. These will appear across the page in a row by default. The background, to begin, this will be a full green color. We can make use of our green variable. A height of 50 pixels, a padding value of zero, and then also some margin. I'm just going to set the margin to be zero on the top and right, 4rems on the very bottom, and zero on the left. This is just to give us some bottom margin. It's this basis from the start section just below. Next, we're going to make the text of 1-100 a little larger. This section has the ID, which is going to be range output. The font size, 1.6rems, and this is all we currently need to do for this range section. We'll do the rest over in our JavaScript. Down below this, we have our stats section and this has the class of stats. This is for our wrapper. All we're going to do inside here is to set the text-align to be on the left, and then we can take care of our two sections inside. Inside of our index or html, we gave both of these sections a class of info. This is so we can make use of the CSS flexbox, just like on the final version, where we'll place both of these items alongside each other. We'll add some spacing in between and make sure these are lined across the page. Our info, the display type of flex. We can then use justify content to add the space between. Currently, these are not lined up correctly across the page. We see that this is a little higher. To fix this, we'll align our items on the cross axis into the center. Both this value of zero and also the dash were contained inside of these span elements. To fix this, we can tag our info section and then any span which is inside. The font size, we're going to go for 1.6rems. We're almost done for our styling for this project. Just before we finish off, let's target this button just here, which is going to only appear at the end of the game. This has the ID of new game button. All we're going to do is to reset the border-radius to zero. Then finally, we can add a media query for the larger sizes. Our media, the minimum screen width of 800 pixels. The only thing I'm going to do here is to restrict the body width when this gets larger. On the larger screens, I'm just going to set the maximum width to be 60 percent of the viewport width, just so it doesn't look too overstretched. The body section, we can set the width to be 60vw. That's it now for our styling. You can of course change things if you want to. Next, we're going to move on to our JavaScript section and begin to handle the functionality for our game. 5. Starting Our Game: It's now time to add our JavaScript to our project. Over in our text editor, let's create a new file in the root of our project, called the "script.js". We can go over to our index page and link this at the bottom, just above the closing body tag. So the script and the source is going to be equal to our "script.js". The first thing we want to do when the game loads is to generate a random number, which is between one and 100. We can trigger a function as soon as the browser loads up these documents by adding a onload event handler to the body tag. As soon as the page has loaded, we can trigger a function and I'm going to call this "init". This is effectively initializing our game as soon as the browser loads. Over to our script.js, we can now create a variable to store this value inside. I'm going to call this the "computerGuess". I've declared this outside of a function, so it's available to use in any other function. If we were to declare this inside of a function, this variable would be scoped to that particular function. Meaning, we couldn't access it in any other parts of our program. Let's create our function, which is going to be our init function. This doesn't take in any parameters. Then we need to set our computerGuess to be equal to our random number. We can do this by selecting the Math.random, which will select a number between zero and one. We want this to be between one and 100. Therefore, we can multiply this by 100. This will now leave us with a random number, which begins with a zero, all the way through to 99. However, we want this to be between one and 100, so we can add up one onto the end. We also need this to be rounded, so we can round this with Math.floor. Let's put this into place and we can make use of the Math.floor method and then pass in our number. This will round down each one of our numbers so we have a number between one and 100. Let's test if this is working. We can log the computerGuess and this should load up each time the browser begins. We've got an error. So inits, we need to make sure this is spelled correctly. Now, each time we reload the browser, we get a random number. We can see this inside the console. This is a good start for our project. The next thing we need to do is to show and hide some elements on the screen. When this page first loads up, we don't need to see the new game button, it is just going to be there at the very end of our game. So let's remove this. Select our document by the ID, and the ID which we want to select is the "newGameButton", which we can see just here. I'm going to move this by setting the CSS style property of display to be equal to a string value of "none". So our button is now removed as soon as the game loads up and we also want to remove this game area too. So let's duplicate this. But this time the ID which we want to select is going to be equal to this game area. You may be thinking, why not just hide the game area, which also includes the button? Well, this is because later on in the game once it's finished, we still need to keep this game area in place, but we are going to reinstate the button. The ID which you want to select is the "gameArea", which now leaves us with the start screen. Good, we've now got a random number. We're now hiding the game area. Next, we need to create a function to actually start the game. This is going to involve hiding this welcome screen. Then showing the game area which we just removed, which will effectively give us two screens. To do this, we'll create a function and want to call this the "startGameView". Once the game has started, we want to remove or hide this area. If we go back to our index page, this area has the ID of "welcomeScreen". So document.getElementById. We want to select the welcome screen. Just like a [inaudible] make use of the style property of display and set this equal to "none". Duplicate this line and the next thing we need to do is to reinstate the game area, which we've had just above. So changes to the game area and to make this appear on the screen, we need to change the display type to be "block". Next, we need a way to actually call this function once the game starts. Well, the way we're going to do this is by using our easy and the hard buttons. For now, both of these buttons, we're just simply going to call the same function, but we'll change it later on so the user only has five or 10 attempts. Let's create our functions. Our first function is going to be for the easy mode. Then our second function is going to be for the hard mode. All these will do is just call our "startGameView" function. So we can add these into both of these functions. Now to call these functions, we do this in our index page. Let's go to our buttons and we'll add it on click event handler. A function which we want to call once the button has been clicked is easy mode. The second button is going to trigger the hard mode function. We should now be able to play this game inside the browser. Let's click on easy. This now hides the welcome screen and shows the game area. Reload this by the hard button. This also takes us to the game section 2. Now, we have a way to begin our game. In the next video, we're going to move on to capturing the user's input and also comparing this with our random number. 6. Capture User Input & Compare: Now we have a random number generated and stored inside of our computerGuess. We're also going to capture the user's input, which they add into this number field. Since it's going to be multiple choices, we're going to store this inside of an array. So we'll say let our userGuesses to be equal to an empty array to begin, and then we can scroll down and create a function which is going to compare the user's guess with the random number. This function is going to be called compareGuess. The point is going to be to grab the user's input from this box inside of our index page. This input has the ID of inputBox. Let's grab this with "document.getElementById". Then we can select the value which the user enters. Just like early on, we also need to convert this into a number, so we can cut this out. We can use the number function and then paste this in. Finally, we can store this inside of a constant called the userGuess. Now we have this guess. The next thing we want to do is to push this to our user guess' array. Let's access our variable, and then we can push a new value to our array. The new value is our userGuess. To check this is working, we can also display this inside of our user interface in our index.html. Down at the very bottom, we have this guesses section, which is going to output any previous guesses. Back to our function, let's grab this one by the ID, and then set the innerHTML to be equal to userGuesses. With this now captured, the next thing we need to do is to call our compareGuess function over in our index.html. Let's take a look for our input, which is just here. We can call our function each time the user adds a number and then hit enter by adding the onchange event handler. The function name is compareGuess. Over to the browser and we can check this is working. Starts our game, add the values of 40, 89, and our guesses are now displayed at the bottom. There's various different ways we can add a space in between each one of these, but a really simple way we can do this is by going over to our script. We can create a space with an empty string, and add this to our guess. Now if we add a number inside here, 45, 78, these now have a space before each number. We are now in a position where we have the random number and also the user guesses. Now we need a way to compare these two values and check if they are right. Let's do this in the compareGuess function. We're going to create three different outcomes. The first one, we're going to check if the user's guess is higher than the computer's guess. We'll then add a second condition of "else if", and this will check if the user's guess is less than the computer's guess. Finally, we'll add an "else" section. It's just for if the user's guess is equal to the computer's guess. First of all, let's deal with the user guess being too high. Now, all we're going to do is to output a message to the user, so "document.getElementbyId". An ID which we want to grab is our text output. This is our level three heading up at the top which is going to replace the text of your guess. To do this, we set the innerHTML, and it can be a string of texts which says, "Your guess is too high." We also need to clear this form input. Currently, when we add the value inside here and then hit enter, the value still stays inside here. So let's go back and add this inside the "if" section. Currently, we have the input box just here. So we can grab this line of code just here, bring this over, and we can set the value to be equal to an empty string. The next section which is the "else if", this is going to check if the user's guess is too low. We can pretty much do the same inside this section, our message is going to be too low. Finally, in the "else" section, we can also add this in. We don't need to reset the input field since the game is over. All we need to do is to set a message which is going to be "Correct." We can now go ahead and test this inside the browser. But just before we do, let's grab our computerGuess and we can now put this inside the console. Let's do this in the "init" function, so we see this as soon as our game loads. We have our computer guess which is just here. Let's do a console log with this value. Over to the browser, we can now right-click and "Inspect" to open up the console. We now have a value of 83. Let's click on easy. If we go lower, let's say 10. Oops, it says it's correct, so let's see what we've done. Back to our function. So when the userGuess is greater than the computerGuess, userGuess, this ones to be a computerGuess. Let's try this one more time. We have a value of 25. So we'll go lower, we'll say 10. Your guess is too low. Now we'll go for 50. Your guess is too high. Let's try 25, and we get the message of correct. Now we've successfully compared the user's guess with the random number. 7. Logging Previous Attempts: Let's now move on to logging the users number of attempts. Now the reason we're doing this is because we have a easy and the hard mode to begin our game. Once the user reaches either five attempts or 10, this is how we know the game is over. We can also log this number of attempts just here too, so you can also see how far into the game you are. To do this, let's go and create a variable up at the top of our script call it attempts, and initially set this to be zero. After this, we'll then need to increase this value by one each time the user has entered something into the input field. Down to our compareGuess function, go to set this just for our if statements. We need to increment this attempts variable by one each some the user has made a guess. We can do this with attempts++, and this will increment the current value by one. Currently this is value zero and for each guess it will go to one and then two and so on. We then need to update the DOM, which is our section just here. If we go to our index page and then scroll down, we need to update the span with the ID of attempts. Let's grab this by the ID and then set the inner HTML to be equal to our variable which is attempts. Okay, let's give this a try, if we go to easy mode to begin, we have 10 attempts to this, so we can add any numbers inside here here. This is increased with each guess. We will make sure that the player can not go over the maximum number of attempts very soon. But for now though, we're just going to simply update the message to the user. Inside the else section just here, this is when they get their guess correct. We can also add to this section and let the user know how many attempts they got it correct in. We can say you got it in, and then add our attempts variable, and then also add to the end a string of attempts. For example, this would say you got it in four attempts and so on. Let's give this a go, let's try the easy setting and see if we can get is correct, so we're too high, 30, 10, 20, 15, 12, and there we go. The correct number was 14 and we've got this in eighth attempts. Good. With this now all working. Let's now move on to adding our difficulty settings in the next video. 8. Adding Difficulty Settings: Onto our easy and our hardball buttons. We are now going to restrict the number of guesses the user can make to be either 10 or five. First of all, let's go up to the top of our script, and we're going to create a variable to start us in. I am going to call this the maxGuesses, and this is going to be initially not set to any particular value. It's simply because we want this to be either set to five or 10 depending on which button the user will press. We can do this one when we start either the easy or the hard mode function. The easy mode, we're going to set the maximum guesses to be equal to 10, and then in the hard mode, we'll set this to be five. Now we have all of the information we need. We have this attempts variable just here, which is the number of attempts the player has had. We also have the maximum variable. We can now compare these to check if the user can carry on, or whether the game is over. Let's do this. Let's go down to our function where I'll put the message to the user. This is compareGuess, and we only want to go ahead and run this section if the number of attempts is less than the maximum number of guesses. Let's put this all in place, and we create a new if statement, which is going to check if the attempts is less than the number of all maxGuesses. Inside the curly braces, we can now paste in the section. This if section will only run if they have not reached the maximum number of guesses. If they have reached the maximum, this is therefore the last attempt. To handle this, we can create an else section just after this. This else section is the very last attempt, so this could be the 10th attempt or the fifth attempt on hard mode. Even though this is the very last attempt, we still want to decide if the players got the number correct or not. We can do this by grabbing this same section as above, and we can just alter the messages. Make sure you grab everything inside of the if section, so the else, else if, on the if section. Let's copy this. Add this into our new else section. Since this is the last go, if the user's guess is too high, we're going to change this message which is displayed. We're going to say you lose. You can then add a break tag to add this to the next line, the text of the number was, then we let the computer guess variable onto the end to let the user know what the number was. We don't need to reset the input box since this is the last guess. We can also remove this from the else if section and then change the message inside of here too. This else if section is when the user guess is too low, meaning they've also lost the game. We can grab this exact same message from above, and then replace this one just inside of here. The third condition is when the player has got the correct number, so we can leave this message as it is. Let's give this a trial. Let's go for the hard mode to begin. We have five attempts. Fifty, too low, 80, too high, 87, 85, and we've lost the game in five attempts. Reset and go back to the easy mode. Let's try this out, too high. Once we get to 10 attempts, this game is also over too. This now loses with a fully-functioning easy, and hard mode. 9. Handling The End Of Game: There's a couple of things we now need to do to handle the end of the game. When we see the end of game screen and just like we do over on the right. We also want to re-introduce our newGameButton. This is one over in our index-html. This one just here, which is going to basically refresh the browser, so we can then select our game mode. We're also going to make sure once the game is over, that the play can no longer add any values into this input field. If we keep going inside here, we can still enter values, and they are still logged as our previous attempts, and also pushed to the array. To do this, we're going to go over to our script and create a game ended function. Over the top, just below our variables is where I want to create mine. The function name of gameEnded. Step 1 is going to be to re-introduce our newGameButton. Index, this is the ID of newGameButton. We can do this by resetting the display type. Just below here, we set this newGameButton to be the display type of none. Let's copy this line and add this into our gameEnded function. All we need to do is to change the display type to be in line. Just after this, we're also going to add a new attribute to this input field so this is one just here. We're going to set this to be read-only as soon as the game has ended, so the user can no longer enter any new values. The first step is to grab these elements and the ID, which we're going to grab this by. Here's our inputBox. We can see this over in our index page. This is our input and the ID of inputBox and to add a new attribute to our elements, we can use a method called setAttributes. The first thing we need to enter is the attribute name, which is read-only. I'm going to set this to a value of read-only. We now need to call this game ended function once we complete the game. Scroll down to our compareGuess function, which is just here, and our game is effectively over in any of these sections where we call either correct or you lose. Starting from the top, the first correct section or you lose is this one just here. We can then call our gameEnded function. Let's copy this and keep going down. We also have YOU LOSE section here, which means the game is over. We can also call our function, we have a YOU LOSE section. The game is over, and finally, we have a correct section down at the very bottom where we can call the same function. Over to the browser, and let's check this out. We'll go for the Hard mode, and let's quickly enter any value used to end our game. We lose, we see the new game button, and we can now no longer had any new values into our input field. However, now if we try to click on the new game button, we don't see anything happen inside the browser. All we're going to do to this button is to enable it to reload the browser, which is going to take us back to the start screen. Over in our index.html, we can add onclick event handler to this button. In the opening tag onclick. I'm going to set this to a new function called newGame. Back to our script. Let's add this just on the gameEnded. This was newGame, and the way we can reload the browser inside of our code is by selecting the window.location, and then call a method called reload. Let's check if this is working and end our game. At any random values inside here, we now see the end screen. Click on the newGame, and we now taken him to the start screen. 10. Creating The Range Section: In our index or HTML page, we created this range section early on. Now, this is going to update you and again to show the player, the number range they have left to choose from. We going to do this by updating these three sections. We'll be using JavaScript to set the CSS such as the margin, and also the background color, O2O script file and we can now set this up. The first thing I want to do about the very top is to set two new variables. These variables are going to be the low and also the high, and these are going to be updated during the game. When we first begin our game, the low value is one, and the highest value is 100. Let's set these defaults up, high of 100s. It's a handle, all this functionality, we're going to create a new function, and this is going to be called updateRange. To update our range slider, we need to access all three of these sections. Let's crop these first by the ID, so getElementById. The first one was low, and so is inside of a constant called lowValue. We can adjudicate this two more times, and the second one is the space. This is the space between the high and the low values. The third one is high. I call this the highValue. Both this lowValue and the highValue will be the red areas which we can see if we go into the game. This will be the low section over on the left, and then we'll update the highest section over on the right. This space in between is the area which the user still has to choose from, and this is going to be a green section. To do this inside of our script, we're going to update these CSS values of the flexbox, and also the background color. To make a space for the low section on the left-hand side, we need to take into account the value of low, and we can use this as a percentage to set the flex value. Remember when using the flexbox, if all three of these sections had an equal value of one, these would all try to take up an equal amount of space. However, though, this section is not going to be equal since it is going to be based on our variables. Let's begin with our lowValue variable, we can set the style property or flex, and this is going to be equal to our low variable, and since this is CSS, we also need to add a string onto the end, which is the percentage symbol. This would also be the same for any overvalues too, such as a pixel. We're also going to give this lowValue a background color too. Set the style dark background to be equal to our background color, which is going to be ef7b54. We're going to do a pretty similar thing for our next two sections, so let's copy these two style sections. I'm going to paste this just below our space, and also the high section. The space section is going to be everything in between. To get this value, we are going to access the high variable, and take away the low which is going to give us the space in between. The background is going to be our green color which is the value of 83e1d0. The final one is this value of high down at the bottom. Now, we can't just simply output the value of high. Now, this is because if we take a look at our progress bar, if the users' high guess for example is 70. If we add this as a value of 70, this will create a red section all the way from the left, right across to 70 percent. However though, we already have the low sections and the space in between, so if this was going to be a value of 70, all we want to do is to create a red section for the remaining 30 percent right at the end. The way we can do this is to take this away from a 100, and this will give us the remaining space to fill in the red section right at the end. We already have this red color set from before, so we can now save this, and then call this function each time the user makes a guess. Our function is updateRange. We can call this after each guess down in our compareGuess function. This is our compareGuess, so let's select the open in brackets, and let's call this just after this closes. If I now save this file and give us a try, that's values inside of here, you see that nothing is working correctly just yet. This is because we are relying on both the high, and also the low variables up at the very top, but we've not yet updated this with the user's guess. We can update these two values, back down in our compareGuess function. The first if section, here we check-in if the user's guess is too high. Therefore, we can update our high variable with the value of the user's guess. Below this, inside of our else if section, this is when the user's guess is too low. Therefore, we can update our low variable to be equal to our users' guess. Let's save this file and try this out over in the browser. Add any values inside of here, and we still don't see an update, so let's check this out. We obtain the high section if the user's guess is too high. If it's too low, we obtain in the low section. Let's go to our function. Half our variable's, updateRange. We can see from the text editor that our space, and also the highValue variables are not being used, so let's change it to be space, and also the same just below. These two should be high value, and I guess this is one of the downsides of copying and pasting, so let's save this, and give us a go in the browser. Add any values inside here, so 10, and the first 10 percent is now our low section, let's try in at a high value of 90. This one fills in the last 10 percent, giving us the range in between. Let's go for 50, this now closes up. This is pretty much all working correctly but there is one small problem. Currently, our highest value is 90, but if we were to add a highValue such as 99, we see our range now increases. When we add a higher value, we don't want our range to be increasing, we want to still stick with the previous high which was 90. It may sound a little confusing, but we only want to update the high variable if it was lower than the previous high. Back down to our compare function, when we set our high, we're going to create an if saving, which is going to check if our user guess is lower than the previous high. If it is, we'll then set our variable. This will stop any cases just like before when our previous high was 90, and then the user guess was 99, and an if statement like this will stop this thing from happening. The same thing will happen if we go back for the low section, if you have a low of 50, this now gives us our range from one to 50, let's go for our 30, 10. Now, our low section is between one and 10. If we were to add a lower value such as five, again, the same problem happens, this goes wider while we want this stay exactly the same. Just below where we update our low section, we can also add a conditional statement. We only want this variable to be updated if the user's guess is higher than the current low. Let's give this a test. Let's go for a 10 as 90. Now, let's go for the low section if we make this lower such as five, this red section stays exactly where it is. We'll try going higher, so 95, and this all now seems to work correctly. Our rain section is almost now done and the next thing to do is to also update the text inside the middle. This is our current range of one to 100s. We also want to update this during the game. We also going to push this over to the left or to the right to be above our green section. The place we're going to do this is back inside of our update range function. Scroll back up. We can then select this section which is wrapped inside of the span with the ID of range output. The first step is to grab this. We'd get element by ID. Let's store this inside of a constant called range output. We want to now grab this range output and then update the HTML to be the new updated values. Let's use the back tick so we can create a template string, which will allow us to insert some variables into our output. The first variable we add inside of the $ symbol and the curly braces. This is a value of low, which you set just above, the dash, add a $ symbol and then we can insert our high variable inside of the curly braces. We then go on to make this section move to the left or to the right, to be just above our green section. The way we can do this is by setting the margin on the left and also the right-hand side. The margin on the left is going to be the same as our low section and the margin on the right is going to be equal to our high section and just make sure this is got in the text. This will set this as a text value of our element. Again, we're going to select our range output and we'll start with the style property which is going to be margin-left. When setting any style property using JavaScript, we don't use any dashes like we would do with CSS. Instead, we set this as CamelCase, so the first word of margin is all lowercase and then each word just after this begins with a capital letter. Just as I mentioned, we're going to set this to be exactly the same as our low value. We'll then set our margin on the right. Just like above we'll set the style, but this time the margin on the right and this is the same as our flex value, so copy this and let's test this out. So 10, 90, this is equal, so our text is now in the middle. Let's try 50 and 70, 85, and every time we update our range, this is now pushed just above our green section. Good. This is the range section now completed and the very final touch I'm going to make to this project is also make this number section flash. The way we can do this is to add an animation to our range output and then set this inside of our CSS. This is going to be reasonably straightforward. All we're going to do is to add a new class and we can set this property by using a class list. Class list has a method called add, which will allow us to add a new class, which we're going to call flash. We can then use this over in our styles.css. Outside of our immediate query, just like with any of the class, we target this with the dot and then inside here we can set up our animation. Our animation is going to make use of the key frames rule, so we can set our key frames and this is going to allow us to set exactly what CSS properties we want to add or remove as each stage of our animation. The animation name is going to be equal to flash and then inside here we can set exactly both CSS rules. We want to apply at different percentages, so at zero percent, which is the very start, we can set the opacity to be a value of one and a value of one is not transparent at all, this is fully opaque. It's exactly how the element is intended to look. However, at 50 percent or halfway through this animation, we're going to then reduce this opacity to be equal to 0.5. Zero would be fully transparent or fully see-through. So this is a halfway value. Then at the end of our animation, we can set the 100 percent value to be back to a value of one. Now we have this animation name of flash, we can now set this. I'm also going to set this animation to be over a duration of one second and also set this as infinite so our animation will keep running inside the browser. Let's save this and try this out or easy mode and if it starts up again, the class is now been added and we can see our animation has now taken effect. Congratulations, you've now reached the end of this project and I will see you in the next one. 11. Follow Me On Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you've really enjoyed it and gain some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on SkillShare, and also follow me for any updates, and also to be informed of any new classes as they become available. Thank you once again, good luck. Hopefully, I'll see you again in a future class.