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. Creating the HTML structure

    • 3. Adding the CSS styling

    • 4. Including images and the images array

    • 5. Generating random images

    • 6. Working with timers

    • 7. Creating a number for each image

    • 8. Checking for matches

    • 9. Showing and hiding elements

    • 10. Finishing touches

    • 11. Thank you!

    • 12. Follow me on Skillshare!


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:

Chrome Web 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!


1. Introduction: welcome to the drought's grip on serious My name's Chris, and then he'd show you how to use HTML. CSS on Josh. Fifth can put them all together to build a phone on Exciting Project. The project, which will build in this course, is a number much game. This number, much game will randomly generate an image after a set amount of time. Also a number over generated to which the user has to decide if it matches the number of items in image on the click, the forms of off thumbs down select the number will even be correct or one higher or lower than the actual amount. He things more challenging this number much game is a great way to see Oh, hey html. CSS on the garnish can work together. We begin by great in the user interface, using a camel to display the rules of the game. The play button on also the game area with image, the number on also the buttons after this will move on to the idea that the style in Houston CSS make up look nicer. Then we can get to work, bring in our projects life with Charles gifts. We kick things off by setting up our images on how to include our images, the ray with these images in place with then discover how well can display them onto the screen and also how to generate them randomly. After a given amount of time, we make use of timers malfunctions, working with the DOM fund so much more. Then we move on to generating our random number. Uncertain of our buttons. Check if he uses choice is correct. Along with going on fighting elements on so much more, this course will teach you how we use regular Java scripts, work with our family, profit on using any unnecessary jobs, the frameworks or libraries. So thank you for your interest unless get started building this project. 2. Creating the HTML structure: Okay, So to get started with our number much game, we're going to create the indexed or hate mail page. This will contain all these structure on content, which we need for our project. So I started in visual studio code, which is the text editor I'm going to be using for the rest of this course. So let's begin over on the desktop would create a new folder. I'm gonna call this the number much once it is done. Weaken drug this over into the text editor, open the soup. But I need to create a new file for index page. Let's go to the sidebar and then inside here, win. Click on this new fire like on, or we can hit command or control and to create a new file. We can then say this file as our indexed or hate email on that. Since we drugged over the folder, this is automatically saved in our number market project. Let's say this American create our basic HTML structure. I'm looking do this in visual studio code using a short cut. This is because Emma is provided as a plug in with visual studio code by defaults, so it is simply type HTML cold in five, and then he tends A. This will provide us with the basic head small structure, which we need. If you are using a different text editor or warm, which doesnt have, am it enables as a plug in, you can't simply type this out. Then let's open this up inside of the browser amusing crawling for this course and that this is the finished project just here. Now let's add our content into the index dot html. So let's start by creating a title, which is the number much game. Save this file, and then we can also open itself inside the browser to If you go into the sidebar we can, then it right or control. Click the index dot html, copy the path, and then we can paste this into a new tab in the browser. If you weren't able to do this with your text editor, you can also double click on the index dot html page inside of your Project folder on this will open index page up in your default browser. So this is all we need to do now for the head section, so let's go down to the Bonny, where we can first start with the welcome section. The welcome section is this area off text, which explains the rules of the game. Let's start by creating a surrounding developments on this Davis Guns have an i d of welcome. Well, we use his I d. Later on in the course when we come to the child's Cup section, the first thing to do inside here is to add a level free head in with the tax off. Welcome to the number much game and then Dr Thoughts. I'm then going to surround number March in the Emphasis Dog, which is going to make it. It's Alec just like here. Let's take this section out here looking at the M tags which has an opening and closing time and then pasty text of no much back inside. If you know, say this over to our project on reloads. We now have the level free head in showing in the browser. Next up, after our level free heading, we're going to add the text off. The rules are simple again, this is going to be emphasized. So we had these in the M tykes. So the rules are simple, but they're not the rest of attacks inside of the P elements. So the next line is a random image. Under number will be generators. No, this in a separate P elements. So it's odds on a new line. The text off if the number on the screen matches the number of items, and I want to add this on the new line just so it's more visible on the screen on the rundown picture, we're going to say, Hit the forms up, then just blow this a new P section, and this will be the text off if they are different, his films down. And then finally, for this welcome section, a new section off text. This will be the text off you have, let's say four seconds to decide. Let's give this a say, even go back over to the browser and then reloads, and there's all of our text for our welcome section. It doesn't look too great of a minute will add some CSS in the Love Cohen video. So Joon's cause we don't have some dynamic sections, meaning that they can change. So as you can see here we have the number off seconds, which the user has to decide under the moment, we've simply hard coded the value of four. So to make this section dynamic, we're going to prepare this point audience a spon elements. Let's cut this out. We can temporarily arda before back in place, looking out an I d, which is going to be equal to time setting. So again, we will make use of this idea later on in the course to dynamically change the number off seconds inside the span element. So next, dopey going to add a new section on. If we take a look at the finish 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 waas and then display the score from your game. So just below our Dave, but still within the body section that's on a button with an i d off play button. Inside, he weaken anti text inside of the strong tags to make it more bold. The text of play and then just after this button, we can add a Level three head in the I D, which is going to be equal to message with some temporary hard Cody text off game over your score. Waas Often I would comport 15 out of 20 Next up, just after our level free head in but still within the body section, we're going to add a new section, which is for the game area. This is going to be surrounded in a div with the I. D of game area. This section is going to contain our information, such as I couldn't skull the image to display the number to compare against on also forms of on farm stand buttons. Let's start at the top by out in a level free head in, which is for our current score. Someone give us a i D of score inside here. The Texas call two followed by a colon. So inside of this level free heading, we're going to hard to spot elements, so the 1st 1 is going to have the i d off you in school. So this is going to be the skull which we're going to go up and down Jude in the game as they using etc. Number of images correct or incorrect. That's at a temporary, hard coded value on one side fall just after this first set of spine 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. So I have 20 images available, so I'm going to add a 20 inside here and then separate these with a slush so we can change the total available points. We can also add an i d to this make this dynamic. I call this I d. The total available. Okay, so now on the next line, we can add that the important image dog, 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 are they empty image elements on the next line? AP element in this section is going to say how maney on, for example, mark rooms. So once we have play, this will be the text that down on the bottom here. So how many cupcakes having a pizza slices on so on? Let's obviously no. So how many we need to change the item named for each image. Some guns are this in a span element, Let's say for no macaroons so you can change his tax. We can also add an i D. Inside of our opening tag, honestly, going to be equal to item name and then a question mark just afterwards. So we need me now. Don't for our html. The very last thing to add is our buttons on also the number to display. So the 1st 1 is going to be a button for the film's down. I'm looking aren't the forms down symbol as a hate schimmel entity, which is the code off Ambersons, the hot X one f double 40. In between our two buttons, we're going to have a pee element which will display the number. Let's add a hard coded value for now off six A. I D. Which is going to be equal to number and then finally down at the bottom, going to add all forms or button. This is going to be a hateful entity, which is ampersand the half X phone F double 40. So give us a safe and then go to the browser give this page refresh, and now we see all of the content on the screen. We have our forms up on forms down on all of the text we need for the rules. So this is it now for content, and in the next video, we'll make this look a little bit nicer by adding some CSS. 3. Adding the CSS styling: So now we have our content on the index page, but it doesn't look too pretty at the moment. We need to make it look more like the finished version, which we see just here on. This is just a simple case of and in some CSS style. Um so to begin, let's go over to our project on in the sidebar, create a new file, honestly, going to be called the styles dot CSS. And make sure this is in the route off the project alongside the index page. Well, they need to link this file to the index page inside of the head section sled, scroll up, and then just after the title, we can aren't a link. First of all, the relationship attributes, this is a style sheet and then the hatred attributes which is going to point to the location off our style sheets. This is alongside the index page, so we don't need out of file path. Weaken simply aren't in the name off styles dot CSS save this file and then go back over to our styles dot CSS file where we could begin it to create our style in for projects. So, first of all, let's tiger to the body elements, which is going to apply to the whole page. I'm going to make this game aligns into the center. So can Arditti text the line, which is going to be equal to the center, but a semicolon the margin. So the default margin for the body. I'm going to add zero pixels on the top and bottom and then 10 pixels on the left and right just to add some space in on the outside the party and I'm going to re set to a value of zero just to remove any browser defaults. Working sets up a fun family. I'm going to go for aerial Helvetica and then a San Serif to make the phone size a little bit bigger. I'm going to set the default to be 1.2 realms and the color for the text, which he going to be an RGB value. So I'm going to add to the free values inside of the brackets. The 1st 1 is 33 31 and then 31 which would give us the dark gray color for our text. The height of the project is going to be 100 VH, which allows the project to stretch to 100% off the View port height to make sure the project filthy heights off the screen. The next thing I'm going to do is to out a Grady int on the background on this Is Equilar What you see just here. This is going to be a Grady into blend from one color to another. I'm looking notice by set in a linear Grady int to our background image. Let's onto the background image Property said this to be a linear radiance, so a linear Grady int will allow us to transition between two colors in a straight line. So inside here, I'm going to pass in free values. The 1st 1 is 100 and 20 degrees, which is the direction across the screen where the colors will blend from onto, and I'm looking at our two colors to blend between. I'm going to first on a hex finally used to begin with off 84 F A B zero, which is the green color procedures here, separated by a comma. The final you to blend to again is going to be a hex value, which you're going to be eight f be free fo save this file and then let's go over to the project. Refresh and I will see the green color to the blue color in the background on this is at the angle over 100 and 20 degrees, the next open going to target the number section. So if you scroll down, we have this number section just here, which is for the number which will flash on the screen. Clearly, we have this hard coded as a value of six. You want to speak a little bit bigger, so it's more easy for the user to see. I'm also going to on the animation, which will make this flash in and out, so it's more clear to the user that this is a number they need to compare the image against . Let's target this with the hush value off number. Did you have an I D over any styles? Don't CSS. Let's grab our number and then inside here we can begin by adding the font size to make this bigger overvalue off five room the line height which is going to march. This is going to be a value off five room to Nikola. I'm going to rt rgb value. So you can first are the value of reds green on also blue. The margin just had some space on the outside. So zero top and bottom on 0.5 on the left and right The next will be gone to our day animations make this flash in announce if you save them reloads. We currently have a plane and blue number. I'm going to add a CSS animation and to make this flush. So to do this, we can eyes the animation property I'm going to add in free values. The 1st 1 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. So I want this to appear over one seconds and then furred weaken set a value of how many times you want this animation to repeat. So we kind of set a number inside here, but I'm going to set this to be a value old infinite. So we keep running. So now I have this flash animation just here so below. We need to define exactly what want this flash animation to look like we can do this point idea the key frames rule or will flash animation. And then in signing he would consent to the stage is where we want to apply. Very CSS. Rell's at different stages off the animation. So, for example, we can add 0% which is the start of the animation. Once. Also changes to be our 50% un also changed art 100% to so inside of the curly braces for each one will concert, which CSS would want to apply. That's each stage of the animation. So all we need to do here is to change the apostle T from a solid color to be see through and then back to a solid color to give us the flash effect so could start off by having the capacity to begin with as a value of born, which is simply a solid color. Halfway through this animation weaken then reduces following you to be anything we want, such as a 0.4, and then at the end will changes back to a value of one. So remember, this is all happening over a duration off one second, so we'll begin at a solid color, it will become transparent. And then at the end of a second it will back to a solid color. And it's hopefully should be the effect, which we're seeing if we now go over to the browser on refresh. Okay, good. So now with this work and we're going to target the buttons ive side, which is the thumbs up and also forms down, we want things to appear in line, click on play. We want him to appear in line just like we see here. We can do this by in group in these together in a surrounding Dev and then add in a class to target in the CSS. Let's go over to our index dot html. Don't At the very bottom, we have our number surrounded by 02 buttons. Could these free lines of code out the place we conard a surrounding div bases back in? We can end at a class name which is going to be the in March Buttons save this file and then over to the styles dot CSS right at the very bottom. Since this one is a class for use the dot on the name of much buttons. We could make use of the CSS flex box to align our items. We do this by setting the display time to reflex and M consent to the horizontal and vertical alignment to be in the center. So, first of all, a sign that justify content to be in the center. Say this over to our project on reloads. This now centers our items across the page. We can also add the online items property just below on. This will add its, um, vertical alignment to so this be in the center. This will make sure our vertical alignment is set to next up. We have the buttons dizzy films up on the forms down button again. I'm going to make use off a linear Grady in To do this, I'm concerned to the background image to be once again a linear Grady int you first find who is going to be two top. This is the direction off the grade Ian's, for example. This was set up the Grady int from the bottom to the top. We could add it to left, and this would make sure the grading would blend from right to left. The typical is what you want to blend in between is a value off F double D B 92 On the second moan is value off de bone FB double F. Let's say this and then reload or project when l see the background radiance on also that these items are aligned horizontally and vertically. Next up, let's add, it's more style into our button. So just after old background image, the semi colon, we can set the board of all you to be known. So call me if we say even reloads. We see that our items are square. But if you go to the finished version and click play, we want this rounded effect on the buttons. So to do this, we need to set up the wit from the height of the button, American said. The border radius. Let's that the height to be eight pixels did with to be also eight pixels to and then two on the rounded effect we need to aunt aboard Radius, which is equal to half of our Whitman Heights. So 40 pixels say this refresh on all three of our buttons on a rounded. We just need to make the phone size a little bit bigger. So back. Oh, Toure button. Instead, the phone size to be a value of 1.4 rooms. Say this reloads. And now we're emoji icons on also, text is now larger. Good snow have a lot of all structure in place for our project. In the next video, we're going to begin looking at JavaScript. Unhook, announce 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. I also take a look at idea our images to so provided with this course is a images folder with some sample images, which you can use on also a text file called Array, which will take a look out 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, do be sure to also change the title of the images inside off this array. If we take a look at this and open this up, this is a JavaScript arraign, which is stored in a constant called images. On 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 images bananas Dajae Paige On this house. It's six different bananas in the image. We don't have the birthday candles, which is seven the blocks of six and so on. So if you do use your own images, be sure to change the image name on also the number of items too much yours and then you're good to go If you're just going to follow along using the images supplied, all we need to do is drug over our images folder inside of our projects. You can use these in just a moment. The next thing to do is to go into the sidebar, create a new file honestly, going to be for with JavaScript. So I'm going to call the c script dot Js. We also need the lengthiest oo indexed or hate smell. And I want to do this right at the very bottom, just above the closing body tag. We cannot a script dog, and then these souls, which is will file path. This is alongside over index page. So we need to do is to on that script dot Js contest is working by doing a alert in the script. Js, let's do an alert. You're simply the text of high open up the project inside the browser reloads and this is now linking to our jobs would file because we can see this alert. The next step is now copy over our ray from the sample file. So select all. Copy all the contents. Remove over. Alert number complacence in. So if you do want some practice our typing this out. This is completely fine. This is just being provided for convenience, since it is a lot off repetition. So now we have our ray off images to work with. We contest these images of working by display in them on the screen, so just blow this. That's cruel. Dome. I want to create a constant called the image file name. This is going to stall what? You may June. So 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 constructed using this name. So back down, consider this equal to or images array. And then inside of these square brackets, we can select any one of these objects which we want. So items inside and ray will begin our position. Zero. So the 1st 1 off bananas will be zero and then worn on someone. So to select the bananas, let's scroll down, We construct our array out position. Zero number can use the daughter notation to select which field who want from the object. We can even select the image. Name all the number off items Let's grab the image name and then we could do a console log for our image file name. So say this And now open up the projects. Right Click on inspect Go to the console, Refresh And now we see the name of bananas Dodge a peg. 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. Honestly going to select the image element from the index dot html Remember, From the first video, we created a empty image Elements I'm looking No, select this using documents Don't query selector person in as a spring The name of the elements which is image i m G. So now we selected this image elements We can now reference it using the image name we can set The image source 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 Dodge a Peg, but we just want to point this to the images folder to so inside the back ticks weaken at this as a template string, looking out to the final name off images forward slash weaken, then insert a variable using the dollar symbol and then curly braces. The variable, which wants art is the image name are we already have this stored just above so paste it's in. I say this refresh. I'm going. I'll see our image on the screen. If we go ahead and change this to be images free, this will end select a different image from Hubble array. Good. So now we know how to display our images in the project. Next, we'll move on to generating these images randomly. 5. Generating random images: inside off the browser. We now have our images showing I went over, constrains them by changing the number inside off the square brackets just here. But we want this image to be completely random. All we can do is by generating a rundown number the past inside of these square brackets. So let's begin by wrapping this code inside of a function. So I'm going to temporarily could sell these three lines great a function with the name off generate image. Then it once passed in a random number as a argument and then sets up on E Essex are a function just like this inside of the function body or these curly braces looking, then paste in our image code from before and since when you 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. Okay, good. So now have our function, which generates an image on dysfunction, will need a number past 28 Each time it's called. We need to call this function on a regular basis to cycle through the images introduce, we can create a new function, which I'm going to call loop, so just blow this. Let's create a new loop function says of our function just like this. So the first thing we need to do inside of this function body is to create a random number . So let's create a constant to store this in called random number. I'm looking generates a random number using math dot random. So because we have 20 different images, we want to create a random number to select any of these 20 images so much that random will generate a random number between zero and one zero. Being included on one is not included. So, for example, we could get a value of 00 point bone 0.9, but not including one. We can take a look at this in action that just below by doing a console log, passing in the value off random number but its display, we also need to call our loop function. So say this. Go to the browser and then refresh. Okay, good. So 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. So we want our random number to be one off the 20 images. Remember, I would. Array index begins our 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 mouth. Don't run them by the value of our images. Don't let so say this refresh. And now what? You get lots of different values between 0.7 on 19 point something to to make this a rounded hole number. We can put out this code here. We can then aren't a math don't floor, which will only round down our number to the nearest whole number and then passing our random number. Save this file refresh. And now I should get a random number between zero and 19 given those 20 different options. Okay, good. So now we have our random number generated. We don't need to call this function anymore, but instead of the console log, but now we need to call our generates image function from above. Let's understand person in our random number, which is function expects this is also stored in this Constance called random number. So paste this in So this file and I want to go over to all index dot html. The next step is to call this league function each time our play button is clicked. Let's find the play button inside of all hate smell, which is just here American I day on a click event handler So are on Click. The on click event handler will ruin a function each time this element is clicked on on the function which want to run is the loop function which we just created. Give us fire to save and then over to the browser. We're contest this by clicking on play does the console. I'm gonna get a run them image each time we click on play. Good So now we're healthy images randomly generated. We do, however, only wants each image to display one student the game. To do this, we can remove on item from the array used in East flights Method. Let's go back over to our generate image inside of the script. Doctor. Yes. Inside of this function, we can then select our images array. We can use the job script spice my food, which is going to remove an item from the array each time this generate image function is run, so this will effectively remove an image from other array each time it's being displayed on the screen. So inside off our Spice Mefford, 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, so capacities in as the first value the second value is the number of items want to remove . This is just one image. We contested silence by doing a console log us and in the value of our images array. Save this file refresh open of the console would right click and inspect. Click on the council tub pick play. So now we have 19 items inside of our array. Click again. We have 18 17 16 15. So this now means that each time a image has been generated, then get removed from our array on we. Then it wants that closer to the game being over. But if we keep on clicking, play until we have no images left when I'll see, we have an error inside the console, since we now have no images left to select to stop any errors, weaken aren't 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. You can check if the images array well, then 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 it stopped the loop. If the images land is greater than zero, meaning you still have some images left the cold below will then run and continue. As usual, Let's say this alma contest ISS. You can play, and so we get to zero and you can see once we get to zero items in the array, we no longer see any errors on the screen. We know making good progress with our projects. And in the next video, we'll look at how working out a timer, the change between images after a given amount of time 6. Working with timers: so when companies cycle through the images by clicking on the playbook, but want this to be taken care off automatically on the way to do this is to use a timer we can use a timer called Set Interval On this method will repeatedly call our live function after a given amount of time. Let's take a look at how we can use this method over in the script dot Js. Let's begin it just below our loop function. We can then go ahead and set our interval and then inside of the brackets, we're going to pass in two things. The 1st 1 is called which we want to run on. This is our lead function. So we capacities in first. The 2nd 1 is the duration, which you want this looped to repeat after honestly going to be in milliseconds. So that's out of 1000 1000 being a second. So now if we say this on, if we refresh the browser, we see that after one second this code will end run boots. However, it once we visit the browser this run straight away rather than waiting for us to press the play bottom, we don't want this to run until the game has started. So broken changes to be inside off a function that comment out this line service will stop running looking. Then it creates a function which I'm going to call the timer says a bowel function body anaemic and grab. I was set Interval Remove this inside off Alzheimer If we say this and now refresh the project time and I won't ruin until we call it this time function. So now we need a way to call this time and begin double game the duties and want to create a play function which is responsible for starting our game. So just below the time, uh, we create a play function on. For now, all 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 don't need to go over the index dot html under place. I will loop with this play function when the play button has been clicked. Give this to save and then over to the browser refresh. Let's click on play to start a loop on the snow starts off our game However, if we take a closer look, assumes you could play is the one second delay before the first image appears. This is not the behavior will want because we want the game to start immediately. As soon as the play button has been pressed, the fix is delay in starting the game, Weaken first called the Loop function manually over in the script. Doctor Yes, inside of all play function Weaken first called the Loop Function just before the timer on . This will start the game immediately. So say this refresh press play will have an image appear straight away, and then after one second we see a new image appear on the screen. So 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 it Stop Timer says a bowel function just like this on the way we can stop our set. Interval call is to use a method called clear interval person in the name of the timer, which you want to stop on. This is simply timer. This function will stop the timer from running in But when you want to call this function, well, look in the loop function. If you scroll up, we already have a if statement just here, which will check if we're on the last image. This section of cold here will ruin when the length of the images Ray is equal to zero, all the game is basically over. So inside the heat it would make sense to also stop the timer to by calling the stop time of function, making sure that stop timer is placed above the return statement. Otherwise, this cord will never be run. With this in place, one must think I want to are the Easter set of the times l A. As a constant about the top. Let's scroll up just after I would array. You can say that the constant called the time delay. I'm going to set this to an initial value off 3000 milliseconds, which is three seconds. We can now use this time to a constant inside overwork set into the call. So rather than it's hard coded value off, One second looking now pass in our times away, and this will control how regularly the timer will run So now, since we have our time delay it stored in this constant If we take a look over in the browser, he would say we have the text off. You have four seconds to decide. This value before is a hard coded value in our index page. Let's go over to the index dot html And if we take a look for all the time setting spawn inside here, we can now remove this hard coded value before an American use JavaScript to target dishpan elements by grabbing the i d. Which is time setting over in the script. Doctor. Yes, just below our time delay, weaken Select this. My grandma need documents and then get elements by i d the i d want to select Is this times that in which we just looked at before we can and it set the value by using in a HTML I want to set the value to be equal to the time delay un Remember this time delay is in milliseconds. So to display in seconds we can divide the value by 1000 Say this refresh And now we see the value off three seconds. If we go back and change our time delay to be two seconds. This is an updated in our index page. So this is how we can set up a timer using the set interval method. Next, we'll add another important piece toe. All game on 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 to numbers. First is to get the correct number off items for the image and then store it into a constant second. We need to also generate a number which is Eva one higher or lower than the correct number . We could generate a completely random number to display. But then, if we were to get some things such as one or two and then 12 pencils appeared on the screen , the game would then get pretty easy. Have any display number either correct or only one number off will make it much more challenging? Game. Let's now go down to generate the correct number for the current image. So just on the knee, where we set the image sauce inside the generate image function once great eight new constant called number off items, we can then grab our images array plus in the same random number. So this much is the image which is being displayed, and then, rather than grabbing it the image name, we can now go up and grab the number off items. So this is now the correct number of items associated with each image stored inside of this constant, and now we have the correct number. We need to generate a false number, which is either one higher or one lower on this number. To do this, we can first generator random number between zero or more B zero or more. Look, it was two options. Want to either add one or two deduct born from this number? Let's start by generating, I will run them number. I've installed this inside a constant called number 0 to 1. We can use the job script, math dot random function to give us our two options. We could multiply this by two and then, just like we looked at earlier, we can also do math, both law, which will round this down to the nearest whole number So we can surround this with math. Tough law. This must off law is just like we looked at earlier when we created the random number to generate the image. So now we have these two options off zero or one stored inside of this constant. We can now use these two options to I would take away one or bad one. That's against all this. Any constant that's called his plus o minus. And then we can make use off the job. Script Turner Operator. So when using the JavaScript, turn the operator. This is a bit like a simplified if else statement. Basically, Jack, if a condition is true, and then providing Malcolm so we want to you check if the number zero to warn is going to be equal to zero, it is the U Z question mark to provide a outcome. If it is, we want to stall the value off. Negative one. If not, we usually call onto Bride A L section, and then instead we're going to add 12 So basically, if this number is being generated on, it equals zero. Just like we have here, the value of negative born will be stored inside his Constance. If this is a one, this is in falls and then the second section will run, and then the value of plus born will be stored inside this constant. We can use this very soon toe, aren't told a number of items to either increase or decrease by one. But before we do this, we also need to generate another random number between zero mourn, 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 so we can gain make use off Muftah random. And I'm going to call this a constant off split, just like we did above were concert my thought floor around this down person in the math, don't run them, function on the rockets and then multiply this point of value off to the next thing to do is to use this option off 0 to 1 which is stored inside of these constants inside often if statement to decide whether to show the rial or the false number. Let's that our if statement just below we can say if the splits is equal to the value of zero, we want to ruin this code inside else. This value is worn. You want to run the cold inside of this section, so we're going to use this section and aren't the real number to the screen. So how do we go about identity number to the screen? Well, over in our indexed or hate smell, we find the number. We couldn't have this value hard coded into a hedge Imo so we could remove this. And now we can update our number. Using this I d wouldn't grab this using documents. Let's get element by I d wouldn't grab our number, which is the idea of the elements set the inner hate Jamal to be equal to all rial 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 Dog gets element by i d We want to grab the number once more Is that the inner hate smell? Open up the back tick so we can insert a variable using the dollar symbol and the curly braces the variable which wants art is again number of items But this time, rather than just adding that the number of items We also want to arm the plus or the negative to this number This is stored inside the constant called plus or minus so we can add it this into here. So just to recap here we're creating a random number between zero or more. 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 off the number of items, have a plus one or negative one. Next up, let's give this a save. And if we go live to our array testing, this will be a lot easier if we just have one item to live through. Let's go up on. I'm going to comments how everything except the bananas say this into our project. Press play whips and we got a value of one. Defines like to check this out. Let's go to right click. Inspect into the console. I don't see any errors, so let's check this out. I found to generate image, so I grabbed the number of items on. Actually, number of items here just needs to have the underscores like we have in our array. Let's replace this, save this file and go back into the game. Good someone. I will have the value of seven if we take a look at our array up at the top. But it but honestly, correct Number six. We also congenital rate the number one higher, one lower so the free values we should get is 56 and seven. Let's keep trying. We got five. We've seen seven and that's six six on seven on five. So we have the free 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 forms up on forms, down buttons on also check for a much. 8. Checking for matches: when I have the real number for her image, UN also a number to display. We now need to compare these numbers when the user clicks on the forms up or down buttons. To begin. We need to create two different valuables to stall these numbers. First of all, so just blow Our constant wouldn't create a variable for the current image value. We consider this to an initial value off. Zero on this will be overridden once we generate our image. Separated by a comma. Woken aren't a second available on this is for the display number initially to a value of zero. On this display number is one which appears on the screen. So we could even be one less one mawr or the correct number strolling down to our generate image function. We can now update these variables first of all, inside of the if section just below where we aren't at the number to the screen. This section is when the computer has selected the correct number to display. So here we can update the display number with the correct value, which is a number of items, so they display number. It's going to be equal to number off items. After this we have the L section, which is the section which generates a false number. Therefore, we can update I will 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 needs no update the real number. We can do this outside of the if else statement just above where we remove our image. Someone set the Korans image value, which is a variable with sides over the top. I said this equal to a real number, which is number of items. Okay, so now we have these two variables being updated. We need to compare these two values when the user clicks on the forms up or the thumbs down buttons that's first had It was all index dot html where the two buttons are created. You know, first bottom Akhenaten on click Event handler, which you're going to trigger a function. So we're going to create a function which is going to be called much well. Critics function in just a moment and then for our second button, which is just below we can also are the on click event handler. I'm the name of the function which is going to ruin in here is going to be no much. These two functions will be also updating the score, so we can also remove the current school value, which is currently hard coded us, for We no longer need this value since we'll be updating this from our script. So save this file and then let's go back over to our script Doctor. Yes, it was. Grow back over to our valuables just in the display number separated by comma win. Greater New variable, which is called score said this to an initial value of zero and this variable will be updated when we click on the forms up off forms, down buttons. Let's now go to the bottom of this file and we can create it this much on no much functions . First of all, it's pretty much function. I'm going to set this up as an ES six are a function so inside as much function. We want to check if the current image value on the display number is equal. But on these two variables in so the current image phone you, we want to check. This is equal to the display number. If it is, we can use the job script. Ernie Operator, If this is true, look and then update I was called valuable by one. Why is any plus plus incremental? If not, we can decrease it by the value of one. If this is not a much next door, we can also updates the element on the screen on the element on the screen We want to update. Is this cool and score? We can do this with documents. Don't get settlement by I d Updates of a cooking school By setting the stage tomorrow to be equal to our school valuable. The no much function next is going to be pretty similar. We can set up our function. This is also going to have a job script Ernie operator, just like a booth. We want to compare these two values. So let's copy this code. We can paste this in and the only difference is we want to do the opposite. So we got an exclamation mark. So if this final you is not equal to this value within going to update over 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 know press play, we still only have a one image inside of our ray, so this is much easier to test. So we know that is six bananas, but we get in the value off. Seven. Let's give it a thumbs down, and then we get a school value of one. If we click on the forms up, this should be deducted by the value of one. I went back to a value of zero. The problem which we currently have, though, is we compress the forms of off thumbs down buttons as many times as it wants for each image. We do, however, only won the user to have one selection per image. Some of the even get it correct or incorrect. I'm gonna go ahead and fix is now tobacco into visual studio code. We can begin by creating new variable up at the top, your stuff to school and separated by a comma. We create a new valuable called chosen, honestly, going to be equal to an initial value of false. We can now uses an update this in our much functions down on the bottom. So inside here once a much button has been clicked we can then it's at the chosen, available to be equal to true on the same. If he know much, button has been clicked too. We can also update this to be equal to true. So once it's being 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 respect the cold inside of these functions? If the user has already made a choice? Well, we can do this by its surroundings, cold in n if statements. So first of all, in the much section could this out great in s statements, we can use the exclamation mark and this will track if the chosen value is false. Therefore the user has not made a selection. So if the user is not made a selection broken, then it run the code insider here the same fully know much section down below. Let's take this out. We can say if the chosen available is false, we can then run the code inside of here. So once one of these buttons has been clicked. It then updates the chosen available to be true. However, next time we generate a new image, we again want this before so the user can make a selection. We can update this off in our loop. Each image Let's scroll up inside here outside of the if statements looking, then it's edible. Chosen variable deductibles, meaning the functions below. Condemn RL that's tested silence broken first on comment outside our images from our array . So this file back over to our game on play. So now if we try to click on these buttons multiple times, well, you're only allowed one selection per image on this is a big improvement to old 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: you're in our game, we want to show and hide certain parts what you needed or not needed. For example, on the start screen, we don't need to see the game area with 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 a script. So scroll down on it. Just stuff that I would array. Let's Addison here when gravel elements with documents Daughter gets element by i. D. He section which want to grab is this game area. We can then also update the elements CSS with no style. We can update the display type. We've got display and said this equal to a value of non, just like we would do with regular CSS. If we now say this and reload the browser, our game area is now removed. However, don't worry about this game over section just yet. We will update this as an end of game function later on in this cause. If we now click on this play button, this now causes a problem since we've hit in the game area. So we now need to go back, Otwell, Play function on Add this back in. Let's go down to a play function which is just here. We can then update the display time just like we did before we construct the documents. Wouldn't get the elements by i d, which just like before was the game area. We can set the style the display time to make this a block level elements. This will then reinstate of a game. A relative on the screen for reloads press play will now see our images also, when this game has started, we also want to remove this play button a nasi text above with the rules. We can also do this inside of the same and play function just after this line here we can grab elements by i. D. So the rules installed inside of the welcome section so we could grab this by welcome. We can also set thes style and then also update the display type to be equal to known. We can also duplicate this line on also this time I want to update the play button. Say this over to the browser, click on play, and this now removes the text on Also, the play button so just before would remove the game area from the screen at the very start won't be clicked on the play function with an added the Gay Mary 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. I'm going to add this as a function, so we call it on the very last loop. Let's call this end of game set about function wouldn't and get our element by i d. Just like before when he described the game area said dot style, not display to be equal to known. We will also come back to dysfunction in the next video on add to it. 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 the images length is equal to zero, so you can now call our end of game function. Once we have no images left to display, let's be the sort by testiness arm. We can remove everything apart from all first image coming this out. Refresh. It's not for play. You see the game area, and then, at the very end, double game area has been removed. So this is now a never step in the right direction for Project, and in the next video will round off our project by idealism finishing touches. 10. Finishing touches: welcome to the last video for this project where we will be I didn't some final finishing touches. We're going to start off where we have the total available skull hard coded. So at the moment, the value of 20 which you see here on 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 at this back in using JavaScript by targets in this total available. Spun. Remove this on that. Save this file, and then we can go back over to what script? Doctor? Yes. Let's go down to just after our valuables on just here. We can then update the span with the i d off total available. So let's grab the elements by i d So total available Are there were in the hedge Dimel on the value which this is going to be equal to, is the images don't lend. So if you were to remove a value from our ray just like we have done here, we know only left with one item. So our total available score if we know press play, this is only out off the value of one. Let's go back up. Not a second value play. Now the 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 he say's forward slash to rather than zero altitude. This is because we're not setting the current score initially until a press a much button. Alma can easily fix this. Let's do this by tightening the current school. So just where we were after our images don't learn, you can select the documents. Don't get element by i d. We want to update our couldn't scar and then the concert city in a hey HTML to be equal to our school of edible, which is just above here. So this is initially a value of zero, and then each time I click on one of the much buttons. This will be updated, so click on play we have the initial value of zero on. This will go up or down, depending on the buttons. So next up, let's take a look at this game over message, which we have here we only want to display This are to the end of our game if we go over so index dot html file. This is the line of code, which we have just here. So let's begin by removing the hard coded value from our level free head in, we will generate this score a message in our jobs, good file. So save this and back over to our script and then scroll down to our loop function. So the first step is decides our message to be an empty string. Once the game is running, that's grambo Elements with documents dot get element by i d. We want to grab the message. And then it said the inner hey, Jamal, to be an empty string, Save this file. And if we reload, this message is now being removed. The next step is target this message back in once the game is over. So in the end of game from June which were created in the last video right down at the very bottom, this would be a good place to update our message so document or gets elements by i d. Once again, we updated. The message says I was in a hate smell, and this time I want to set up a string. Whitson Variables. We can do this inside of the back ticks, so we want the text off. Game over your score. Waas Now, since we use any back ticks weaken, Insert a variable with the dollar symbol, the curly braces. So the current school we have is stored inside of the school, valuable, so broken inside this on day four words. Nash. And then we also want to insert a second variable, which is the total available amount of points. If we go back up to the top, where we created our variables, we've already updated the dormant with the images. Don't laugh just here so we can also make use of this by creating a new constant. Let's call this the total available ref and said It's equal to this. We can now grab this Constance and then scroll down. Never concert this inside of our template string at the very ends of this saying. So the file and then over to the game. If we now play and get to the end of all game when I see the message is being updated I'm have the variables inserted just to you, and it's all now it seems to be working. Find the next things updated on the game. If we click on the play button is we always see the text off. How many macaroons we need to update the Michael Rooms text to be the items which are displaying in the image. Let's start over in our indexed or hate mail, we can remove the hard coded text off macaroons. A novel can okay, despond by the i. D. Off item name. To do this, we need to grab the image name someone ideal place to do this is in the generate image function over in our script. Let's take a look at this. Go to generate image. No, but it's all Pia. So let's think about what we need to do here. Each time we had generating an image were grub in our images from the array and then it grubbing the image. Name this image name, which you can see just here is the name which you want with the dot j peg extension. So basically we need to make use of this image file name constant, but also remove the dot Jay Peak at the end. Dr. J. Peg is four. Cota's long so we can create a new available from this image file name by removing the last four characters. I'm going to add this just after the image source, creating new constant to stall this in called the Image name. Honestly, going to be equal to what we image file name, which is just above we can use the job script Slice Medford on This is going to take in to values We want to its 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 image file name. Don't then a number considered this to be negative for. So basically, this will grab our image file name such as bananas Dodge a peg. It will start from the beginning, which is B. Go right through to the end. Awful bananas dodge a big string and then go back four steps. This will remove the dot JP extension installed the value of bananas inside off image name . With this now stored inside of a constant weaken, no update at this item name. So just below on the next line we can ground this would get elements by i d the item name and then it sets the page smell to be equal to our image. Name. Constant. Give this to save and then over to the project. We can play birthday candles on bananas. This seems to work and finds. Let's scroll open are some more images in total game. It's not free more. We see the value of five just here and also the correct name appear in good. So the final part off this project is the handle what to do at the end of the game. So currently we just took on this screen with the text of Game Over on the current school. I want to fix this buying, setting up a time out once the game is over and we can do this in the end of game function . This is down at the bottom of our script. I don't want to Hyundai's right at the very bottom off the function, so this time out will reset of a game by reloading the browser. This will reinstate all of our images were removed from the ray on also always score along with taking the use of back to the start where they can also play again. Let's do this by creating a set time old inside here we can set up. I will function. We can reload the page with the location. Don't reloads separated by a comma. We can add this as 3000 milliseconds, so this will ruin after three seconds. So set time all differs from set interval which we used earlier since it will only ruin once rather than run in repeatedly like we did with a set interval. If we know, save this over 12 game under, run this until the end of the game wave of three seconds and then we reloaded and taken back to the start screen. So this is now the end off our project. Feel free to customize and make it your own. I hope you've enjoyed building something on putting your skills into practice. Hopefully I'll see you again in a future calls 11. Thank you!: congratulations for reaching the end off this course. I hope this course has give you better idea. I'll hate html CSS on Josh Good can't fit together, The greater useful on from project we've begun by creating the user interface using Hate Kimmel You Tuesday the rules. The play button on also the game Every two. Once this was completely moved on to out in the style in using CSS to make our look and feel a lot nicer. Then we got to work bringing our project to life, using Josh Gibbs by generating random images on numbers Lupin, along with work in with timers on also updating the Dome. Remember, if you enjoyed this course, I also have lots of other projects to in need jobs on Siri's. So check the mouth like you've taken this course. I hope you've learned some new skills. Can't enjoyed building these projects 12. 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.