Javascript Fun: Build a Number Match Game!

1. Welcome To The Class!: Hey, welcome to this class. If you are a web development beginner and wants to just jump in and build some fun projects, you've came to the right place. The idea behind these series is to show you what you can do with regular HTML, CSS, and JavaScript. We're not going to be using any frameworks, any bolerplate, any libraries or any templates. Instead, we're going to be building everything completely from scratch, step-by-step to show you how these free technologies all work together. This particular project is going to be a number match game. The rules are pretty straightforward. If we click on the play button, we are then presented with a series of images, and then the user needs to decide if the number of items in the image is the same as the question over on the left. If we think this is true we click on the tick, If we believe this to be incorrect, we click on the cross and our score is then adjusted depending on the correct answer. We have a certain number of images which are all unique. Also, we can change the time duration between each one of these images too. At the end of the game we'll also get the opportunity to begin a new game and also see our total score too. As with all of the rest of the projects, we create the user interface using HTML, and then we use our CSS for the styling and also the layout too. We'll work with arrays of objects, working with time delays, functions, working with the DOM. Randomly setting the source of the image element, generating and display in random numbers, comparing numbers, working with timeouts, updating the user score and also some nice little touches such as some fade, animations too. This is a great project, if you are a beginner and a newcomer to HTML, CSS, and JavaScript, and I hope you're interested in this course. I'll see you in the first lesson. 2. Share Your Work On Skillshare!: When taking any course, it's really important to not get in the habit of following along just for the sake of taking off another lecture. Take the time to process each lesson, review the code which you write, and think about how you might approach these solutions yourself. With this in mind, this class is project-based, and this gives you the opportunity to really make something personal and unique. You don't need to get too lost and divert away from the class, and you can even take a step back after you've finished the class, and come back and make some project changes afterwards. This will really give you a good chance to practice what you've learned a way from the class. Also remember to share your project too here on Skillshare, and not only will I check it out, but it will also inspire fellow students too. More information on the class project, head into the Project and Resources tab, where you can not only upload your project, but you can also see other class projects too. With this mind, I look forward to seeing what you create and upload here on Skillshare. 3. Creating The User Interface: For this next project, which is the number match game, we're going to rely on using quite lots of images. You can use your own images for this course, but I also have provided a Images folder if you want to use the same ones as me. If you head over to github and head over to the repository for this course, which is fun-javascript projects.com. You will then be taken to a page where you can download the full code, which will include all of the projects and also these steps solutions and also any assets. From here we can download the zip files, get the complete bundle. Then once downloaded, if we go into the number match game, you'll see an images folder. There will also be the cold solutions for each video too. This is going to be the game which we're going to creating. It's a pretty simple user interface, we just have two sections. We have a welcome section, where we're going to click on the play button and to get started. The whole idea of this project is we're going to cycle through a number of images, will then have a certain amount of items in each one of these images, such as two cards or eighth birthday candles. Then the user needs to decide if the number on the left is the same multiple items as in the picture. For example, we have two peppers, so this would be correct. We click on the tick. This is seven paint brushes, so that will be wrong, I'm going to click on the X. The timescale for each one of these images is going to be also set inside the project. This is completely adjustable. If you want the game to be more difficult, we can reduce the time down, and we can also increase it to make the game more simple. The game is effectively overwhelm, we cycle through all of the images. In our case, we provided 20 images in the Images folder. Once we get through 20 of these, will then get a screen at the end which tells the user how many they've got correct. Over to the desktop and let's create a new project folder. The name of this one is going to be a number match. Drag this over into your text editor. We can begin with a new file, which is going to be the index.HTML. Again, we need our HTML structure and I'm going to use the built-in emmet command, which is HTML5, and then add a document title, which is number match. Let's right-click and copy the path, and paste this into a new browser tab. Let's get to work inside of our body section. This is going to contain one main section, which is going to be the main wrapper for all of the content. We're also going to make use of this inside of JavaScript so we can give this a unique ID. I want to go for game area. This main section is going to consist of two main areas. We're going to have the start section, which is on the left, and on the right, we're going to have the image area. This go into two separate divs. The first one is for the left hand side. The class all starts. The second div is going to be for the image area to the class of image area. These are our two main wrappers for our game area, and we're going to begin on the left-hand side, which is these stats. Taking a look at the final version here, we're going to have a score which is going to be updated dynamically as the user gets these right or wrong. We're then going to have a number which is going to be randomly generated, the name of the image, and then our two buttons. Also just as a side note too, when we get to this later. The number which is generated just here. This is going to be either the exact amount of items in the image, or it's going to be one higher, one lower. This is to make the game a little bit more challenging. For example, we don't want to see 10 items on the screen. Then a number of one's compared to, since this would make the game pretty simple. In the starts area, let's open up this div. I'm going to begin at the very top with a level 3 heading. This post the text of score. The user score will be something such as 2 over 20. But these two areas are going to be dynamic. The first one we can create a span element. Let's give it an ID, which is going to be our current score. Just after the forward slash, this can be a dynamic Section 2. A second span elements. This is going to have the ID, which is going to be equal to total available. This is going to be the total amount of points which is available, which is the same number of images we're going to have. We can also add some placeholder values just to make this more visible. Let's go for two and 20. This is how it looks inside the browser. The next thing to do is to move down to our next section. If we click on "PLAY " this is going to be the number of items in the image followed by the two buttons. Let's do this under the level 3 heading. The text is going to have the class of items. This is so we can add some styling inside of the CSS. Again, this is going to be two dynamic sections. We're going to have the randomly generated number, which is either the number of items one higher or one lower. Let's do this inside of a span with the ID of number. We can add a place holder value inside here. Then a second span with the ID, which is equal to item name. A placeholder value inside of here, so this will be the images so let's go for six ducks and a space in-between. Next up, just after the p element, we can add a new div section, which is going to be the wrapper for our two buttons. The class which is going to be used in the CSS, this is going to be equal to much buttons. Then our first button, the first symbol we're going to use or the first character is going to be the tic, which is going to be used as a hedge small entity with the code of the ampersands, the hash 10003 followed by the semicolon. The second button, which is going to be across, and this is going to be a HTML entity code, which is the ampersand, the harsh 10007, and the semicolon. The next stage is to add the image area, which is going to be the right-hand side. Currently when we're just starting the HTML this may look a little messy because we need to create two sections. We need to create this welcome screen, and we also need to create the image section once the game is in play. We use JavaScript to show and hide these two sections. Let's start if we go down to our second div just after the stats, which is image area, will get to work with our welcome screen at the beginning. At the very top, we're going to add a level 3 heading, which is going to have the ID of message. This is going to be empty level 3 heading, and we'll use JavaScript later on to add a message, which is going to tell the user desk call. This section will also only be available at the end of the game. Next up a div section, and this is going to be the wrapper for our start screen. Inside here, this is just going to be all the content we see at the beginning. We'll then hide this and then begin the game. To keep this unique, we can add an ID which is equal to the start screen, and the contents to begin will be a level 1 heading. This is the text which we'll see right at the very top. Also notice how the word number match is also emphasized. That's our descend. Then we can wrap the number match in the m elements. The next section is also emphasize too. We can say the rules are simple. Again inside the m elements. Then all of the rest of the text is going to be in the p elements. The next two lines are going to be prefixed with a HTML entity for this little arrow. This is going to have the entity code which is equal to the ampersand, the harsh 96, 54, and then the semicolon, followed by the text, all of hit thumbs up. If the number of items matches the displayed number. After this, a second p elements, we're going to again use the same HTML entity code as above. We can now descend, on the text is thumbs down if no match. The third one, which is the last line of text is you have a certain number of seconds to decide. This number is also going to be dynamic, so we can change this in the JavaScript. We need to wrap this number in a span which is going to have the ID of time setting. In the p element you have, then create a span element with this ID. You can add the number inside here if you want, followed by seconds to decide. Let's see how it looks inside browser. This all looks fine, it just help us out with the CSS later on. We're also going to add a class each one of these lines of text. This is going to be a spacing class where we're going to add some spacing on the top and bottom. Let's go over to our lines of text, and we'll start with the first line underneath the title. I'm going to give us a class, which is space dash y, since this is responsible for adding some space and on the y-axis. Copy this and paste this in the p elements just below. This will give us some consistent space in when we add our styling. After this, we also have a play button down at the bottom. Stored in this div section, a button with the ID of play button, text to play. This is now all the content we need for all this welcome screen. The next thing we need to do is to add a placeholder image, which is going to be for effectively the next screen. It will take a look at the finished version just here. All we need to do here is to rotate or cycle through any of these images. All we need, and this is just a placeholder, go underneath the button and then outside of our starts screen section. A new div, which is going to be the wrapper for this image with the ID of image container. We're going to create an image dynamically using JavaScript. But for now we can add a placeholder image just so we can see how everything looks when we come to add our CSS. First of all, we can go to the images folder, and then forward slash and the name of any of our images. I want to go for the macaroons. We can leave the alt text for now since this is going to be removed very soon. Next, we need to actually add these images into our project folder. We can use the same images which I've used in this course, or you can download your own. I'm going to paste these into our number match projects. This should now leave us with an image. It does look a little messy since these two sections will be swapped. We also need to add some CSS styling, which we're going to do in the next video. 4. Styling With CSS: We're now back with our project and at this time we're going to apply some CSS styling to improve the look and feel of this project. To do this as if we're going to create a style sheet inside of our project directory. New file, and this is the styles.css. We can link this inside of the head section or index page with our link. This is at the same level as our index page. This is simply the name of styles.css. We can go over to our style sheets and begin by creating the root one size inside of our HTML selector. Let's begin with the root font-size, and I'm going to go for a 10 pixels, and also a color which will apply to all the texts in our project and let's override it use may selector. The Color to go for is going to be 212560. I'm going can check this is work in by reload the browser, and this is all now taken effect. Now we're going to move on to the game area, which was the main wrapper, and this is the wrapper for both vie stats section and also the imageArea. This was no ID, so we use the harsh. Now we're going to do here is to set some font styling and also the size. So 1.6rems, some padding. Let's go for padding on the top of 3rems. This will just give us some spacing at the top of the page just here. The majority of our styling is going to be broken up into two sections. Have the Stat section, which is all of the information up at the top here. We have the score, the number of items on the image, and also the tick and the cross buttons, and then below, which is going to be this whole section here. This is going to be the image area. First of all, let's target both of the sections and we can set the minimum height for the small screen. This is the class of image area, and also the same for stats. The minimum height, I'm going to go for 30 vh, which is 30 percent of the browsers visible viewport. This is going to make our sections a little taller. It doesn't really matter too much at the moment because you'll have quite a lot of content on the screen, but later on in JavaScript, when we switch between this section and the image, there be less content on the screen. For the image area, I'm going to apply a gradient as a background color, just like the final version. This is going to be the section oval on the right or on the small screen. This will be the section at the bottom. Moving down the imageArea, we can do this by setting a background as a linear gradient. The first color I'm going to select 859ede. For the second value, I'm going to go for 6965de. Let's check this is work in. This is fine and this gives us this straight linear gradient from the lighter to darker shade. But I'm just going to set a optional first value of 70 degrees followed by a comma. This is going to offset our gradients be across the page at 70 degrees. Next, the border-radius, which is going to apply to both the bottom-left and also the bottom-right on the mobile view. For this we can apply the four values and these go clockwise from the top-left. Top-left of zero, the top right of zero too and then, both the bottom right and also the bottom left values of 3rem. These have now taken effect on the bottom of our section. Just to see this more clearly, we can temporarily remove our image. Let's comment this out. This is how the game will look before the user clicks on the Play button. Back to our style sheets and still within the imageArea, we're going to make use of the display type of flex, which is going to allow us to position all of this text into the center. First of all, let's set the flex direction to be column. All of our content is stacked vertically, and then we can use the justify content, the spaces into the center. Since this is our main axis from top to bottom, justify content will send to this vertically, we see we have some uneven space on the top and bottom. This is because of some browser defaults on the level 1 heading. We'll take a look at fixing this very soon. Just to finish off this image area, let's add some padding all around with the value of 3rems. This uneven space at the top and bottom is because of this heading just here inside of our index page. If we go to this section just here, this is within the level 1 heading. Let's go into the developer tools and we can see this in more detail. Click on the arrow just here, and then if we hover over our level one heading, we can see by the orange section we have some default margin which is been applied to both the top and the bottom of our heading. Now the margin on the very bottom of this heading is fine because this supply some spacing to our textures below. However, to keep things more central in our container, we are going to remove the default margin from the very top. Let's go over to our style sheets and we can now remove the browser defaults. First of all, our level 1 heading. We can do this by resetting the margin on the top 0, and also let's give this a new font size of 2.4rems. We can still see that there's more spacing on the top than the bottom. Well, if we go back to our index page, this is because still within this image area, we have a level 3 heading with the ID of message. This is going to be used later on to apply a message to the user once the game is finished. But for now this is still taking up some space inside the dome. We can do exactly the same. We can remove the browser default margin on the top, reset this, and just for later, we can also set the font size to be a value of 2rems. This now leaves our space in more consistent. This section is pretty much complete, we can now move up to these cross-section. We've already targeted the level 3 heading. Let's go up. The score is also inside of the level 3 heading which you've just taken care of. Now let's move on to our P elements with the class of items. This is going to let the user know the number to compare against. All we're going to do is to make this stand out a little more, by setting font-size to be 2rems. The items class and there we go. Moving down we also have these two buttons here, and also the button at the bottom too. First of all, let's target our button selector, and we can add some base styles, starting with the width of the button and a value of 8rems. We can remove any default borders which had been applied by the browser. But we still want this to have some rounded corners. We can do this with a border-radius, some spacing to make the button a little more padded inside. So a padding value of 1 rem. Then we also need to make these different color and also remove the background color. If we take a look at the moment we've got this light gray color button one two make these buttons just basically an outline like we see on the final version. We can do this by removing the background by setting this to be a color of transparent. For this image section, this will allow the blue background color to shine through, and also the same for the stats section oval on the left. We can then apply this border color or this outline, to each one of our buttons. Inside the button selector, we can remove the background by setting this to be transparent. Then our border. This is going to be two pixels wide, a solid line, and then the color which I'm going to use is going to be a1e0e4. Finally, we can change the mouse cursor to be a pointer when we hover over any of these buttons. All we need to do is to set the cursor to be a pointer, and this will change the mouse as you hover over. Just to finish these buttons off, we're going to make sure that the cross button has the red background color. Just like we see here, we have a different color for the tick and also for the cross. A way we can do this is by targeting the second button. Inside of our index page, here, we have two buttons which are grouped side-by-side, and since these are side-by-side, we can select either the first or the second child. Further down, we also have our button which is in the image section just here. Since this is in a different section rather than side-by-side, the nth child won't affect this. We'll see this more clear if we go over to our style sheets, we can target our button and then a colon. We can then target the nth child. Let's add in a value of two since we are targeting the second button. Let's go ahead and change the border. We still want this to be two pixels and a solid line. But this time, we want to use a different color, and I'm going to go for an RGB value. First of all, red, a value of 241, 152 for the green, and 152 for the blue. Since these buttons are now side-by-side in the DOM, this is going to target the second button. If we change this to one, this will target the first one, number 3, and this doesn't affect our third button since this button is completely independent and it's not side-by-side with these two here. Let's reinstate this, we want this to be the second button. Now, we are going to move on to our stats which was the wrapper for this top section. This is the area just here. We're going to set the background color and also apply a border around both the top-left and also the top-right corners, and then also center all of this content into the middle of this section. Just before we add some CSS styling to this section, we want to cut out all of the content inside the stats, and add a second div nested inside. This div is going to have an ID of stats content. Then we can paste in all the contents just inside. Now, there is a few reasons why we've done this. First of all, what we're going to do is set this stat section to be a flex container. Meaning, we can push all of this stats content into the center. Second of all, using JavaScript later on, we're also going to hide these content when the game is not running. Back to our style sheets, we can target the stat section and then center all of the content underneath the button. First of all, a background color, and we're going to go for a value of white smoke. The border, this is going to be two pixels, a solid color, and a value of 859ede. This border should also be rounded on the top left and the top right. We can do this with border radius. First of all, the top left value of three rems, the top right of three rems too. Then we want zero on the bottom. Next, we can set the display type of flex. This is now going to allow us to center our new div in the middle of this section. When using the flexbox, the default flex direction is going to be row which is across the page, and we can center across this axis by using justify content and setting the value to be center. Next to take care of the alignment on the cross axis or the vertical section, we can do this by setting align items. Next up, the padding. Three rems on the top and bottom, and zero on the left and right. Then we can set the text line to be in the center of our section. We're almost done for this mobile for styling. The next thing I'm going to do is to go back to our index page. If you remember, when we set all of this content, we also added a class of space-y. We added this to each one of our lines of text inside of the stat screen. We did this so we can add some space in on this y-axis. We can do this by setting some margin on the top and bottom. Space-y, the margin will add two values. The first one is three rems on the top and bottom, and zero on the left and right. Good. This is now looking how we want it. Now, if we go back to our index page, we can begin to work with this image section. To do this, we need to uncomment out our image from earlier, and we can also comment out our stat screen. This will simulate how our game will look once the game has started. Let's target the image element, so IMG. First of all, the width of 100 percent, and also, let's round the corners with the border radius. Our game now looks how we want it on the mobile view, but now, when we stretch the browser to a wider screen, we want to switch around our two sections just like we see here on the final version. To do this, we're going to add a media query inside of our style sheet. At media, all screens, and also the minimum width of 600 pixels. All of these styling from above will be defaults and applied from the beginning, and then all of these style rules inside of this media query will only apply once the screen reaches 600 pixels and above. The way we're going to do this is by using this flexbox and changing the flex direction of these two sections to be row. We can do this inside of the parent elements which is the game area. First of all, we need to set the display type to be flex, and the default flex direction is row so we don't need to add this in. Next, the image area, and also the stats. For these two areas just above, we set the minimum height to be 30 percent of the viewport height. Since we have more screen space available, I'm going to change this to be 50 percent. Inside of this image area which is on the right, we want this to overlap the stat section which is on the left. Just like the final version here, we see that the right section is overlapping just a little. Now, the way we can do this is by using a CSS transform called translate. Translate is going to move our section across the x or the y-axis. Let's take a look at how this works in our CSS by first targeting the image area. First of all, the border radius of three rems. You can see rounded corners on all four sides, and then we can set the CSS transform. We see that there's lots of different types of transform we can use. There are things such as scale to scale up or scale down the size of our elements. We can also rotate our elements. But the one we're interested in is translate. Inside of here, we can set Alpha, we want to move our elements on the x and the y-axis. The first one is the x-axis which is across the page from left to right, so 50 pixels. Then the y-axis which is top to bottom, 500 pixels. This is now pushed our elements over by 50 pixels and also down by 500 pixels. We're only interested in moving our element over to the left, so we are only interested in the x-axis. Let's just use one of these values, and instead, we can use a negative value. This would be three rems. This now pulls our image section over to the left by three rems so it slightly overlaps the stat section. Now, let's target the stat section. First of all, we do some spacing, we can use the flex property and a value of one. If we then set the value inside of the image area to be two, our image area will then try to take over twice the available space as our stat section. For this area, we also need to adjust the border-radius, so we just have this on the top left and the bottom left too. The border-radius, three rems on the top-left, zero, zero, and three rems on the bottom left too. The final thing we're going to do inside of this media query is to account for this translate. We moved over this image section to the left by three rems. Meaning, we now have some uneven spacing on the left and also the right. To compensate for this, we'll add three rems of margin on the left-hand side. This should take care of our spacing on the outside of the game, but we also need to take care of the spacing inside of the stat section. We can do this by adding three rems of padding on the right-hand side. This is now it for the styling for this project. Next up, we're going to introduce some JavaScript by generating some random images. 5. Generating Random Images: A single image on our screen, just like we see here is going to be no good for our project. So what we're going to do instead is to select a random image from an array, and the way we're going to do this is with JavaScript, so we can go to our project folder, create a new file, and this will be the script.js, which we then need to link in our index. Just above the closing body tag, create the script with the source, and this is simply script.js. Let's test. This is linking inside the script with a simple alert, and we'll just say, any message inside here so high. If we reload the browser, we should see the message, if this is successfully linked. Now we're going to move this. Now the next thing we need to do is to create an array which is going to include the image name and also the number of items. This also needs to correspond with all of the images inside of this folder. To save a little time, if we go over to GitHub and use the same link that we used earlier. Inside of the number match game, take a look for the file called the array.js. Then inside of here we need to copy the contents of this array. I'll grab all of these items, making sure to grab the square brackets on the top and the bottom, paste this into our scripts, and these names all correspond to the same images which are inside the folder. So do be aware if you have used your own images, you will need to change the image name to match each one. You will also need to change the number of items too. For example, we use bananas.jpg as six bananas, and this is set on the lines below. Since this is an array, we can select each one of these objects inside here by the index number. The index number is the position inside of the array, so the first item is position 0. This is position 1, position 2, and this is how we're going to select an image to display in our project. So down at the very bottom and just after our array, we can select each one of these images randomly. We need to generate a random number. Let's start this inside of a constant call it random number, and we can use a JavaScript math function, call it random. So math.random. This will generate a random number between 0 and one. Zero is included but number 1 isn't. This will go through to 0.999 for example. We can log this inside the console to check our output. Logout our constant into our project, and we can reload, right-click and inspect. Each time we reload, we get a different random number. Inside of this array we have 20 separate images. The way we can check how many items is inside of an array is by selecting the array name, which is images and then you say property which is length. If we reload this, we now see we have the 20 items inside of our array, so we can now use this to multiply our random number. Let's try this inside the console and refresh. This will now give us 20 different options. So our number will either begin with a 0 right right to 19. We can also run this down if we cut out this section, we can use a different JavaScript function called math.floor, and this is going to round down to the nearest whole number. Let's try this out over in the console. We're now left with a random number between 0 and 19, which gives us 20 different options. The way we can now use this random number, if we remove the console log is by selecting our images array, and we can select any of these images by the index number. Number 2 like we mentioned before, it should be 0,1, and 2. This would select the blocks. But instead of hard-coding this value, we can type in the random number. After this, we can use the dot notation to select either the image name or the number of items. We want the image name and we can also store this inside of a constant called random image name. Let's try logging this to the console. Grab this and paste this in, randomly selecting one of our image names. So now we know this is working, we can now use this to set our image source. First of all let's create an image element, store this inside of the image constant, and we can create an element with document.createElements. The element type we want to create is an image which is IMG. Then we can grab our image variable and set the source attributes, and this image source needs to point to our images folder. So we can set this as a template string with the back ticks. This will allow us to insert our random image name as a variable. Our images folder, forward slash. Just like earlier we used the $ symbol and the curly braces to insert our variable. This now leaves us with a image element created, and the next thing we need to do, if we go to the index page is to add this inside of our image container. So just above let's create a constant called image container, and we're going to select this with document.getElementById, the Id of image container. Now we have this reference we can select our image container and then appendChild. The child elements we want to append is this image from just above. We should now be able to save this and see this in our project. So each time we now load we see an image which is displaying inside the browser, and this is being randomly selected from our array. We still see this image just above because this is to replace in our index.html. We can now remove this element and now if we refresh the browser we just see a single random image. This is an important step, but we don't want to refresh the browser to get a new image each time. So in the next video, we'll take a look at how we can do this with a timer. 6. Working With Timers: Our project is now at a stage where it will generate a different random image each time we reload the browser. Of course, this is not the way we want our app to perform. We want to call a random image after a certain time delay. The way we're going to do this is by grabbing our code which generates the random image. We're going to place this inside of a function, and then call this function after a certain time delay. Let's create a new function at just above this. I'm going to create this function using a slightly different syntax than the previous project. We're going to create what's called a ES6 arrow function. An arrow function is basically a different syntax than the regular functions that we've used previously. There is also some technical differences too between the two function syntaxes. Although we won't be covering these inside this course, this function is going to contain all of the syntax just here. The way we write an ES6 arrow function, we're going to store a function name called generate inside of a constant, and then we're going to set this equal to our function. We set the arrow function just like this and then the curly braces. Inside of these brackets just here, just like when we looked at the irregular functions in the previous projects, we can also pass arguments inside here too. For example, if we had a value, we could pass it just like this and then access our value inside the function. But all we want to do is to grab these lines of code, and then paste these in. We now have this function which we can now call, and we want to call this function after a certain time delay. Let's do this just below, we can create a second function which I'm going to call a timer. The way we can run some code inside a JavaScript is by taking advantage of setInterval. SetInterval is a function which takes in two arguments. The first one is the code which you want to run. We already have the code available inside this generate function. We can pass in generate as the first argument. Then the second one is a time delay. This time delay is in milliseconds, one second will be equal to 1,000, two seconds will be 2,000, and so on. The way we can call this function is by using the Play button. If we go back to our index page, we have the Play button inside of this commented out section. Let's reinstate this. Then we can call this from our Play button. We'll do this on a click, so let's set the on click equal to our timer. Over to the browser, let's reload this and click on the "Play" button. After our two-second delay, we see a new image has been randomly generated and placed on the end of our div. Just to recap, when we click on "Play", we call our timer function. This timer function will run every two seconds, and then call our generate function which generates a new random image. As we just seen, this is not ideal because we want to replace the existing image rather than add this to the end of our image container. One of the ways we can fix this is to add a if statement and check if a image already exists before we go ahead and add a new one. Just before we add this image, we can create an if statement, this is going to check if our image container. Remember, this image container was the wrapper just here which is going to contain all of our images inside. If our image container and then we can say.hasChildNodes. This is a method which is going to check if our image container contains any child elements. Currently, it doesn't because it's empty, there is nothing in between our div. But if there is an image there in place, we're going to run some code which will remove this. First of all, we'll select our image container and then we can call a method called removeChild. The way we can select which child element we want to remove is by using a method called firstElementChild. We call this on our container, so our imageContainer, and then select the firstElementChild. We've seen here that if our imageContainer has anything nested inside, we'll then go on to remove this, and the item we want to remove is the very first element inside. The first element is always going to be our image since there's nothing else inside of our div. Let's save this and give this a try, click on "Play". Now, we only see one image at a time. The next issue which we need to deal with, if you'll notice when we click on "Play", there is a time delay before our first image will appear. This time delay is the two seconds which we set just here. This will cause as a small problem because we want to start the game as soon as the user has clicked on "Play". The way we can fix this is by calling our generate function as soon as the game starts, and then as soon as this is running, we can then rely on our timer to continue with the rest of the images. Let's create a new constant just below which is going to handle this. This is going to be a function called play. Once again, we'll set up our arrow function. We're then going to call this play function as soon as the game starts. Rather than our timer, we'll change this to play. As soon as the game starts, we're going to call our generate function. This will be called once, we'll then call our timer function. Let's try this out. As soon as we click on "Play" inside the browser, we should see our first image which we do. Then after our time delay, the rest of the images begins to generate. The next thing to take care of is to actually end our game. If we reduce our timer down to a really small number, let's say 300 milliseconds, then click on "Play", this will then cycle through all of our 20 images but it will keep going and not know when to stop. We see here that we've gone over 20 images but the game still continues to run. One of the ways we can fix this is by reducing the number of images or removing an image after one has been generated. Currently, we generate a random number. Meaning, our random number can generate 20 different images once this function has run. If we would then remove an image from our array, this will then leave us with 19 options, and 18, and 17, and so on. The way we can remove an image is by selecting our images array. We can use a JavaScript splice method which is going to remove a value from our array. Splice is going to take in two separate values. The first one which you pass in is going to be the image which we want to remove. If we want to remove the first image, this would be position 0, position 1, and so on. We already know which image we're currently dealing with because we have this stored inside of the random number. Let's pass this in. Then the second value is the number of items you want to remove. We're only going to remove one value. Let's leave this as one. Just to recap, we are randomly selecting any of our images from the array. We are then pushing this to the DOM and displaying this inside of our project, and then finally, we'll remove this image from our array so it can be selected more than once. This now means if we go back to the browser and start our game, we should now only see 20 images appear in the browser. Let's try this. There we go. The game now stops because we don't have any more images to cycle through. This now means our image array is now reduced to zero, and we now have a way to end the game. But one thing we need to do is to also stop our time at two. At the moment, this set interval time has no way to know when it should stop. Therefore, we need to tell a set interval to stop manually so it doesn't continue to use the browser's resources. We had set interval inside here. The way we can stop this is by calling a clear interval. I'm also going to store this inside of a function called stopTimer. All this function is going to do is to call our clear interval function. Then it pass in a reference to our timer inside the clear interval. We can do this by passing it set interval to a variable. Let's call this variable timerRef. Then we can set timerRef to be equal to our set interval. Now, we'll have this reference. We can now pass this to clear interval so it knows which time where we need to clear. The reason we've declared this variable outside of a function rather than inside is because we can then access this in any of the functions. If we declared our variable inside of this function, we could only access it inside of this timer which will then cause an error when we try to reference it in our clear interval. Let's move this back outside. Now, we need to call our stopTimer function at the end of our game. Our game is ended once we have no more images left in the array, because we're removing them on each generation. Inside of our generate function, we can check if our images dot length is equal to zero. We can then call our stopTimer function, and also use the return key word, meaning this will then break out to our function and the code below will no longer run. Let's save this and test this out in the browser, we can click "Play", and should now cycle through 20 of our images, and then stop the timer. Good. With this now in place, we'll move on to the next video where we'll take care of generating a number to display to the user. 7. Generating A Number To Compare: Let's now create our random number which is going to display to the player, so they can compare the number of items inside the image. This number is going to be one of three things. It's going to be if the correct amount of items which is displayed in the image are one higher or one lower, which is so the game is a little bit more challenging, and we're going to do this over in our generate function. At the moment our generate function is starting to get pretty crowded. We can outsource all of the code which is responsible for setting our image. This is grabbing our image container all the way down to appendChild. Let's clear this out, leaving in our splice. I'm going to replace this with a function. The function I'm going to give this a name of setImageSrc, and then create this just over the top. Inside here we can paste in the contents of a quote from our generate function, but for this function to work we also need to receive the random image name. Back down to our generate function, we have our random image name here. We can copy this as this to our function and then if we receive this as an argument, this is now available inside of this function to use. Before we go any further let's save our code and try this in the browser, and everything still works as expected. We can now move on to generating this random number. Let's go down to our generate function. Just below where we set the image source, we can also create a new function which is going to be responsible for creating this number. Let's call this generate plus or minus. All this function is going to do is to either return a value of positive one or negative one. We can then use this number to add it to a real number to make it more challenging. Let's create this just above inside of a function, so generate plus or minus. This just needs an equals just afterwards here. For this function to return either a positive one or a negative one value, we need to generate two random options. The way we can do this just like we've looked earlier is to use math.random. To give us two separate options or two values, we can multiply this by two and then wrap this inside of math.floor. Remember math.floor will run down our random number. This will return a value of either zero or one. We saw this inside of a constant which I'm going to call number zero to one. We now want to return back a value from this function. As we just mentioned the number zero to one will either be a zero or a one. The way we can convert this to a positive one or negative one is to make use of the JavaScript ternary operator. We can select our constant of numbers zero to one, and we can say if this is equal to zero, we now want to provide an option. The JavaScript ternary operator will allow us to provide two options whether the value is true or false. It works just like an if else statement. If this expression here is true, so if this is equal to zero after the question mark, we're going to return a value of negative one. We then add a colon and provide option if this is going to be false. If this is false, we'll add plus one, and return this back from our function. Since this is randomly generated we'll have a 50/50 chance, but this function will return either negative one or positive one. We can now scroll down and store this return value inside of a constant. Let's say plus or minus and set this to the return value. Now we have either this positive or negative number. We also now need to grab the actual value of items each image contains. The way we can do this if we scroll up, is to select the property called number of items. We're doing something very similar in this function where we grab the random image name. Let's take a look at this. Just here we are grabbing our image name from a random image. Let's copy this line here, paste it in and rather than grabbing our random image name, we can now grab the number of items, and also change this constant name to reflect this, so number of items. This now leaves us with all the information we need to generate our display number just like we see here. We have a value of negative or positive one, and we also have the correct number two. We're now going to use these two values to pass to our function which is going to generate this display number, display our function, where we are going to pass in our two constants or our two values from above which is plus or minus and number of items. Scroll up and create our function called generate display number. This time we receive in two values and the first one is number of items and the second one is plus or minus. Inside of our function we want to do one of two things. We want to either display the real number, or alternatively we want to display a number which is either one higher or one lower. To choose which one of these options this function is going to take, we need to generate a random number. Just like below here we're going to generate two random numbers so between zero or one. Inside of a constant, I'm going to call this split. This random number will now allow us to create an if statement to check if this is zero or one. We'll say if the split is equal to zero, this is going to display our real number. The way we can do this inside of our index page is to find our elements whichever value is stored inside. We see this value just here so we can remove this, and then we can target our element with the id of number. We do this with document.getelementbyid. I'll select there was number and then set the innerHTML and set this to our number of items which is passed to our function just above. This is our correct number so now we can create a false number. We can say else. This will be if the split is equal to one. Just like above, we'll also set the document.getelementbyid, select our number and this is equal to our real number which is number of items. Then we want to add either a positive one or a negative one to this, which is stored in a value called plus or minus. Let's give this a try in the browser. If I have to be more clear, if we just slow this game down, so three seconds and reload, we see the value of one. We seem to have a problem somewhere, so let's go back up to our function. We have a random number between zero and one. If it's zero, we'll set the number value to be our number of items. If not we'll set this to be our number of items, either positive or negative. That seems to be okay, so let's go down to generate, display number. I think we just need to pass this around in a correct order. Let's try this now. Click on play. There's six people inside of here and we get the value of seven, that's one higher. This is the correct number of eight. This is one higher. We just need to wait for one lower, seven, which is this one here. Now we see the correct number of items. We see one value higher and also one value lower too. This now working, we're going to now move on to the next video and we'll replace the image name. 8. Setting The Image Name: When the user is playing on the game, we have now handled one path of this display section. We've now linked the image to the number of items. The next thing I want to do is to also display the name of the image, so for example, say eight eggs, and what changes for each image. If we go back to our code in the script.js, inside of our generate function, we already actually have access to our random image name, and we store on this inside of this constant. Here it says, crop in our images array, as in our random number, and then select the new image name property as we can see just here. What I'm going to do now, we could, if it uses random image name to add the functionality to this generate function, but instead to keep things more separate I'm going to create a new function. Let's add this into our generate function and let's call this one set image name. This function is going to take in our random image name, so let's grab this and paste this in and we can use this outside of our generate function. Let's say columns. The function name of sets, image name and this is taking in our variable of random image name. This is a arrow function. Before writing our code into this function, let's do a console log and check we're receiving the random image name. Open up the console, and we "Click on play" to see the eggs dot jpg, because dot jpg. What we now want to do is to take this name and display this inside of our user interface. Before we do this, though, we need to trim the dot jpg extension of the end of this image. The way we can do this is by using a JavaScript method which is called Slice. Slice is going to take a string of text and we already have a random image name for our string, and then we'll call this slice method, and this will return a new string with a certain part removed. So let's remove our console log. We can access our random image name called the Slice method. Slice is going to take in two values, which is going to be the start on the imposition of the characters which you want to remove. If we had eggs dot jpg, we want to remove the word which is eggs, so we'll begin at the very first character, which is the position of zero, and then the second value, which is optional. If we were to leave this out, this would go right through to the end of our string, but instead we want to go back four places. The way we can do this is by getting the full length of our string and then go back four places. First of all, we can get the full length of the string by using the random image name, dot length. Currently this goes from the start of the letter E right through to the end of our string, which is the letter G. We want to go back four places, so let's use negative four. We can check this is work in a bystander list inside of a constant. Let's call this the image name, so this equal to the new value which is returned from our splice method, and then we can do a console log with our new image name. Back over to the console and inspect. Click on play. We now see dot jpg has been removed from each one of our names. This is good and this is all now are working. The next thing we need to do is to obtain the user interface inside of our index. Let's go to our placeholder and remove this. Then we can target the span with the ID of item name, so document.getElementByID. The ID which was item name, and then we can say to the inner HTML, which is equal to our variable of image name. Just after this I'm also going to add onto the end of a string, which is a question mark. Just let the user know that this is a question, so this will say seven ducks and then a question mark, so the user knows that this is a question's answer. Let's try this out over inside the browser. Click on play, see two cars, that's good, bananas, ducks. This is all now working fine. With this now taken care of, now let's move on to the next video, where we're going to handle the user's guess. 9. Checking For A Match: The next step inside of our game is to handle the functionality if the user clicks on the tick or the cross. We are going to provide two functions which is going to check if the user's guess is correct or incorrect and update the score. To do this inside of our index.html, we need to add a click handler to our buttons. These are our two buttons inside of the match area. For the correct button, we'll set up a function which is triggered with a onclick event handler called match. Then just below this, we'll also do the same, but this time the function is going to be called noMatch, and we'll handle what to do if the user thinks his choice is incorrect. I go to our transcript, save this file, and before we get to work with adding these two functions, I'm going to create some variables over the very top. We need to store both the correct number of items in image and also the number which is displayed. This is so we're going to compare both of these values to see if the user's choice was correct. The first variable is going to be called currentImageValue. We can set this to be equal to an initial value of zero, and then update these once a new image has been generated. Separated by comma, we can create a second variable called displayNumber, and again, initialize this as a value of zero. Just as a quick side note here, we are not using the let keyword in both occurrences here because we've separated these by a comma, so this is fine to do this way. Add a new comma just after our display number, and we set a variable to set the current score which is going to be initialized as zero. Now we have these values we actually need to update these with the correct numbers. Let's start with our current image value. The way we can grab this if we go down to our function, which is generate display number, inside of here we have the variable called numberOfItems. Therefore, we can grab this number and set our current image value. Let's do this at the bottom of our function. We can set our current image value to be equal to our number of items. Now we have our current image value set, which is the correct number of items in the image, but now we need to also update our display number, which is the same number which the user sees in the game. Remember, this is either the correct number, which we set inside the if section, or a false value which is either one higher or lower, and we'll set this in the else section. First of all, inside if section which was the correct number. With that, our display number to be equal to number of items. Just like above where we set this to the user interface. Just below this inside the else section, we're displaying the number of items, which is either one higher or one lower. Inside this section we can also set our display number to be exactly the same which is number of items, and then either one higher or one lower. Just before we create our functions which are linked to our buttons, let's check our variables are currently working. Inside the generate function, we can do two console logs. The first one is the current image value, which is the correct number of items, then the second one is the display number, which is the number the user will compare against. Inside the console, right-click "Inspect", and then let's click on "Play". To begin, we see the value of zero, zero since we have not generated an image just yet, therefore have a correct match, a correct match, nine and 10 is incorrect, incorrect, incorrect, and so on. Now we have these two values to compare against. We're going to create our two functions to check if the user is correct or incorrect. Let's remove this, and we can create our two functions. The first button trigger a function called match. The match function is going to be responsible for checking if the current image value is equal to our display number. If it is, the user is correct and we'll update our score. We can update the score by using a JavaScript ternary operator so we can check if the current image value is equal to the display number. After the question mark, this means the section is true. We want to update the score with score plus plus. If not, we add a colon and the second condition. We want to deduct the score by the value of one. If the user has got this correct, the score will increase. If not, the score will decrease by one, two. Then we can also update the DOM with document.getElementById, and this is the section just here which we want to update. Over to our index.html, we can update this span with the ID of current score, so let's grab this. We can also remove the default value at this end, and then we can set the innerHTML to be equal to our score variable. Next we have the second button which has the function name called noMatch. This is going to be pretty similar, so let's copy this, paste this just below. This is going to be called noMatch, and we want to pretty much do the reverse of what we've done here. We want to check if the user believes that the current image value is not equal to the number which is being displayed. We can do this rather than the triple equals. We're going to use the exclamation mark, and this will check if the current image value is not equal to our display number. If this is correct, this means the user has got these right and it will update the score. If they are wrong, it will deduct a point and then update the DOM. Let's give this a try. We can click on "Play". In fact, we'll just update our timer to give us some more time, so five seconds they can play. There's six docs, so let's click on the tick. This is correct, and we get a score. Twelve pencils, that one's fine. There's seven cakes, but if you click on the x, we should see a score has been deducted. Good. Now this is our working and we can update the score. In the next video, we're going to come back to the score and display it to the user at the end of the game. 10. Handling The End Of Game: Hey, welcome back. We are now going to handle exactly what the user sees when the game is over. Currently, when we cycle through all of our images and we get to the very last one, we're currently stopping our timer and also, we're not generating any more images. During the game started and game ended condition, we also need to show and hide various elements on the screen, and also at the very end, we need to display a message to the user with their total score. First of all, we're going to get to work inside of this play function and we're going to begin by hiding some elements which we don't want to see when the game is running. For example, if we click on "Play", we don't want to see all of this Welcome section. We don't need to see the Play button. We just need to see the stats area and also the image. This is because inside of our index.html, we have this image area, and once the game is in play, we only want to display this image container. We're going to hide our message area. We're going to hide our start screen. We are also going to hide the Play button, since the game is already in play. We're going to take out of all of this over in our play function. This function is called as soon as our game start, so this is a good place to hide all of our content. First of all, we're going to select the message area with getElementByID. I'm going to use JavaScript to set the style and set the display property to be equal to none. This is just the same as adding the display type in our style sheets, but this is being added dynamically with JavaScript. We're also going to copy this and paste this in two more times. We can use this second one inside of our index page to grab our start screen section which contains all of the text. Number 2 is the start screen. Then finally, we also need to remove the Play button once the game has started. This is the ID of Play button. It looks like this is all working. Once we click "Play," we no longer see all of our text at the top. We no longer see the start screen. We no longer see the Play button. We've also hidden the message area for later too. This is handling the condition when the game is started, and we also need to handle what happens when it's the end of the game. With this, we're also going to create a custom function which we'll call right at the very end. So constant, and this function is going to be called endOfGame, and this section also wants to show and hide some areas. Once we've reached the end of the game, we want to make sure that our message has been displayed because we're going to add a message to the user with their score. Let's copy this and paste in the message section. To make this visible on the screen, we're going to change the display type to be block. The second one we're going to amend is going to be our image container. This is because once the game is over, we want to remove the last image from our screen and we can do this by keeping this display type to be equal to none. Once we remove this image, we then want to populate our message with the users score. If we go right up to the very top where we created our variables, we have the user score inside of this variable. We also need to create a second variable too, which is the total of points available. This is going to be equal to the number of images inside of our array. We can create a variable just below, separate it by a comma. I want to call this the totalAvailable. Set this equal to the length of our images with images.length. We can now use these two variables to display a message to the user at the end of our game. Back to our endOfGame function, let's grab our message area with document.getElementByID, the ID of message. Then we can set the message with an innerHTML and we're going to set this equal to a template string. We're at the back [inaudible] so we can include our two variables. The message I'm going to display is going to be, "Game over, your score was." We can then use the $ symbol and the curly braces to output our score variable/, and then we make use of our total available variable, which we just created above. This is going to display our message to the user. Let's reduce down our timer. Let's go for 300 milliseconds and check this is all working. Click on "Play." The score doesn't really matter. We get to the end of the game and nothing happens. This is because we have created our end of gain function, but we have not yet called it. The place we want to call this function is look inside of our Generate function. This is the same location inside the if statement, where we check if our images.length is equal to 0, and then we stop in our timer. Inside here is also the same place we call our endOfGame function. Let's add this, and then cycle back through our images. Our endOfGame function has now been called. We've removed the image container and then set the message to the user with the total score. So this is good. This is all working, but what do we want to do now? Well, we have a couple of options. We can add our Play button back into the screen, which is going to take us back to the start of the game. Or we can simply do something like setting this message to be three seconds and then reloading the browser. Take the user back to the start screen. The way we can do this is by using a timeout. Here we used the setInterval, which is going to call a function after a certain time delay. SetInterval will also keep repeating this until we tell it otherwise. However, inside here, we only want to run a function awesome code only once. To do this, we can use setTimeout. Inside here, we're also going to pass in a arrow function. Inside here, all we want to do is to refresh the browser and the way we can do this inside of our code is by using location.reload. This is exactly the same as pressing the Reload button on our browser, but instead, we're doing this after a time delay, which I'm going to set as three seconds. Let's try this out. Click on "Play." There's our score, and after three seconds, we should see a reload. While we're also dealing with the end of the game condition, we can also hide this Stats section on the left. We're going to hide this at the end of the game and then reinstate this once the game has started. The way we can do this is just like we've done above with getElementByID, and the ID we want to grab. If we scroll a little to our start section, remember when we use these CSS early on, we surrounded all of these text content inside of a div with the ID of stats content. We can now use this to show and hide this area in the script. First of all, let's copy and paste this line. We need to select our statsContent. Then at the end of the game, we are going to remove this with the display of none. We can grab this and then we'll see game is started. We want to reinstate this by setting this to be a display type of block. Let's cycle through our images and check this is all working in the browser. When the game is started, we see our section is appearing. Then this disappears at the end of the game. In fact, we probably don't even need to reinstate this when the game starts, because remember, we're refreshing the browser, which will immediately place us back into the DOM. Let's cycle through. Our stats are all displaying. They are removed again at the end of the game. With this now taken care of, in the upcoming video, we're going to handle these two buttons here, but make sure the user can only have one selection each time an image is displayed. 11. Avoiding Multiple Selections And UI Updates: Our game is almost finished and now we just need to make some finishing touches. One of the main things we're going to do in this video is to make sure that the user can only click on one of these selection buttons once per image. Currently, if we start a game, we can click on any of these buttons as many times as we want for every single image. We also want to make sure that this score section and the buttons is not available before the game even starts. First of all, we'll begin by hiding this start section over in our script.js. I want to do this just below our variables, so under the total available. Let's grab our stats contents section, which is the wrapper just here which holds all of our scores and buttons. Document.getElementById, the ID name is statsContent. We can then hide this by setting the style property of visibility to be equal to hidden. Since this is now gone, we want to reinstate this once the game starts. Let's copy this and if we go down to our play function, we can add this inside here, but this time we want the visibility to be equal to visible. Finally, at the end of the game we'll also manipulate this, so we can add this in. Once again, setting this to be hidden once the game is over. Let's save this and try this in the browser, you can play and now our stats are now showing [inaudible] the end of the game. This is now being hidden ready for the start of the game. Next, we can also make these two values dynamic. Currently we don't have a value to begin with our score, and we'll have this hard-coded value of 20 inside of our index.html. Let's remove this, and now we can update these with the ID of current score, and also total available. We already have these values. If we scroll up to our variables at the top, we have our score and also the total available, so let's add these here now. Grab the elements by our ID, which is the current score. Then set the innerHTML to be equal to our score variable. I'm going to duplicate this, and the next one of total had the ID of total available. The variable is stored just above, and that's just one here, so let's pull this over. Over to the browser, we can now test this out if we click on play. All values now updated and we still see the dynamic number of images of 20. If you remember from early on in the HTML, we also set the section just here. We'll say how many seconds the user has to decide. This will just stay hard-coded value of three, which is over in our index page, we also surrounded this value inside of a span with the ID of timeSetting. Now let's remove this, it's a hard-coded value, we can now set this as a variable. At the top, I'm going to create a constant, the name of time delay which I'm going to initially set to a value of three seconds. We can now use this time delay in two places. First of all, we're going to update our DOM just here, and we can also use this down below. Inside of our timer function, so we can replace our hard-coded value with our variable. We can then update the DOM. So let's duplicate this line and the ID which we want to target is time setting. Let's give this a save and check if this is working. It's working but it doesn't look exactly how we want it to, this is a value of 3,000. Since this is in milliseconds, so all we need to do is to divide this by 1,000 giving us the value of three seconds. Let's also check the timer is working and see we have three seconds between each image. That looks fine. The next thing we need to fix is the fact that they're using a click on these buttons, multiple times for each image. The way we're going to fix this is by creating a variable called chosen, and we'll set this to be true once a user clicks on the button. Let's add a comma just after this, and then we can add a new variable called chosen, and we'll set this to an initial value of false. Now if we scroll down to the functions which are enabled once the user clicks on the buttons, this is the match and no match functions. We only want to run the code inside here, if the chosen value is equal to false. So we cut this, I'm looking to write an if statement. We can say if not chosen, we can then add our curly braces and run the code inside. Would do exactly the same for our noMatch function just below, so cut this out, create our if statement, and then run this code inside. Initially, both of these functions will run if you click on a button because we've set our chosen value to be false. So either of these options will work at the very beginning. But once the user has clicked on one of these, we want to then reverse this and set our chosen value to be equal to true. We'll do exactly the same in our noMatch function. Once a user has made any selection, chosen will be equal to true. Then we want to make this false again, so the user can make a new option, and the way we can do this is backup in our generate function. Let's say chosen be equal to false, so the value of chosen will only ever be equal to false once the game starts or once we generate a new image. This means the user can then make their choice because this will be false, and then we'll set this to be true, so no further choices can be made. Give this further save and let's test this over in the browser. We can now only click on any of these buttons once for that image, once for this image and this is all working fine. This is now all the functionality now taken care of for our number much game. Next, we're going to finish off this project by adding a fade effect to our image. 12. Fade Animations: You finish off this project, we're going to make the transitions between each one of our images a little smoother. Currently, each one of our images is just placed inside the DOM. But we're going to make this smoother by adding a fade effect. The way we can do this is by adding a class to our image. Once this has been generated. We can now move over to our CSS and add this as a animation. If we head over to our SetImageSource function, inside here is where we generate a new image element to display inside the browser. We can access our image variable and I'm going to do this just after we set the source. We can do this by selecting the classList property, which has a method called add. This will allow us to add a new class name to our image elements and we're going to go for a name of fade. We can now use this over in our style sheets, so head over to our Styles.css. We can add this anywhere inside of our style sheets, I'm going to go for just above our media query. We could begin to target our fade element. But just before we do this, we need to create our animation and we could do this with the keyframes rule. We then give our animation a name and I'm going to go for fade. Here we said, which CSS property we want to change over the course of this animation. From this, we can use from and to where we specify which CSS properties we want to begin with and then which ones we want to end with. So to create a fade effect we're going to set the CSS property, of the opacity to be equal to zero. This means that this is completely transparent and we won't see anything on the screen. In our case, we won't see the image inside the browser. At the end of this fade or this animation, we want the opacity to be a value of one. This means that our image will be completely visible or opaque once our animation has finished. The way we can use this is up inside of our fade class. Remember fade is the class which we've added to our image element and we can add our keyframes with the animation name. The animation-name is fade. This is its name just here and now we have an animation which is going to go from zero opacity, to be fully opaque or fully visible on the screen. But at the moment this is probably not going to create any effect. Let's just check this and reload. We don't see anything different inside the browser. This is because this is happening pretty much straight away and there's no time delay between the start and the end of our animation. To do this, we can set the animation duration and this is the number of seconds we want this to happen over. We want to set this animation to happen over one second. Now if we try it in the browser and click on Play, we see that each image which is loaded has an animation, which is over one second. This just makes the game a little smoother for the end-user and of course, you can play around with these and make these animations more custom and make this project your own. This is now the end of our Number Match game, I hope you've enjoyed it. Thank you for watching. 13. 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.