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

Javascript Fun: Build a Number Comparison Game!

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 15m)
    • 1. Introduction

      2:16
    • 2. Creating the HTML structure

      10:14
    • 3. Adding the CSS styling

      11:28
    • 4. Including images and the images array

      5:54
    • 5. Generating random images

      7:28
    • 6. Working with timers

      6:32
    • 7. Creating a number for each image

      7:54
    • 8. Checking for matches

      7:52
    • 9. Showing and hiding elements

      4:16
    • 10. Finishing touches

      9:58
    • 11. Thank you!

      1:02
    • 12. 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 build in this course will be a Javascript Number Comparison game.

*** Resources are available to download for this course in the project area ***

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

Visual Studio Code Text Editor: https://code.visualstudio.com

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

We begin by creating the user interface with HTML. The we apply styling and animations 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
  • CSS Animations and keyframes
  • CSS Gradients
  • Variables
  • Const and let
  • ES6 Arrow Functions
  • Event handlers
  • Displaying images
  • Manipulating the DOM
  • Working with and looping through arrays of objects
  • Setting CSS with Javascript
  • Template strings
  • Using the splice and slice methods
  • Javascript Math functions
  • The ternary operator
  • If statements and the return keyword
  • setInterval, clearInterval and setTimeout
  • 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. Introduction: Welcome to the JavaScript Fun series. My name is Chris, and I'm here to show you how to use HTML, CSS, and JavaScript, and put them all together to build a fun and exciting project. The project which we'll build in this course is a number match game. This number match game will randomly generate an image after a set amount of time. Also, a number will be generated too, which the user has to decide if it matches the number of items in the image, and click the thumbs up or thumbs down to select. The number will either be correct or one higher or lower than the actual amount. Keep things more challenging. This number match game is a great way to see how HTML, CSS, and JavaScript can work together. We'll begin by creating the user interface using HTML to display the rules of the game, the play button, and also the game area with the image, the number, and also the buttons. After this, we move on to edit the styling using CSS. Make our app look nicer. Then we can get to work bringing our projects to life with JavaScript. We kick things off by setting up our images and how to include our image's array with these images in place. We then discover how we can display them onto the screen and also how to generate them randomly after a given amount of time. We make use of timers, math functions, working with the DOM, and so much more. Then we move on to generating our random number and setting up our buttons. Check if the user's choice is correct along with showing and hiding elements and so much more. This course will teach you how we use regular JavaScript. Work with our HTML. Rather than using any unnecessary JavaScript frameworks or libraries. So thank you for your interest. Let's get started building these projects. 2. Creating the HTML structure: To get started with our number match game, we're going to create the index.html page. This will contain all the structure and content which we need for our project. I've started in Visual Studio Code, which is the text editor I'm going to be using for the rest of this course. Let's begin. Over on the desktop, we're going to create a new folder. I'm going to call this the number-match. Once this is done, we can drag this over into the text editor. Open this up. We'll then need to create a new file for our index page. Let's go over to the sidebar. Then inside here, we click on this "New File" icon, or we can hit Command or Control N to create a new file. We can then save this file as our index.html. Since we dragged over the folder, this is automatically saved in our number-match project. Let's save this, and then we can create our basic HTML structure, and we can do this in Visual Studio Code using a shortcut. This is because MS is provided as a plugin with Visual Studio Code by default. We can simply type html: 5, and then hit "Enter". This will then provider us with the basic HTML structure which we need. If you are using a different text editor, or one which doesn't have MS enabled as a plugin, you can simply type this out. Then let's open this up inside of the browser. I'm using Chrome for this course, and this is the finished project just here. Now, let's add our content into the index.html. Let's start by creating a title which is the number match game. Save this file, and then we can also open this up inside the browser too. If you go into the sidebar, we can then write or Control-click the index.html, Copy the Path, and then we can paste this into a new tab in the browser. If you were unable to do this with your text editor, you can also double-click on the index.html page inside of your project folder. This will open the index page up in your default browser. This is all we need to do now for the head section. Let's go down to the body where we can first start with the welcome section. The welcome section is this area of text which explains the rules of the game. Let's start by creating a surrounding div element. This div is going to have an ID of welcome. Well, we use this ID later on in the course when we come to the JavaScript section. The first thing to do inside here is to add a level three heading with the tags of Welcome to the Number Match game, and then dot, dot, dot. I'm then going to surround Number Match in the emphasis tag, which is going to make it italic, just like here. Let's take this section out here. You can add the em tags, which has an opening and closing tag, and then paste the text of Number Match back inside. If we now save this, over to our project and reload, we now have the level three heading showing in the browser. Next up after our level three heading, we're going to add the text of, the rules are simple. Again, this is going to be emphasized, so we add these in the em tags. The rules are simple. We can then add the rest of the text inside of the p elements, so the next line is a random image and number will be generated. Below this in a separate p element, so it adds on a new line. The text of, if the number on the screen matches the number of items. We want to add this on a new line, just so it's more visible on the screen. On the random picture. We're going to say, hit the thumbs-up. Then just below this a new p section, and this will be the text of if they are different, hit thumbs down. Then finally for this welcome section a new section of text. This will be the text of, you have, let's say four seconds, to decide. Let's give this a save and go back over to the browser, and then reload. There's all of our text, or our Welcome section. It doesn't look too great at the minute, but we'll add some CSS in the upcoming video. During this course, we're going to have some dynamic sections, meaning that they can change. As you can see here, we have the number of seconds which the user has to decide, and at the moment we've simply hard-coded the value of four, so to make this section dynamic, we're going to prepare this by adding a span element. Let's clear this out. We can temporarily add our four back in place, and we can add an ID, which is going to be equal to time setting. Again, we will make use of this ID later on in the course to dynamically change the number of seconds inside the span elements. Next up we're going to add a new section, and if we take a look at the finished version, this is going to be a play button, and then some text which will appear at the end of the game, which will say Game Over, your score was, and then display the score from your game. Just below our div, but still within the body section, let's add a button with an ID of play button. Inside here we can add the text inside of the strong tags to make it more bold. A text of play. Then just after this button, we can add a level three heading, the ID, which is going to be equal to message, with some temporary hard-coded text of Game Over, your score was, and for now we can put 15 out of 20. Next up just after our level three heading, but still within the body section, we're going to add a new section, which is for our game area. This is going to be surrounded in a div with the ID of game area. This section is going to contain our information, such as our current score, the image to display, the number to compare against, and also a thumbs up and thumbs down buttons. Let's start at the top by adding a level three heading, which is for our current score, so we'll give this a ID of score. Inside here, the text of score two, followed by a colon. Inside this level three heading, we're going to add two span elements. The first one is going to have the ID of current score. This is going to be the score which is going to go up and down during the game, as a user gets the number of images correct or incorrect. Let's add a temporary hard-coded value. I'm going to add four, just after this first set of span elements. I'm going to add a second set, and this is going to be equal to how many total points are available for the game. I have 20 images available, so I'm going to add 20 inside here, and then separate these with a slash. We can change the total available points. We can also add an ID to this, and make this dynamic, and call this ID the total available. Okay, so now on the next line we can add the important image tag, and this is going to be responsible for displaying the image on the screen. This will be fully controlled using JavaScript, so we don't need to add any image sources, or anything like this. We can simply just add an empty image element. On the next line, a p element, and this section is going to say how many, and for example, macaroons. Once we hit play, this will be the text down at the bottom here. How many cupcakes, how many pizza slices, and so on. Let's add this in now. So, how many. We need to change the item name for each image. I'm going to add this in a span element. Let's say for now macaroons, we can change this text. We can also add an ID inside of our opening tag, and this is going to be equal to item name. Then a question mark just afterwards. We're nearly now done for our HTML, the very last thing to add is our buttons, and also the number to display. The first one is going to be a button for the thumbs down, and we can add the thumbs down symbol as a HTML entity, which is the code of ampersand, the hash, x one, F double four D. In between our two buttons, we're going to have a p element which will display the number, so let's add a hard coded value for now of six, a ID, which is going to be equal to number. Then finally down at the bottom, we're going to add our thumbs up button. This is going to be a HTML entity, which is ampersand, the hash, x one, F double four E. Give this a save, and then go to the browser. Give this page a refresh, and now we see all of the content on the screen. We have our thumbs up and thumbs down, and all of the text we need. All the rules. This is it now for our content, and in the next video, we'll make this look a little bit nicer by adding some CSS. 3. Adding the CSS styling: Now we have our contents on the index page. But it doesn't look too pretty at the moments. We need to make it look more like the finished version which we see just here. Honestly, just a simple case of add-in, some CSS dynam. To begin, let's go to our project and in the sidebar let's creates a new file. This is going to be called the styles.css. Make sure that this is in the root of the project alongside the index page. We then to link this file to the index page inside of the head section, so let's scroll up. Then just after the title, we can add a link. First of all, the relationship attributes. This is a style sheets. Then the href attribute which is going to point to the location of our style sheets. This is alongside the index page, so we don't need to add a file path. We can simply enter the name of styles.css save this file and then go back to our styles.css file, where we can begin to create our styling for our project. First of all, let's target the body element, which is going to apply to the whole page. I'm going to make this game aligned into the center. We can add, the text align which is going to be equal to the center; the. Margin, the default margin for the body, I'm going to add zero pixels on the top and bottom. Then 10 pixels on the left and right just to add some spacing on the outside. The padding I'm going to reset to a value of zero. Just to remove any browser defaults. We can set to obey font family. I'm going to go for Aerial, Helvetica and then a Sans-serif. To make the font size a little bit bigger, I'm going to set the default to be 1.2 rems. The color for the text, which you can spin rgb value. I'm going to add the free values inside of the brackets. The first one is 33, 31 and then 31, which will give us the dark gray color for our text. The heights of the project is going to be 100 vh, which allows the project's strategy 100 percent of the viewport height. Make sure the project fills the heights of the screen. The next thing I'm going to do is to add a gradient on the background. This is the color which you see just here. This is going to be a gradient to blend from one color to another and we can do this by setting a linear gradient to our background image. Let's add the background image property. Set this to be a Linear gradient. A linear gradient will allow us to transition between two colors in a straight line. Inside here I'm going to pass in free values. The first one is 120 degrees, which is the direction across the screen where the colors will blend from and to. Then we can add our two colors to blend between. I'm going to to first, add a hash value needs to begin with of 84fab0, which is the green color we see just here, separated by a comma, the valley to blend two, again it's going to be a hash value, which you're going to be 8fd3f4. Save this file, then let's go over to the project. Refresh. Now we see the green color to the blue color in the background. This is at the angle of 120 degrees. Next up we're going to target the number section. If we scroll down, we have this number section just here which is for the number which will flash on the screen, currently we have this high coded as a value of six. We want this to be a little bit bigger so it's more easy for the user to see, I'm also going to add an animation which will make this flash in and out. It's more clear to the user that this is a number that needs to compare the image against. Let's target this with the hash value of number. Seem to have an ID of any styles.css. Let's grab our number. Then inside here we can begin by adding the font size. Make this bigger of a value of five rem. The line height which is going to match. This is going to be a value of five rem too, the color. I'm going to add the rgb value. We can first are the value of red, green, and blue. The margin. Just add some space on the outside. Zero top and bottom and 0.5 on the left and right. Next up we're going to add an animation to make these flash in and out. If we save and reload, we currently have a plain, blue number. I'm going to add a CSS animation to make this flash. To do this, we can add the animation property. I'm going to add in three values. The first one is the name of the animation which I'm going to call flash. Second of all is the animation duration or the landfill will take. I want this to appear over 1 second, and then third, we can set a value of how many times we want this animation to repeat. We set a number inside here which I'm going to set this to be a value of infinite, so it keeps running. Now have this flash animation just here. Below we need to define exactly what we want this flash animation to look like. We can do this by adding the key frames rule for our flash animation. Then inside here we can set the stages, where we want to apply very CSS rules at different stages of the animation. For example, we can add 0 percent , which is the start of the animation. We want also changes to be at 50 percent and also change at 100 percent too. Inside of the curly braces for each one, we can set which CSS we want to apply at each stage of the animation. All we need to do here is to change the capacity from a solid color to be see-through, and then back to a solid color to give us the flash effect. We can start off by having the capacity to begin with as a value of one, which is simply a solid color. Halfway to through this animation, we can then reduce this value to be anything we want, such as 0.4, and then at the end we'll change this back to a value of one. Remember this is all happening over a duration of 1 second. We'll begin as a solid color. It will then become transparent. Then at the end of a second, it will back to a solid, color and this hopefully should be the effect which we see if we now go over to the browser and refresh. Good. Now with this working, we're going to target the buttons inside, which is a thumbs-up and also thumbs-down. We want this to appear in line so click on "Play." We want them to appear in line, just like we see here. We can do this by grouping these together in a surrounding div and then adding a class to target in CSS. Let's go over to our index.html. Down at the very bottom we have our number surrounded by our two buttons. Let's put these three lines of code, out of place. We can add a surrounding div. Face it back in. We can then add a class name which is going to be the match-buttons. Save this file and then over to the styles.css right at the very bottom. Since this one is a class, we use the dot and the name of match-buttons. We can make use of the CSS flexbox to align our items. We do this by setting the display type to be flex and then we can set the horizontal and vertical alignment to be in the center. First of all, I started Justify-content to be in the center. Save this over to our project and reload. This now centers our items across the page. We can also add the align-items property just below and this will add some vertical alignment too. Set this be in the center and this will make sure our vertical alignment is set too. Next up we have the buttons. This is the thumbs up and thumbs down button. Again, I'm going to make use of a linear gradient. To do this I'm going to set the background image to be once again a linear gradient. The first value is going to be to top. This is the direction of the gradient. For example, this will setup the gradient from the bottom to the top. We could add it to left. This will make sure the gradient would blend from right to left. The two colors which you want to blend in between is the value of fddp92, and the second one is the value of d1fdff. Let's save this and reload our projects. We now see the background gradient and also that these items are aligned horizontally and vertically. Next up, let's add small styling to our button. Just after our background image add a semicolon, we can set the border value to be none. Currently, if we save and reload, we see that our items are square. Well, if we go to the finished version and click Play, we want this rounded effect on the buttons. To do this, we need to set the width from the height of the button and then we can set the border-radius. Let's set the height to be eight pixels the width, to be also eight pixels too. Then to add the rounded effect, we need to add a border radius which is equal to half of our width and heights. 40 pixels, save this, refresh. All three of our buttons are now rounded. We just need to make the font size a little bit bigger. Back now to our button and set the font size to be a value of 1.4 rems. Save this, reload. Now our emoji icons and also our text is now larger. Good, now we have a lot of our structure in place for our project. In the next video, we're going to begin looking at JavaScript and how we can add our images to our project. 4. Including images and the images array: We're now going to begin working with JavaScript inside of our projects and also take a look at in our images too. So provided with this course is a Images folder which some sample images which you can use, and also a text file called array, which we'll take a look at in just a moment. So the Images folder, if we open this up, this contains 20 different images which you can use for this project. You can of course, use any images which you prefer, but the names of these images are important. If you do want to use your own images to be sure to also change the title of the image is inside of this array. If we take a look at this, and open this up, this is a JavaScript array which is stored in a constant called images, and this is simply an array of objects. Each object contains the image name and also the number of items we see in the image, so, for example, this image is bananas.JPEG, and this has six different bananas in the image, we then have the birthday candles, which is seven, the blocks of six, so on. So if you do use your own images, be sure to change the image name, and also the number of items, to matures, and then you're good to go. If you just go and follow along using the images supplied, all we need to do, is drag over our images folder inside of our projects, and we can use these in just a moment. The next thing to do, is to go into the sidebar, create a new file, and this is going to be for our JavaScript. So I'm going to call this the script.js. We also need to link this to our index.html, and wants to do this right at the very bottom, just above the closing body tag, we can add a script tag, and then the source which is our file path, this is alongside our index page, so, all we need to do is to add scripts.js. [inaudible] is working by doing a alert in the script.js. Let's do an alert to simply the text of high, open up the project inside the browser, reload, and this is now linking it to our JavaScript file because we can see this alerts. The next step is now copy over our array from the sample file, so, select all, copy all of the contents, remove our alert, and then we can paste this in. So if you do want some practice, typing this out, this is completely fine. This is just being provided for convenience since there is a lot of repetition. So now we have our array of images to work with. We can test these images to work in by displaying them on the screen, so, just blow this, let's scroll down. We want to create a constant called the image file name, and this is going to store our imaging. How do you want to select one of these images? Well, if we go back up to the very top, we have an array which is called images, so, we can select the using this name, so, back down. We can set this equal to our images array, and then inside of these square brackets, we can select any one of these objects which we want. So items inside of an array will begin at position zero, so, the first one of bananas will be zero, and then one, and so on. So to select the bananas, let's scroll down, we can select our array, our position zero. Now you can use the dot notation to select which fields we want from the object. We can even select the image name or the number of items. Let's grab the image name, and then we can do a console log for our image file name, so, save this and now open up the projects. I'm going to right-click and inspect, go to the console, refresh, and now see the name of bananas.JPEG. But we don't want to just console log the image name, we want to actually get the image on the screen, we can do this by setting up a second constant called image, unless you come to select the image elements from the index.HTML. Remember from the first video we created a empty image elements, and we can now select this using document.queryselector. Passing in as a string the name of the element, which is image or IMG. So now we selected this image elements, we can now reference it using the image name, we can set the image sauce on the image source is going to be the file path to any one of our images. We already have the images file name, such as bananas.JPEG. But we just want to point this to the images folder too, so, inside the back ticks we can add this as a template string, we can add the filename of images forward slash, we can then insert a variable using the $ symbol and then curly braces. The variable which you want to add is the image name, and we already have this stored just above, so, paste this in, say this, refresh. I will now see our image on the screen. If we go ahead and change this to be images free, this will enter, select a different image from our array. Good. Now we know how to display our images in the project. Next, we will move on to generating these images randomly. 5. Generating random images: Inside of the browser, we now have our images showing and now we can change them by changing the number inside of the square brackets just here. But we want this image to be completely random and we can do this by generating a random number to pass inside of these square brackets. Let's begin by wrapping this code inside of a function. I'm going to temporarily cut out these three lines, create a function with the name of generate image, then once passed in a random number as arguments, and then setup an ES6 arrow function just like this inside of the function body or these curly braces. We can then paste in our image code from before and since when we call this function, it's going to be passed a random number. We also want to replace this hard coded value with this random number. Good. Now we have our function which generates an image. This function will need a number passed to it each time it's called. We need to call this function on a regular basis. This cycle through the images and to do is we can create a new function, which I'm going to call loop. Just below this, let's create a new loop function. Set up our function just like this. The first thing we need to do inside of this function body is to create a random number. Let's create a constant to store this in, called random number or we can generate a random number using math.random. Because we have 20 different images, we want to create a random number to select any of these 20 images. math.dot random will generate a random number between zero and one, zero being included and one is not included. For example, we can get a value of 0, 0.1, 0.9, but not including one. We can take a look at this in action just below by doing a console log passing in the value of random number. For this display, we also need to call our loop function. Save this out to the browser and then refresh. Good. Now we have a random number between zero and one. However, we want this to be formatted slightly differently. The whole point of this random number is to select one of the image numbers. We want our random number to be one of the 20 images. Remember our array index begins at position zero, so we need to generate a random number between zero and 19 to grab one of our 20 images. We can do this by multiplying our math.random by the value of our images.length. Save this, refresh, and now we should get lots of different values between zero point something and 19 point something too. To make this a rounded whole number, we can put out this code here. We can then add a math.floor, which will then round down our number to the nearest whole number and then pass in our random number. Save this file, refresh, and now we should get a random number between zero and 19 giving us 20 different options. Good. Now we have our random number generated. We don't need to call this function anymore but instead of the console log we now need call our generate image function from above. Let's add this in, passing in our random number, which this function expects. This is also stored in this constant called random number. Paste this in, save this file, and now if we go to our index.html, the next step is to call this loop function each time our play button is clicked. Let's find the play button inside of our HTML, which is just here and then we can add a onclick event handler. Add onclick. The onclick event handler will run a function each time this element is clicked on, and the function which you want to run is the loop function which we just created. Give this file a save. Then over to the browser, we can test this by clicking on Play. Goes the console. I'll get a random image each time we click on play. Good. Now will have the images randomly generated. We do, however, only want each image to display once during the game. To do this, we can remove an item from the array using the splice method. Let's go back over to our generated image, inside of the script.js. Inside of this function, we can then select our images array. We can use the JavaScript splice method, which is going to remove an item from the array each time this generate image function is run. This will effectively remove an image from our array each time it's being displayed on the screen. Inside of our splice method, we need to declare which item from our images array we want to remove. We already have the index number generated inside of this random number. We can pass this in as the first value. The second value is the number of items we want to remove and this is just one image. We can test this out by doing a console log, passing in the value of our images array, save this file, refresh, open up the console with right-click and inspect, click on Console tab, click play. Now have 19 items inside of our array. Click again, we have 18, 17, 16, 15. This now means that each time a image has been generated, it then gets removed from our array and we then at one step closer to the game being over. What if we keep on clicking play until we have no images left. We now see we have an error inside the console. Since we now have no images left to select. To stop any errors, we can add an if statement to check if the images array is empty. We can do this down in the loop function before we generate a random number right at the very top, we can check if the images array dot length is equal to zero. If it is, we're going to return out of the function, and this will effectively break out of the function and then stop the loop. If the image is land is greater than zero, meaning we still have some images left. The code below will then run and continue as usual. Let's save this and we can test this, click on play until we get to zero and you can see once we get to zero items in the array, we no longer see any arrows on the screen. We now making good progress with our project and in the next video we will look at how we can add a timer to change between images after a given amount of time. 6. Working with timers: We can currently cycle through the images by clicking on the "Play" button. We want this to be taken care of automatically, and the way to do this is to use a timer. We can use a timer called setInterval, and this method will repeatedly call our loop function after a given amount of time. Let's take a look at how we can use this method over in this script.js. Let's begin at just below our loop function. We can then go ahead and set our interval and then inside of the brackets, we are going to pass in two things. The first one is code, which we want to run, and this is our loop function. We can pass this in first. The second one is the duration which you want this loop to repeat after, and this's going to be in milliseconds. Let's add 1,000, 1,000 being a second. Now if we save this, and if we refresh the browser, we see that after one second, this code will then run. But, however, once we visit the browser, this runs straight away, rather than waiting for us to press the "Play" button. We don't want this to run until the game has started. We can change this to be inside of a function. Let's comment out this line, so this will stop running. We can then create a function, which I'm going to call the "timer". Says about function body. Then we can grab our "setInterval", and move this inside of our "timer". If we save this, and now refresh the project, timer now won't run until we call this "timer" function. Now we need a wait to call this timer and begin our game. To do this, I'm going to create a play function, which is responsible for starting our game. Just below the timer, we can create a play function, and for now, all we want to do inside of this "play" function, is to call our timer. Since we now have this play function to begin our game, we now need to go over to index.html, and replace our "loop" with this "play" function. When the play button has been clicked, give this a save and then over to the browser. Refresh. Let's click on "Play" to start our loop, and this now starts off our game. However, if we take a closer look, as soon as you click "Play" there is the one second delay before the first image appears. This is not the behavior we want, because we want the game to start immediately, as soon as the Play button has been pressed. To fix this delay in starting the game, we can first call the loop function manually, over in this script.js. Inside of our play function, we can first call the loop function, just before our timer, and this will start the game immediately. Say this, refresh, press "Play" we'll have an image appear straight away, and then after one second, we see a new image appear on the screen. Now once the game has finished, we can also clear the timer, to stop it from running in the background. To do this, we can create a new function called "stopTimer". Set up our function just like this, and the way we can stop our setInterval call, is to use a method called clearInterval. Passing in the name of the timer which you want to stop, and this is simply, timer. This function will stop the timer from running, but when do you want to call this function. Well up in the loop function, if we scroll up, we already have a "if" statement just here, which will check if we are on the last image. This section of code here will run when the length of the images ray, is equal to 0, or the game is basically over. Inside here would make sense to also stop the timer too, by calling the stopTimer function. Making sure that stopTimer is placed above the "return" statement, otherwise this code will never be run. With this in place, one last thing I want to add, is to set the time delay as a constant up at the top. Let's scroll up. Just after our ray. We can set the constants called the timeDelay, and I'm going to set this to an initial value of 3,000 milliseconds, which is three seconds. We can now use this time delay constant, inside of our setInterval call. Rather than this hard-coded value of one second, we can now pass in our timeDelay, and this will control how regularly the timer will run. Now since we have our time delay stored in this constant, if we take a look over in the browser, you will see we have the text of "You have 4 seconds to decide". This value before, is a hard-coded value in our index page. Let's go over to the index.html, and if we take a look for our time setting span, inside here we can now remove this hard-coded value of four. Then we can use JavaScript to target the "span" elements, by grabbing the "id", which is "timeSetting". Over in this script.js, just below our timeDelay. We can select this by grabbing the documents, and then get elements by Id. The Id we want to select is this timeSetting which we just looked up before. We can then set the value by using "innerHTML". I don't want set the value to be equal to the timeDelay, and remember this timeDelay is in milliseconds. To display in seconds, we can divide the value by 1,000. Say this, refresh, and now we see the value of three seconds. If we go back and change our time delay to be two seconds. This is then updated in our index page. This is how we can set up a timer using the setInterval method. Next we'll add another important piece to our game, and this is to generate the number which will display on the screen next to each image. 7. Creating a number for each image: In this video, we basically need to get two numbers. First is to get the correct number of items to the image, and then store it into constant. Second, we need to also generate a number which is either one higher or one lower than the correct number. We could generate a completely random number to display. Put then if we were to get something such as one or two, and then 12 pencils be it on the screen. The game, will then get pretty easy. Having it display number, either correct or only one number off. We'll make it a much more challenging game. Let's now go down to generate the correct number for the current image. Just underneath where we set the image source inside the generate image function. Once you create a new constant called number of items, we can then grab our images array passing the same random number. This matches the image which is being displayed and then rather than grabbing the image name, we can now go up and grab the number of items. This is now the correct number of items associated with each image stored inside of this constants and now we have the correct number. We need to generate a false number, which is either one higher or one lower and this number. To do this, we can first generate a random number between zero and one. This zero and one will give us two options. Wants to either add one or to, deduct one from this number. Let's start by generating our random number. We can store this inside a constant called number0to1. We can use the JavaScript Math.random function. To give us our two options. We can multiply this by two and then just like we looked at earlier, we can also do Math.floor, which will run this down to the nearest whole number. We can surround this with Math.floor. This Math.floor is just like we looked at earlier, from when we created the random number to generate the image. Now we have these two options of zero or one stored inside of this constant. We can now use these two options to either take away one or add one. Let's again store all this in a constant. Let's call this plus or minus and then we can make use of the JavaScript ternary operator. When using the JavaScript ternary operator, this is a bit like a simplified if else statement. Basically check if a condition is true and then provide an outcome. We want to check if the number zero to one, is going to be equal to zero. If is we use the question mark to provide a outcome. If it is, we want to store the value of negative one. If not, we use the colon to write the L section and then instead we're going to add one too. Basically if this number is being generated and it equal to zero, just like we have here, the value of negative one will be stored inside is constant. If this is a one, this is then false and then the second section will run and then the value of plus one will be stored inside these constants. We can use this value soon to add to our number of items to have increase or decrease by one. But before we do this, we also need to generate another random number between zero and one, just like we did above. This is because we also want to randomly select if we are displaying the real number or this false number. We can again make use of Math.random and we are going to call this a constant of split. Just like we did above. We can set Math.floor to round this down, passing in the Math.random function at the brackets, and then multiply this by a value of two. The next thing to do is to use this option of zero to one, which is stored inside of these constants, inside of an if statement to decide whether to show the real or the false number. Let's add our if statement just below. We can say if they split is equal to the value of zero, we want to run this code inside. Else if this value is one, we want to run the code inside of this section. We're going to use this section to add the real number to the screen. How do we go about adding the number to the screen? Well, over in our index.html, if we find a number. We currently have this value hard-coded into our HTML. We going to remove this and now we can update our number using this ID. We can grab this using documents.getElementByID. We can grab our number, which is the ID of the elements. Set the inner HTML to be equal to our real number, which is number of items. Else, this is the section if the value is one, this is going to be our false number and just like we did above, we can set the document.getElementByID. We want to grab the number once more set the inner HTML, upload the back ticks so we can insert a variable using the $ symbol and the curly braces. The variable which you want to add is again number of items. For this time, rather than just adding the number of items, we also want to add the plus or the negative to this number. This is stored inside the constant called plus or minus. We can add this into here. Just to recap here, we are creating a random number between zero and one. If the value is zero, we're going to display the real number of items. If this is the value of one, instead we're going to display to the screen the value of the number of items, either plus one or negative one. Next up, let's give this a Save and if you scroll up to our array testing, this will be a lot easier if we just have one item to look through. Let's go up and I'm going to comment out everything except the bananas. Save this into our projects. Press play. Then we get a value of undefined, like check this out. Let's go to right-click, "Inspect" entity console. Don't see any errors. Let's check this out and to generate image, we're grabbing the number of items. Actually number of items here just needs to have the underscores like we have in our array. Slash, replace this. Save this file, and go back into our game. Good so now we will have the value of seven. If we take a look at our array up at the top, for the bananas, the correct number is six. We also can generate a number one higher or one lower. The free values we should get is five, six, and seven. Let's keep trying and we've got five, we've seen seven and there is six, and seven, and five. We have the three available options on the screen. Good, so this is now all working well and now we can move on to the next video where we will work with the thumbs up and thumbs down buttons and also check for a match. 8. Checking for matches: We now have the real number for our image and also a number to display. We now need to compare these numbers when a user clicks on the foams up or down buttons. To begin, we need to create two different variables to store these numbers. First of all, so just below our constants, we can create a variable for the current image value. We set this to an initial value of zero, and this will be overridden once we generate our image. Separated by comma, we can add a second variable and this is for the display number initially to a value of zero. This display number is the one which appears on the screen. So it could either be one less, one more or the correct number. Scrolling down to our Generate Image function, we can now update these variables. First of all, inside of the if section, just below where we add the number to the screen. This section is when the computer has selected the correct number to display. Here we can update the display number with the correct value, which is number of items. The display number is going to be equal to number of items. After this, we have the L section, which is the section which generates a false number. Therefore, we can update our display number to be equal to the incorrect value, which is this variable section we have just here inside of the back-ticks. We also need to now obtain the real number. We can do this outside of the if else statements, just above where we removed our image. So we can set the current image value, which is a variable we set up at the top, and so this is equal to our real number, which is number of items. Okay. Now we have these two variables being updated. We need to compare these two values. When the user clicks on the thumbs up or the thumbs down buttons. That's first header where we store index.html, where the two buttons are created. In our first button we can add an on-click event handler, which is going to trigger a function. We're going to create a function which is going to be called match. Will create this function in just a moment. Then for our second button, which is just below, we can also add a on-click event handler and the name of the function which is going to run in here, is going to be noMatch. These two functions will be also updating the score. So we can also remove the current score value, which is currently hard-coded as four. We no longer need this value since we'll be updating this from our script. So we'll save this file and then let's go back over to our scripts dot js. If we scroll back up to our variables just under display number, separated by a comma, we'll create a new variable which is called score, set this to an initial value of zero, and this variable will be updated when we click on the thumbs up or thumbs down buttons. Let's now go to the bottom of this file and we can create this match and noMatch functions. First of all, let's create the match function. I'm going to set this up as an ES-6 arrow function. Inside of this match function, we want to check if the current image value and the display number is equal. Let's add these two variables in, the current image value. We want to check if this is equal to the display number. If it is, we can use a JavaScript ternary operator. If this is true, we can then update our score variable by one, by using the plus plus incrementor. If not, we can decrease it by the value of one, if this is not not a match. Next up we can also update the elements on the screen, and the element on the screen we want to update is this current score. We can do this with documents.getElementById. Update our current score by setting the inner HTML to be equal to our score variable. The notMatch function next is going to be pretty similar. We can set the power function. This is also going to have a JavaScript ternary operator, just like above, where we want to compare these two values. Let's copy this code. We can paste this in. The only difference is we want to do the opposite. So we can add an exclamation mark. If this value is not equal to this value, we're then going to update our score and then update our elements on the screen. Save this file, and let's go over to the browser and give this a go. If we now press "Play", we still only have one image inside of our array, so this is much easier to test. We know there is six bananas, but we get a value of seven. Let's give it a thumbs down and then we get a score value of one. If we click on the "Thumbs up", this should be deducted by the value of one, and we're back to a value of zero. The problem which we currently have though, is we can press the thumbs up or thumbs down buttons as many times as you want for each image. We do, however, only want to use it to have one selection per image. Some there we'll get it correct or incorrect. I can go ahead and fix this now. So back over to Visual Studio Code. We can begin by creating a new variable up at the top. Just have the score and separated by comma, we're creating a new variable called chosen and this is going to be equal to an initial value of false. We can now use this and update this in our match functions down at the bottom. Inside here, once say match button has been clicked, we can then set the chosen variable to be equal to true. The same if the noMatch button has been clicked too, we can also update this to be equal to true. So once this has been updated to true, this now means that the user has made a selection and we don't want them to make a new selection. So how can we restrict the code inside of these functions, if the user has already made a choice? Well, we can do this by surrounding this code in an if statements. First of all, in the match section, cut this out, create an If statement. We can use the exclamation mark and this will check if the chosen value is false. Therefore, the user has not made a selection. The user has not made a selection, we can then run the code inside here. The same for the noMatch section down below. Let's take this out. We can say if the chosen variable is false, we can then run the code inside here. So once one of these buttons has been clicked, it then updates the chosen variable to be true. However, next time we generate a new image, we again want this to be false, so the user can make a selection. We can update this up in our loop for each image. Let's scroll up, inside here, outside of the if statements, we can then set up our chosen variable back to false, meaning the functions below can then run. That's tested out. We can first uncomment out our images from our array, save this file, back over to our game and play. Now if we try to click on these buttons multiple times, we are only allowed one selection per image and this is a big improvement to our game. In the next video, we'll clean up our user interface by showing and hiding elements on the page. 9. Showing and hiding elements: During our game, we want to show and hide certain parts which are needed or not needed. For example, on the start screen, we don't need to see the game area with the score on buttons. Using JavaScript, one of the ways to do this is to change the elements display type so let's start with this game area of in our script. Scroll down and just after our array method isn't here, we can grab our elements with document.getElementByid. This section which we want to grab is this game area. We can then also update the element's CSS with the style. We can update the display type. We've got display and set this equal to a value of none, just like we would do with regular CSS. If we now save this and reload the browser, our game area is now removed. However, don't worry about this game lower section just yet, we will update this as an end of game function later on in this course. If we now click on this Play button, this now causes a problem since we've hidden the game area. We now need to go back to our play function and add this back in. Let's scroll down to our play function, which is just here. We can then update the display type just like we did before. We can select the documents, we can get the elementByid which just like before was the game area. We can set the style, the display type to make this a block level element. This will reinstate our game array on the screen. If we reload and press Play, we'll now see our images. Also when this game has started, we also want to remove this play button and also the text above with the rules. We can also do this inside of the same play function. Just after this line here. We can grab our elements by ID. The rules are stored inside of the Welcome section so we can grab this by welcome. We can also set the style and then also update the Display type to be equal to none. We can also duplicate this line, and also this time we want to update the Play button. Save this on the browser, click on Play and this now removes the text and also the play button. Just before we remove the game area from the screen at the very start, once we clicked on the play function we then added the game array back in. However, once the game is over, we also want to again remove the game area from the screen. We can do this by creating a new function down at the very bottom and we're going to add this as a function so we can call it on the very last loop. Let's call this end of game. Set above function. We then get element by ID. Just like before we need to grab the game area set dot style dot display to be equal to none. We will also come back to this function in the next video and activate. But for now we just need to call this function on the last loop so scroll up to our loop function inside here. This is our last loop when images length is equal to zero. We can now call our end game function, once we have no images left to display. That we dissolve by testing this, we can remove everything apart from our first image, comment this out, refresh. Now if we play, we see the game area and then at the very end of our game area has been removed. This is now our next step in the right direction for our project and in the next video, we will round off our project by adding some finishing touches. 10. Finishing touches: Welcome to the last video for this project, where we will be adding some final finishing touches. We're going to start off where we have the total available score hard-coded. At the moment, the value of 20, which you see here, and also if we refresh, we have the value of 20 here. This is currently hard-coded over in our index page. Let's take a look at this. We're going to remove this value of 20 and add this back-in using JavaScript by targeting this total available span. Remove this and save this file. And then we can go back, go to our script.js. Let's scroll down to just after our variables just here. We can then obtain the span with the ID of total available. So let's grab the ElementById, total available add our innerHTML, and the value which is going to be equal to is the images.length. If we were to remove a value from our array, just like we have done here, we now only left with one item. Our total available score if we now press "Play", this is only out of the value of one. Let's go back up and add a second value. "Play". This score is out of a total of two. Next up, if we refresh the page and go back to the start and click "Play", notice how it says forward slash two rather than zero out of two. This is because we're not setting the current score initially until you press a match button and we can easily fix this. Let's do this by targeting the current score. Just where we were after our images.length, we can select the document.getElementById. We want to update our current score and then we can set the innerHTML to be equal to our score variable, which is just above here. This is initially a value of zero. Then each time we click on one of the match buttons, this will be updated. So click on "Play". We have the initial value of zero, and this will go up or down depending on the buttons. Next up, let's take a look at this game over message which we have here. We only want to display this at the end of our game. If we go over to our index.htmlfile, this is the line of code which we have just here. Let's begin by removing the hard-coded value from our level three heading. We will generate the score a message in our JavaScript file. Save this and back over to our script and then scroll down to our loop function. The first step is to set our message to be an empty string once the game is running. Let's grab our elements with document.getElementById. We want to grab the message and then set the innerHTML to be an empty string. Save this file. If we reload this message has now been removed. The next step is to add this message back in once the game is over. In the end of game function which we created in the last video, right down at the very bottom, this would be a good place to update our message. So document.getElementByID. Once again, we update the message, sets our innerHTML. This time we want to setup a string with some variables. We can do this inside of the back text. So we want the text of game over, your score was, now since we are using the bug fix, we can insert a variable with the dollar symbol, the curly braces. The current score we have is stored inside of the score variable. We can insert this add a forward slash and then we also want to insert a second variable, which is the total available amounts of points. If we go back up to the top where we created our variables, we've already updated the dominant with the images.lenght just here. We can also make use of this by creating a new constant. Let's call this the total available ref and set this equal to this. We can now grab this constants and then scroll down and then we can insert this inside of our template string at the very end at the same, save the file and then over to the game. If we now play and get to the end of our game, we now see the message has been updated. I'm going to have the variables inserted just here and this all now seems to be working fine. The next thing to update it in our game, if we click on the "Play" button, is we always see the text of how many macaroons. We need to obtain the macaroons text to be the items which are displaying an image. Let's start off in our index.HTML We can remove the hard-coded text of macaroons and now we can update the span by the ID of the item name. To do this, we need to grab the image name. Some one ideal place to do this is in the generate image function over in our script. Let's take a look at this, scroll to generate image, up at the top here. Let's think about what we need to do here. Each time we are generating an image, we are grabbing our images from the array and then grabbing the image name. This image name, which we can see just here, is the name which we want with the.jpg extension. Basically, we need to make use of this image file name constant. Boots also removed the.jpg at the end..jpg is four characters long, so we can create a new variable from this image file name by removing the last four characters. I'm going to add this just after the image source, create a new constant, install this in, call the image name, and this is going to be equal to our image file name, which is just above. We can use the JavaScript slice method and this is going to take in a two values. We want to slice the image file name from the beginning, which is position zero, and then all the way to four characters from the end. We can do this by grabbing the imageFileName.length and then we can set this to be negative four. Basically, this will grab our image file name such as bananas.jpg. It will start from the beginning, which is b, go right through to the end of our bananas.jpg string, and then go back four steps. This will remove the.jpg extension and store the value of bananas inside of image name. With this now stored inside of a constant, we can now update this item name. Just below on the next line, we can grab this, with getElementsById, the item name, and then set the innerHTML to be equal to our image name constants. Give this a "Save" and then over to the project. Click on "Play". Birthday candles and bananas. This seems to work in fine. Let's scroll up and add small images into our game. Let's add three more. We see the value of five just here and also the correct name appearing. The final part of this project is the handle what to do at the end of the game. Currently we're just took on this screen with the text of game over on the current score. I'm going to fix this by setting up a timeout once the game is over and we can do this in the end of game function. This is down at the bottom of our scripts and we're going to add this right at the very bottom of the function. This timeout will reset our game by reloading the browser. This will reinstate all of our images we removed from the array and also our score, along with taking the user back to the start where they can also play a game. Let's do this by creating a set timeout. Inside here we can set up our function, we can reload the page with the location.reload, separated by comma, we can add this as 3,000 milliseconds. So this will run after three seconds. Set timeout differs from set interval, which we used earlier, since it will only run once rather than running repeatedly like we did with set interval. If we now save this, over to our game and run this until the end of the game. Wait for three seconds and then when we're reloaded and taken back to the start screen. This is now the end of our project. Feel free to customize and make it your own. I hope you've enjoyed building something and putting your skills into practice. Hopefully, I'll see you again in a future course. 11. Thank you!: Congratulations for reaching the end of this course. I hope this course has given you better idea. How HTML, CSS, and JavaScript can be together. The greater useful and prom project will be gone by creating the user interface using HTML. You display the rules, the play button, and also the game area too. Once this will complete, to move on to identity styling using CSS to make our app look and feel a lot nicer. Then we got to work bringing our project alive using JavaScripts by generating random images and numbers, loop in, along with working with timers and also updating the DOM. Remember, if you enjoyed this course, I also have lots of other projects too in need JavaScript Plum series, check them out. Thank you taking this course. I hope you've learned some new skills and enjoyed building these projects. 12. Follow me on Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on skill share, 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, and hopefully I'll see you again in a future class.