In this article we'll look at how to quickly make number guessing game that you can display to your friends!
First things first......DOWNLOAD VSCODE AND LIVE SERVER!!
Get Visual Studio Code here:
https://code.visualstudio.com/download
VS Code is one of the best code editors out there! Once you've downloaded that, you'll need to install live-server. This is how our program will be displayed on your HTML. Here's a great article on how to add the extension to your VS Code:
https://www.geeksforgeeks.org/how-to-enable-live-server-on-visual-studio-code/
Now that we're all set up, create a new storage folder on your desktop and open VS Code. Go to file and open your newly created folder. Once inside, go back to file and we will create three new files. Create an index.html (where we'll store all the html code), style.css (where we'll store all the styling elements for our webpage and app), and a script.js (where all our JavaScript code will be placed).
Lets dig into our HTML file first:
I've highlighted our newly created files and have already created some basic html code. I won't discuss every element here but take a look at this article for better explanation of the set up:
https://www.w3schools.com/html/html_basic.asp . We've added some meta data for our characters (translates our characters into computer speak) and viewport (sets our users visible area of the webpage). We've also linked to your style.css and script.js files.
Lets add some style to this thing:
Here we've added some basic css styles to our style.css file that will describe how we want our HTML elements to be displayed on your web page. This article will give you a quick insight on the setup and why we added what we did: https://www.w3schools.com/css/default.asp . There's a TON of different ways to style, so find a few you like and try them out! But you should have a visible website if you open with live-server at the bottom of your page.
Next lets head back to our HTML file and add the rest of our features:
The key take aways from this change is that we've added classes for easier access once we're inside our style and script files. We've also added some buttons an a selector for our number input. The type we choose is number but there are lots of other types to chose from, take a look at this article for other types:
https://www.w3schools.com/html/html_form_input_types.asp
Another fun feature we can add is emojis to our displays using either Windows + . or CTRL + CMD + Space on Mac. Our program is starting to come together a little more now!
Pretty cool!!! Now lets add style to all of our classes. Again, I won't go into every feature we've added. But if you're curious, take a look at the W3 site. Here are some highlights to look at:
We've isolated the left and right side of the site
Created a number box that we will eventually add our answer into using the the class
Set up our buttons and a hover feature, so the guess checker and the again button will change when we hover
Added a box for our guesses
Yikes that was a lot! Now onto the most fun part (at least IMO)- the coding! Lets open our script.js file and add some basic code to begin and some pseudocode on what we want some of the features to do.
For starters, we've added 'use strict' which is a new directive in ECMAScript 5. This will help us write the cleanest code possible by setting some basic rules and guidelines. Next, we've set up some starting variables we'll need to use throughout the program. SecretNumber uses some built in JavaScript functions like Math.floor() and Math.random() that lets us create a random number from 1 to 20 every time we refresh.
We've also created a display message function that lets us add our updated messages to the page. We set a guess constant which will convert our guessed number from our selector into a number. Another key item we've added is the document.querySelector method. This will be used for our initial input guess as well as our again button to reset everything.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
First, we check if the user inputs a guess, and display a message if not. Then we check if the user has inputted the correct guess. If they have, we display a winning message. If the user's guess is not the secretNumber, we move on to check their current score. If that score is still greater than 1, we move into another 'if' statement.
Inside of this displayMessage function call, we've included a ternary operation (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator) which at its core is just another 'if' statement. Within we check if the users guess is higher than the secretNumber. If it is, we display "Too high!" otherwise, it will display "Too low!" and decrease the score count (which we started with 20) by 1.
We do this until the number is found or the score gets below zero and ....... THATS IT! Your game should be working now.
Let's change the display using our document.selector and the classes we created at the beginning. One thing to notice is once the correct number is hit, we change the background color to green and display the secretNumber within our box.
Let's also add a check for highscore and add to our reset button functionality.
For the reset button, all we need to do is set all of our values back to their originals either from the html or the beginning of our script.js file.
Overall, I know this can seem daunting to someone completely new with JavaScript fundamentals, especially the styling. However, if you follow along line-by-line, you should have a game you could share and be proud of!
Top comments (0)