Javascript Fun: Build a Guess The Number Game! | Chris Dixon | Skillshare

Javascript Fun: Build a Guess The Number Game!

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 13m)
    • 1. Welcome!

      1:28
    • 2. Creating the user interface with HTML

      10:06
    • 3. Styling with CSS

      10:09
    • 4. Javascript random numbers

      6:19
    • 5. User input & comparison

      8:33
    • 6. Logging player attempts & previous guesses

      9:06
    • 7. Adding difficulty settings

      11:27
    • 8. Handling the game over condition

      6:44
    • 9. Finishing touches

      6:40
    • 10. Thank you

      1:36
    • 11. Follow me on Skillshare!

      0:23

About This Class

Welcome to the Javascript fun series! 

For web design or development, there is 3 must know technologies, HTML, CSS, and Javascript.

The main aim of the Javascript fun series is to take your knowledge of these 3 (only a little is required!), and put them into practice by building a series of educational, yet fun projects show you exactly how they work perfectly together. Working on projects and solving problems is a great way to learn.

The project we will be building in this course is a Guess the number game. The game involves the player guessing the computers random number between 1-100, in a limited number of attempts!

All the required tools are free to download, I will be using the following:

Atom Text Editor: https://atom.io/

Chrome Web Browser: https://www.google.co.uk/chrome/browser

We begin by creating the user interface with HTML. The we apply styling using CSS. 

Then we add Javascript, this is where the real magic happens! 

You will learn things such as:

  • Creating HTML interfaces
  • Styling with CSS
  • Incorporating Javascript and linking external files
  • Variables
  • Functions
  • Comparison (if, else if, else statements)
  • Event handlers
  • Arrays & pushing values to arrays
  • Manipulating the DOM
  • Adding styles & attributes with Javascript
  • Javascript Math
  • String concatenation
  • Incrementing
  • And much more!

So if you are looking to move on and put your skills into practice using with real projects, take this course now!

Transcripts

1. Welcome!: welcome to the job script fun, serious. My name is Chris, and I'm he to show you how to use HTML. CSS and JavaScript put them all together to build a fun and exciting project. The project, which will look out in this course, is building a higher or lower game, which basically involves the computer generated a random number and then the paleo console ECT, a number which I think is in the input field. They can take a guess and then were provided with some feedback over the gas is too high or too low. We'll also incorporate the jobs grip to log the number of previous attempts the user has heart and also logged. The guesses are The very bomber will also provide the functionality to restrict the player to even five or 10 attempts, so we'll add in the difficulty. Buttons will also create all the user interface and all the styling. As we go through the course, you'll also learn about many jobs. Gift fundamentals such as variables, functions, fl statements many plate in a dorm event. Handlers comparison on so much more so By the end of this course, you'll have a better understanding off. How hates Dimel, CSS and JavaScript all fit together in a fun project. So thank you for taking this course and let's get started. 2. Creating the user interface with HTML: I have up on screen the finished products. This is the completed projects. This video is all about creating the user interface, which is basically all HTML content without any styling or JavaScript. To begin, I'm going to head over to the desktop and create a new folder. This is our project folder, and I'm going to call mine higher-lower, and then open up this project folder inside of Atom just by dragging it over. Within Atom, we already have a blank page already created. If your text editor doesn't, just simply create a blank page and then save it as our indexpage.html, and make sure it's saved inside the project folder. Then the first thing to do, is create our HTML skeleton. We can even a go ahead and type out all the basic HTML. Or we can use a Package called Emmet. Emmet is a great time saving feature. It allows us to do keyboard shortcuts such as html colon 5, an now am going to hit hit tab. It creates our blank HTML skeleton photos. There's all time-saving shortcuts. I would recommend checking out the emmet documentation for a list of all those. Emmet is available as a plugin or a package for pretty much all the most popular text editors. I would recommend installment. If not, just go ahead and type out the HTML skeleton, and then we can continue. I'm going to begin by adding the title. In my case, I'm going to add Guess the number game. Of course, feel free to come up with more creative title. But for now I'm just going to leave as that and then head down to the body section. Most of the HTML is pretty straightforward. There is one or two pieces which will add later on in the course. But for now the basic user interface is fairly simple. If you head over to the finished project, we're going to start by creating a div, which is going to be the container for our game. Then we're going to create three separate divs within the container. The first one is the panel which you see at the top. This is going to have the instructions and also a begin new game button. One quite have the select difficulty setting buttons just yet. What are those later on in the course? Then we'll have our second div just below, which is the area where the user can add a guess. Then it logs the number of attempts which we've had. Which is ideal because when we change the difficulty setting later on in the course, we want to restrict the user to either five or 10 attempts to guess a number right. Then finally we have a third div at the bottom which logs the guesses we've had in the past. This is handy if the player wants to remember what the guess previously. Let's begin with the top div and the container. The surrounding container is within a div. This div is going to have an id equal to container. We use this container id in the CSS in the next video. The first section is the top panel. Let's create div for this. This div is going to have a class equal to panel. Again, this is just for the CSS. Within this panel, we're going to have a level 2 heading. Level 2 you heading is the text at the top of I have a random number between 1-100. Place up between the h2 tags, and then the break tag, just a place that on a second line. Between 1-100, and the next in the Level 3 heading. This is going to be the second line of text of data guess, but just a little bit smaller. Let's save that and let's just check so inside the browser. If you go to the project folder and open up the index.html. Always working. So far we've got our level 3 and level 2 heading. Let's continue. We'll add the new game button just below at the button tags, and the name for the button is simply NEW GAME. That's our first section on our first panel completed. Within our second div. Let's just check out the finished version. We've got the text at the top and also the input fields where the player can add a guess, and also the text to log the number of previous attempts. Let's do this within a innovative. We'll also add the same class of panel to keep the styling consistent. Let's add the text in a h3 tag on the text goes into your guess below and press enter. I'm going to use the HTML entity for the AND symbol, which is the ampersands ANDamp and a semicolon, then press enter and let's save that, and let's refresh the index page inside the browser. That's looking good so far. Now we need to add an input field. This is the input field where the user can place a guess. Then the type of the input field needs to be a number. This is quite important because if we leave it set as text, the user can enter a letter as the guess. This will cause a problem when comparing the user guess on the computer's guess. It's important not set to number. Then lastly, inside this section, we're going to add a p tag. This is going to be for the number of previous attempts, and then a colon. Then we're going to wrap the number within a span tag, so open up and close the span tags. Then for now we're just going to put a zero just as a starter. We can see how it's going to look. Then we'll use the span tags within the JavaScript sections later on. We'll increment this number by one every time the user has a guess. Let's save, refresh and as our input field and also our text below. Now all that's left to do in the user interface is the third panel, or the third div at the bottom. This is going to be a simple div. Again with the class of panel, which is just going to have some text, and then an empty paragraph target just below. We can use JavaScript later on in the course to lock the user's guesses. Back over to the text editor. Let's create our last div. Again you should make sure it's between the opening and closing container. There we go div with the class of panel. Whenever in the div open up the paragraph tags, and the text was your previous guesses. Then a colon. Then the next line is going to be a empty paragraph tag. Can add content between these tags with JavaScript, we're going to give it an id, and the id is going to be guesslog, I'm going to use that later on. That's our HTML all finished. Save that and then head over to the browser, refresh and check everything looking okay. Which is all of the HTML is in place. It doesn't look very good at the moment because we haven't added any styling. But that's fine. We just want all HTML in place to begin with. Then next we'll move on to other styling in the next video. 3. Styling with CSS: Now we have the HTML or the user interface all completed. It doesn't look pretty good at the moment, but we're going to fix that in this video. We're going to make it look more like the finished version, which you can see here by adding all the styles and also adding a image to the background. The first thing I'd like you to do is to go ahead and grab an image or use a existing image which you already have. This particular image is available from pixabay.com, so go ahead and grab a suitable image which you'd like to use. I have saved my background image to the desktop. I'm just going to drag it inside the project folder and in C it's instantly available within Atom in hierarchy on the left. Great. To begin I'm going to add a style sheet, so I'm going to create a new page with an Atom, we have Command or Control N, and this creates a blank page which you can save as our style sheets. I'm going to call mine style.css. I'm just doing the same level as the index page and the background image. Save that. To begin with we're going to add some styles to the body, and we want to set the font size to be a little bit bigger, non-default. I'm going to set mine to 1.2ems and then also at the background image to the body. You could do this with the background and then the URL, and then with inside the brackets we add the path to the background, in our case it's in the same directory as the index page, so we can simply type the name of the image, which is background.jpg. Then check this is working. But first just go over to the index page and add it within the head section. Just with the title, let's use the link, and it's a style sheet. Then the href, so the path is straightforward because it's in the same level as the index page, so we'll just type in the name of style.css, and then let's save that and head over to Chrome, and then refresh. There's our background image. By default my image is quite big. For large monitors I'm just going to make sure that the image does cover the full size of the browser. I'm going to do that by adding some CSS. First of all we're going to say it to no repeat, and then center, center, and then fixed. This is going to allow us to center the image in the middle of the page and now we can use background size of cover. This will allow us to cover the full background with the image. Save that and then let's refresh. Now we should know is if you stretch the browser to which full-size. The background image will stretch accordingly to cover the full background. Inside the index page we had a container which surrounded all of the markup that we use for this page and it was also an ID. Let's go over to our style sheet, let's add this ID of container. I want to begin by restricting the maximum width of the container to 80 percent. Unless you stop the content from being the full width of the page and to center, we'll add margin, zero auto and save that. You see that pushed the content over because it's only eight percent of the width. We have a little problem at the top, so let's just check that out. [inaudible] close off the style sheets, just like that. There we go. Back over to the styling we can sent the text, we have text line of center. A border-radius of 10 pixels. We'll add a little padding, just to keep the content from the edges. I will also make that same pixels. Let's save and see how that's looking. It stand to look good, all the content is lined, which needs to add a background just to make sure that stands out from our image. Let's set the background color. I'm going to make mine a color of 602040, and let's take a look. Refresh. It looks a little bit better we've got the background which loads a text to stand down. But in the final version you can see that the background is semi-transparent, so you can still see the background image slightly showing through. We do this by adding a opacity to the background. Let's do it now by adding the opacity value of 0.98, and save that and then refresh. Now you can see the numbers starting to come through on the background. That stand look better now, but one thing I want to do next is add the panel. The panel is a free Devs which we have at the top. Also the section where the user can add a number and also the previous guesses log. Once you make it like the final version with a background color, I will also add some border radius and padding. Let's go ahead and add the styling for the panel. The maximum width, we're going to restrict that to 80 percent of the container. The margin of 20 pixels on the top and bottom, and also on the left and right which we'll center it horizontally. The border-radius let's keep it the same as the container of 10 pixels, and also the pattern of 10 pixels. Let's make the panel standout we just want to add the background color. The background, I'm going to set mine to a value of eee, which is a light gray color. Let's save that and take a look. Let's refresh. There it goes all free Devs have changed, this is because we added the class of panel in the HTML to all three of the Devs. Let's move on to the styling for the button and also for the input field. Back over to the style.css. Let's go for the button to begin. Just change the background color for the button and my value is going to be 862d59, and it's makable and a little bit bigger. Then we set the height to be 3ems, the width, let's make it spawn 80 percent of the container. Then some margin onto the bottom of 1.5ems. Just keep that away from the bottom of the Dev. A border-radius to keep it consistent with the rest of the styling or 10 pixels. Let's see how it's looking with a save and a refresh. That's looking better, we just want to now make sure that the text is a different color, so to make it stand out on the background I'm going to change it to white, and also change the font size. The color of white and then a font size of 0.8ems. Let's take a look. That's looking good so it stands look more like the finished project. Now if we go over to the input and do the final styling. I'm going to keep this pretty simple. The inputs, let's keep it consistent with a border-radius of 10 pixels, a width of 80 percent, a height of 4ems and then set the text line to be in the center. Then let's take a look at how it's looking. Good starts looking a lot better, just to finish off the styling and I'm just going to add a horizontal real just below that I guess. Let's do that inside the index page and then after the h3, add a hr tag and save that. There we go. That's our styling complete now for our project. Now we can move on to the fun part where we start adding some JavaScript. I'm going to begin by taking a look at how we can generate our random number. 4. Javascript random numbers: We have all the user interface all complete now, and we've added some styling to make it look a little bit better. We're going to move on to the fun part, where we will actually go on to generate a random number for every time we start a new game. This number is going to be between 1 and 100, and the player has to guess this random number. Let's begin by going over to our index.html, and the first thing we want to do is trigger a onload function in the body. Add onload equals, this is going to be the name of a function. Because it's going to be the initial function which generates a random number every time the game is loaded, I'm going to call it init, followed by the brackets. By running this function, every time the body is loaded, it ensures that we have a computerGuess or our random number ready to play with. Let's create this init function just below all html, let's create our script tags for our JavaScript. I'm going to begin by creating a variable, and this variable is going to store our random number, I'm going to call it computerGuess. Then let's create our function of init, and then we can add a random number to our computerGuess. The reason the variable is declared outside of the function is so the rest of the script can have access to it. If we declare the variable inside of the function, they only house local scope, it can only be used within this function. The computerGuess we want to set out to Math.random, and this will generate a random number between zero and one. Zero being inclusive and one not been included, but for our game we want the number to be between one and 100. Let's multiply this value by 100 and then add 1, let's save that. Let's go over to a console with a console.log, and then let's log to the console our (computerGuess) and save that, and then let's refresh and go over to our developer tools. Right-click and go to Inspect if you're using Chrome, if you're using a different browser, just go over to the options and look for the developer tools. Then if you head over to the Console, which in my case is at the bottom, which makes a little more space. That is our random number, which is 49.073, and a lot more decimal places, refresh 56, 77, 15, 88. That's what we want but we just want to make sure that the number is a whole number. The way we can do that is by using a function called Math.floor, let's wrap the Math.random within the Math.floor and then wrap this within the brackets just like that. This will round the generated number down to the nearest whole number. If we save and go back over to the Console, we now get a rounded number. That's 58, 7, 93, and 7, let's just comment that out and Save. I've got the random number which is stored inside the computerGuess variable. Next, I want to begin work on the NEW GAME button. What we want is every time the button is clicked, we want to generate a function, which is going to reload the page to effectively start the game again, and also generate a new random number in the process. Let's add a onclick event handler. When the button is clicked we want to trigger a function, and the function which we haven't created yet I'm going to call newGame. Let's go down to the script and we can create the function just below the variable. The function called newGame, and all we want the function to do is to reload the page, therefore starting the game again, and also in the process generating a new random number. We can do that with window.location.reload, let's save that. If we go over to the browser and refresh, we can click on the NEW GAME, and let's go into the Console and just check that each time the NEW GAME button is clicked we have a new random number. Let's just uncomment out the console log. That's our number of 15. We've click on "NEW GAME", we have 8, 9, 80, that all appears to be working. That's great. We have the new game functionality, and we also have the computer generated guess. Let's move on to the next video, where we can take the user's inputs, which is added to this field and then create a function to compare the user's guess to our random number. 5. User input & comparison: In the last video, we added the new game functionality, which resets the game every time it's clicked. This in turn generates a new random number which we have stored inside a variable. The aim for the rest of this video is to take the user's inputs, which is added inside the input field and then compare this guess to the random number stored inside the variable. Once you compare the two numbers, we can then provide some feedback to the player to let them know if the guess is too high or too low, or even if the guess is correct, let's get started with that now. Go back over to your text editor. I'm going to begin inside the input field, because this is the field we want to grab the user's guess. Let's first of all a id, so we can target this inside the JavaScript. I'm going to call my input box. Then second of all, I'm going to add a event handler of onchange. So every time the value is changed, we are going to trigger a function called compareGuess. Now let's go back down to our scripts and create the compareGuess function. Let's just do it blow the init function, so compareGuess. Let's begin with a variable called userGuess. I'm going to use this variable to store the value of the players guess. We're okay to declare this variable inside the function, because only this function needs access to it. Let's set these to document.getElementById, and id that we want to grab is one that we just added to the inputs of inputBox. Then we crop the value by adding dot value onto the end. This grabs the value of the user input and stores inside the variable called userGuess. Let's check this is all working by doing a console log. We want log the user guess. Let's save that and then refresh the browser and then go into the console. That's our random number from before. Now let's add a guess, let's go for 50 and enter. It says our guess appear now, 60, and there we go. That seems to working, okay. We have the computer's random number and we also have the user inputs. Now we just need a way of comparing these two values and then providing feedback to the player. Let's do that within a if else statement, so let's just comments out the console logs. Then outside of the function, let's create a if statements. The first thing I'm going to check is if the user's guess is greater than the computer's guess. In other words, if we guessed too high, then what we want to do is provide a message back to the user. A good place to display the message back to the user would be if you go to the level three heading or enter your guess below and press Enter. We can change the text to be, your guess is too high or your guess is too low, for example. To grab this in Javascript, let's add an id of textOutput. Then go back down. and we can grab this inside a document.getElementById. The id that we want to grab is one we just created of textOutput. Then we want to set the innerHTML equal to your guess is too high. By using innerHTML, this will set the value within the text output and it will replace the text which is currently there with what we'll place just here. Then let's add a second condition with else if. Now we want to provide a condition if the guess is too low. If the user's guess is less than the computer guess, I just noticed this needs to be computer guess. If the user guess is less than the computers or our random number. This time let's just add a document.getElementById. We want to use the same textOutput [inaudible]. But this time the message should be your guess is too low. Then finally, the third and final condition within the else statement is if the user has guessed correctly. Let's add a third message, simply of correct. Now we've got our three conditions. I'm just going to cut this and then make sure it's within the compareGuess function. So paste our inside there and then save. Now we can test it inside the browser. Add value inside the inputs, so let's start with 50. The guess is too high. Forty, luckily we've got that correct this time. Let's try a new game and that refreshes all the text. Again, let's go to with 50, so 50 is too low, 60, 70, 80 is too high. Let's try 75 too high, 74, 73, [inaudible] 71 and we got that one correct. One of the problems which you may have just noticed is every time we add a guess, we need to delete the contents of the input fields and then type again. Let's deal with this problem now. Lets clear the input field each time there has been a guess. Let's do it straight after displaying the message. All we want to do is to grab the input box and set the value to an empty string. Let's do document.getElementById. We can grab the input box with the same id as we've previously used. Then set the value to be equal to an empty string and then save that. Now we can also copy it and add it below your guess is too low and save that. We don't need to do anything if the answer is correct, because the game is already finished. Save and refresh. So let's begin with 50, your guess is too low and the input fields cleared. 60, 70,80 I'm going to correct that time. Now the game is starting to take shape, we'll leave that video there. Next we'll look at incrementing the previous attempts by one each time the user has added a guess. Then at the bottom will also log each one of the values of the previous guesses. Each time a number is entered, the value will appear just below here. I'll show you how to do that in the next video. 6. Logging player attempts & previous guesses: We now have the basic functionality in place for our game. The player can add a value to the input field as a guess, and then this guess is compared to the computer's random number. Then we get some feedback just above, to let us know if our guess is too low, too high or if we have the guess correct. In this video we're going to do two things. The first thing we want to do is create an array, and this array is going to contain all of the previous guesses that the player has had. Then it's going to display them in the third div right at the bottom, so the player can keep track of the previous guesses. Then the second thing we're going to do is to log the number of previous attempts, and then display how many guesses you've had just in here. Keeping track of the number of attempts will be important in a future video because we're going to add some difficulty buttons which will restrict the number of guesses the player can have. Let's go back over to the text editor and begin work with displaying the players previous guesses. If we go to the index.html and then look for the Compare Guess function. Our present, we're already logging the value of each one of the player's guesses and store it inside a variable. What we need to do is to grab this value and then push it to an empty array and then display the values within this array onto the screen. We could do this up at the top so if we go to the empty div with the id of guess log, this is going to be the elements where we'll push the values of the array 2. We'll then see them displayed right at the bottom under your previous guesses. The first thing I'm going to do, is create a new variable for our empty array, and call this the userGuessLog, and set this to be an empty array. Now in the compare-guess function, just below the userGuess, I'm going to add the values to this array. We're going to do that by selecting the arrays name of userGuessLog, and then we're going to push the values to the array. The values that we want to push to the array is the value of userGuess. Place are inside the brackets and then save that. Let's do a console log and just check the values being added to the array each time we add something to the input field. What we want console log is the userGuessLog, so save that. Then if we refresh the browser and go into the developer tools, so right-click and Inspect if you're using Chrome. Now if we add a value into the input field, let's begin with 50, so that's the first value of the array. Let's continue with 60, and 70, and 80. Each time we add a number, this number is added to the userGuessLog inside of the array. Now we know the values are being pushed to the array, we now need to display the contents to the screen, and that's pretty straightforward to do. Slash these comments out the console log. We want to grab the element with the id of guessLog. Let's do a document.getElementById. The id is the 'guessLog.' Then we'll want to set the innerHTML of the elements to be equal to our array which is the userGuessLog. Now if we save and then head back over to the browser and then refresh, let's give it a go and see if it works. So 40, so that's our first value of 40 which is too low, so 50 which is too low, 60 and each one of the guesses is being displayed at the bottom. All of our guesses are on there now, but they are little bit bunched up so I just want to add a space between each one, and we could do that inside the userGuess variable. Just before we grab the value, I'm just going to add a empty string with one space between, and then add this to the value and then store it back inside the variable of userGuess, so save and then refresh, and now let's give it a go. So 70, 80, 90 and that looks better now because we've got the gap between each one of the guesses. Now, I want to get to work on logging the number of previous attempts. To do that, I'm going to go back over to the Text editor, and then declare a variable to store is in. Create a variable called attempts and set this to an initial value of zero, and then back over to the HTML at the top. Just after the number of previous attempts, we've got the span tags with the initial value of zero. Because we going to use JavaScript to generate this number, we can remove that and then select an id for our span tags, and I'm going to call this attempts. We've got our initial value of the attempt set as zero for when the game starts. Each time the function of compareGuess is run, we want to increment the value by one. Let's do that, so just below our array I'm going to add attemptsplusplus because that will increment the value by one, each time the user has had a guess. Then each time that number is incremented, we want to display that to the screen. Let's grab the document.getElementsById, and the id that we want is the attempts id that we just added in the span tag, and then we want set the innerHTML to be equal to our attempts variable. To begin with, this will be zero, and then each time we have a guess that will be incremented to one and that will be displayed, and then two and so on. We just got a spelling mistake there, so let's just change that. There we goes. Now let's save and check it out inside the browser. Our the first guess, so 60. Now we've got number of previous attempts is one, 50. Then we got the value of two, 40 and that's even great. We've got the number of previous attempts logged inside the span tags and we've also got the values of our free guesses right at a bottom there. We're making good progress. The last thing I want to do, just to finish off this video, is to move our script inside its own file. Create a new blank page in a text editor and say this, last script.js. I've added mine to the same directory as the index page, and then we can go back over to the index page and copy all the contents of our script. Then go over to script.js and paste that in. Now because of a file is an external file, we can add the link in between the script tags. The script and its other source equal to script.js. If you added your script in a different location or within a sub folder, of course to change the source to match where you placed it. But for now I'm just going to save, and make sure the script is saved, and then refresh and just check the game is still working, which appears to be. That's fine, and that's great. Now, we've got the number of previous attempts logs. We can now use that in the next video, where we'll add a easy and a hard ball to restrict the number of guesses the play has. We'll see you there. 7. Adding difficulty settings: The game is working pretty well now, but the player has unlimited attempts to guess a number. We need to track how many attempts to use a hazard and be able to set a limit on that. I'm going to begin by adding the two new buttons; one for easy and one for a hard mode. The easy being a default of 10 attempts, and the hard button to restrict the player to only five attempts. So I'm going to begin over in the text editor, in the index page. We're going to add two new buttons within there. So I'm going to add these in the first panel. Just below the title of dare to guess. I'm going to add a p tag, and then within there I'm going to add some text to select the difficulty setting, and then a colon, and then lets add the two buttons below. The first one is going to be for easy. Let's add the text inside there. This is the text which will appear inside of the button. Lets try easy. Guess in 10 attempts, and then just say this is the default. I'm going to add an ID to this. So the ID is going to be set to easy button. So easyBtn, and then we'll add a on click event handler. Each time the button is being clicked, it will trigger a function. We haven't created that function just yet, but we'll add it in there just for now. So easy mode and then the brackets just after it, mostly going to add a class attribute inside there. I'm just going to leave this as empty for now, and this is so we can add a class by using JavaScript once the button is being pressed to change the color to green. So the player knows if you've selected the easy or the hard button. So I'm just going to copy this button and then paste it in just below. This button is going to be the hard button. So we change it to hard. Also the function. Again leave the class set to an empty string, and change the text and this is going to be in five attempts. I could remove the default. So save that. Lets refresh the browser and now we've got our easy and the hard button in place. So by default we got the new game button also showing at the bottom. I'm now going to remove that because we only need this to display once the game is over. As soon as the browser has loaded, the game is already set to play. So we don't need to click on the new game button for anything extra to work. Let's go over to the button, the new game button and add an ID. The ID that I'm going to add is newGameButton. I'm going to use this in the JavaScript to hide the button until the game is over. Let's go over to our script. We can update in the init function. Lets first of all select it with document.getElementById. We can select the ID that we just added of new game button. I then want to set the style display property. So style.display equal to none. Save that and then you should remove the button once a game is loaded. Now we can get to work with a [inaudible] our two buttons. So let's go back over to the scripts and the first thing I'm going to do is declare a new variable. This is going to call maxGuesses. This is initially going to be set to 10 because we have the default set to easy mode. Then consecrate two functions. These two functions are the ones which are triggered once the button is being clicked. So we've got easy mode and hard mode. Let's start with the easyMode function, and then all we need to do is set the maxGuesses to be equal to 10. Then we can create the hardMode just below and do the same but this time we set the maximum guesses to be equal to five. Then now we can go down to our if-else statements, down to the bottom. I'm going to provide two sets of outcomes. So first of all, we're going to check if the number of attempts the player has is less than the maximum guesses, which we said it will appear. Lets surround the if statement with one more. So the user guess.length is less than the number of guesses, so this means a player hasn't exceeded the number of guesses. So the okay to go ahead and check if the number is correct or not. So let's just cut out these if statements. Be sure is totally is the closing calibrate for the compareGuess function, and then within these calibrates based in the if-else statements, and then we'll provide an else statement. This would be the outcome if the user has reached the maximum number of guesses. In other words, it's the player's last attempts. So within this last attempt, we need to do a similar thing to above. So we'll check, first of all, if the userGuess is greater than the computerGuess. If is, would you simply grab the textOutput again and set the innerHTML just like above that. Let's paste that inside there. Because it's the last attempt, if the guess is too high, the message is simply you lose. So copy that. So next if the guess is too low, so we'll do that inside a else if. So else if, if the usersGuess is less than the computerGuess, then paste the message. Again, you lose. On the first.com within the else statement is if the user has guessed the correct answer. So let's paste in the message one more time, but this time we'll set this to be correct. So now we're in a position to test this and in fact this just wants to be userGuessLog. So save that, and then lets refresh the browser. So by default, we've got 10 attempts to guess. If we just enter a number 10 times 7, 8, 9, 10, so we go, so after the 10th attempt, we get the message of you lose. Counselor continue to add more numbers and we'll fix this in a later video. But for now, lets click on the hard button and lets add 1, 2, 3, 4, 5. So after five attempts we get the message of you lose, and that's exactly the functionality that we want. The last thing I'm going to do in this video is to add a green color to the selected button or the active button. To do that, I'm going to go over to our text editor and then if you remember from before, inside the index page, we added a empty class within the easy and the hard button. Within the functions for easyMode, just way either, so easyMode and hardMode, we're going to use JavaScript to add some class Names. first of all, within easy we'll do a document.getElementById, and the element that we want to grab is the ID of easy button. So easyBtn, and then we're going to set the class name. I'm going to add a class of active button. We haven't added this just yet inside the CSS, but we'll do the next. Once the player clicks on the easy button, would then trigger a function called easyMode and then this sets the easy button to have a class of active button. This active button class will be the color of green. Once this is selected, we also need to make sure that the hard button goes back to the default color. Lets select this.getElementById. This time we want to select the hard button and all we want to do is to set the class name to be equal to an empty string, and if these buttons already been selected, it will remove the green color and set it back to defaults. Then lets copy these two lines of code and then place them inside the function for hardMode. I'm going to do the exact opposite. So if the hard button is clicked, we want to set the hard button to be the active button in class and change the second line to be easy and save that. Then we can go into the CSS and sets our active button class. So let's do that just at the bottom. So active button. All we need to do is set the background property to be equal to a color of green, and then save. So now let's go back over to the browser and refresh. Now when we select the button, we set the active class with a green background and it also removes any active class which is on the opposite button. Style works fine. So that's everything for this video and now we'll move on to the next video to add some functionality when the game has been won or lost. So I'll see you there. 8. Handling the game over condition: When the game is over, either if the player wins or loses, we want to do a few things. We want to make sure the new game button appears on the screen so we can play again. We also want to hide the easy and the hard button. This is because if we lose while playing on the hard setting, after five attempts, the user can then switch to easy after the game has been lost and continue. Just like this. If the user selects the hard mode and then adds five guesses, so 1, 2, 3, 4, 5, so effectively the game has been lost, but then we can switch to easy and then continue to guess and get feedback up until the 10th attempt. To fix this, I'm going to add a game ended function, which is run each time the game is being won or lost. Let's go over to our script and create this function. So function, I'm going to call mine game ended. To begin, I'm going to set the new game button now to be visible because it's hidden by default within the init function. So here. In fact, we can actually just copy this and then paste this in, and instead of setting the style dot display to be none, we can remove this and set it to be in line. Now the new game button is being displayed. We also want to remove the easy on the hard buttons. Let's do that now. Copy the two lines from within the easy mode function, and then paste this inside the game ended function. All I want to do is set the style.display for the easy button to be equal to none, and then do exactly the same with the hard button, style.display equal to none. Now we have the function. We want to make sure this is triggered. Let's scroll down to our if-else statements. Only want this function to be triggered when the game has either been won or lost. The best place to trigger this function is below the messages of correct or you lose, otherwise the game is going to continue. Let's add the game ended function, just there. Then we also want to add this function below all the free messages for the final guess. Paste that in there, and there, and there, and then save. We're going to head over to the browser now and refresh. Let's give this a go. First of all, using the default 10 attempts. After 10 attempts, we get the message of you lose. We then lose the easy and the hard buttons from the display, and then we get the new game button appearing. If we click that, we should then be taken back to the main screen. Let's try now with the five attempts. So 1, 2, 3, 4, 5, starts the game over, and we now don't have the option to click on the easy mode and continue with the game. You may have also noticed that in the input box, each time we're making a guess, we do have the drop-down box appearing below. This is obscuring our view of the number of previous attempts, and this is pretty straightforward to remove. All we need to do is to go over to the HTML and then locate the input which is just here, and then we can add one more attribute to this field of auto complete. We can set this to off. Now when we save, and refresh, and let's give this a go, and that's great. Now we don't have the drop-down appearing and covering our text below, but one problem we still do have is that after the game has been won or lost, we can still continue to type into the input field and the guesses are still being logged below. Of course, this is a problem because we want to stop all kinds of use inputs once the game is over. It makes sense to add this inside of the game over function. Go back over to our script and if we locate the game ended function, we can add one more line of code to fix this. We can fix this by adding an attribute to our input box. First of all, let's add a document.getElementByID, and the input field inside the HTML has an ID of input box, so let's select that. Then we want to set the attribute, and then inside the brackets we need to do two things. First of all, we need to provide an attribute name that we want to add to the input field. The attribute name is read-only, and then separate it by a comma, we add the attribute value. Again, this is going to be set to read-only. This means that every time the game is over, the input box is set to read-only, so we cannot take any more user input. Let's test this inside the browser. So refresh and we'll go to the hard mode to begin. So 50, too low, 60, 70, too high, 65, too low, 66. So we've got that correct. Now we'll try and click on the input field, and there's nothing we can do to add any more guesses. So that gives end of our attempts. We'll try with the easy mode. Let's just add 10 guesses in there quickly, so we lose, and now we still can't click on the input fields to add any more values. So that's if the game is almost done now. We have just one more section left where we're going to add a couple of finishing touches just to finalize our game. Thank you for now and I'll see you soon. 9. Finishing touches: Now we get to the end of this course or to the end of this project. In this video we're just going to make some finishing touches to our game. The majority of these finishing touches is to provide feedback to the player. The first thing we want to do is when the game is won, we're going to let the player know how many attempts they guessed the correct answer in. Rather than just getting a message saying correct, it will say correct. You got to in three attempts, for example. The second thing we're going to do is when the game is lost, rather than just displaying you lose, we'll also going to let the player know what the computer guess was. Then to finish off this video, the third and final thing we're going to do is to change the background color of the game. So if the player wins, background will go green, and if the player loses, it will turn to red. Let's begin over in the script. Go to script.js. The first I'm going to do is to let the player know how many attempts they guessed the correct answer in. If we go into the if else statements at the bottom of the scripts, we already know. If we look at the variable of attempts we're already keeping track of how many times the player has had, so we can easily reference this variable inside the win condition. Instead of just displaying correct, we'll also going to type, you got it in. Then I'm going to come outside the string, and then add onto the end the variable of attempts. Of course this will be a number. I'm going to add a string of attempts onto the end there. Open up the strings and leave a space and then attempt. For example this will say, correct, you got it in free attempts. Then we copy this string, and then also add in down to the bottom in the second win condition. Delete that and paste this in. Then now we can move on to the lose conditions. When the game is lost we also want to let the player know what the actual computer guess was, just to provide some feedback. Just after you lose, I'm going to go outside of the string. Then also add on the end a break tag. Open and close a HTML break tag, just to place this on the second line. Then the number was. Then a space at the end of that string. Then outside of the string going to add onto the end the variable of computer guess, which you've already got. Add that onto the end of the string. Just like that. Then we'll do exactly the same below by copying and pasting. Grab that and paste it inside of the else if statements and then save that. That's our first two finishing touches added. The third thing which we're going to add was to change the background color. We need to do that again inside the win and the loose condition. The background color we want to change is within the container, which is the surrounding container for the whole game, which is just here. Let's target that by using [inaudible]. Let's first do it in the win condition. Just after correct. Go onto the next line and then select the container div with a document.getELementById, and then grab the container. Then we want to set the style. The style that we want to grab is the background color. Because this is JavaScript you need to CamelCase it, backgroundColor and color it with a C. I'm going to set mine to be equal to the color green, and then a semicolon at the end. I can copy this line and reuse it. Down at the bottom we also have a win condition. Let's add this just under there. Paste that in. This will also make the background color green. Then next we've got the two lose conditions where we want to set a background color of red. Just add this in below. But this time we want to set the color to be a hex value, so use the #e82c4e. We can reuse that again under the second lose condition. Just simply add this line in. Then we're good to go. Make sure that file is saved and then head over to Chrome and then hit refresh. First of all let's quickly test out the lose condition. I'm just going to go to the five attempts, type in five guesses. That goes to a lose, we didn't get that correct. The background color is changed to red, and it also lets us know the correct number, 62 was the number we were looking for. New game. This time let's try out the win condition and see if we can guess in 10 attempts. Let's guess a 50, 60, 70, 80, 90 is too high, so 85, and there we go we got it in six attempts. The background color changes to green, we get the feedback of the number of attempts. All peaceful working correctly. That's our higher Oliver game, all completed now. Feel free to play around it and make it your own. We'll hope by completing this project you now have a better understanding of how HTML, CSS, and JavaScript all work together. Congratulations on reaching the end of this project. Thank you for taking this course and hopefully I'll see you again. 10. Thank you: congratulations from me for reaching the end off this course. I hope this project is being a lot of fun for you and hopefully you now have a better understanding off how hate email, CSS and jobs, gift or work Together, we began by Annan some basic HTML to create the user interface which involved the bones, the input fields and also the text messages about how to play the game, but then added some style into the game which included the colors on, also adding in the background image Well. Then it started to introduce Javascript into the projects by creating function which was triggered each time the game has started, which generated a random number which acts as the computer. Guests were then added in the functionality to take the user's input, which the added in the import field and then compared it to the computers. Guests, which is the backbone father game with an provided some visual feedback to the player by telling them harmony, attempts of hard and also logged in the previous guesses which the part? Once we hard all this basic functionality in place, we started adding some difficulty buttons which allowed us to restrict the number of guesses to either five or 10. And then from then it was just a case of putting some finishing touches to the game to make it run a little bit more smoothly and to the right and more feedback to the player. So thanks. Taking this call also hope you've enjoyed it. I hope you've learned something which you can take away and hope to see you again soon. 11. Follow me on Skillshare!: huge congratulations from me for reaching the end off this class. I hope you really enjoy it and gain some knowledge from it. If you've enjoyed his class, make sure you check out the rest of my classes here on skill share on. Also follow me for any updates on also to be informed of any new classes as they become available So funky once again. Good. Look on. Hopefully I'll see you again in the future class.