A deployed version of the final game can be found here.
User Stories:
As a user(AAU), I should be able to guess a number within a given range.
AAU, I should see a message if my guess is outside the indicated range.
AAU, I should see a message indicating if my guess is higher or lower than the secret number.
AAU, I should see a list of my previous guesses, showing them in different colors based on whether they are over or under the secret number.
AAU, I should see a message congratulating me if I guess the secret number.
AAU, I should see a message telling me how many tries it took me to guess the secret number.
AAU, I should be able to click a 'Reset' button to reset the game.
Step 1: Create a directory to hold the files:
mkdir browser-guessing-game
Step 2: Create the files and directories for the game (Note the creation of multiple files/directories by just putting a space between them instead of repeating the mkdir/touch commands):
Step 4: Add section headings using commented out lines to organize the sections in main.js:
/*------Constants------*//*------Variables------*//*------Cached Element References------*//*------Event Listeners------*//*------Functions------*/
Step 5: Write pseudo-code for the game based on the user stories:
Create an HTML element for the game's title.
Create an HTML element to handle displaying messages to the user.
Create an input field for the user to enter a number.
Create an HTML element to handle displaying a list of previous guesses.
Create 'Guess' and 'Reset' buttons.
Define variables for secret number, guess list, current guess, if there is a winner (boolean).
Define cached element reference for the game message and previous guesses HTML elements, and both buttons.
Write an initialization function that resets the game's status and picks a winning number. Call the initialization function before any other functions.
Write an event listener for the 'Reset' button to run the initialization function and reset the game.
Add an event listener for the 'Submit' button that calls a function to check the current guess. Pass the current value of the input element into the function for comparison. This function should compare the guess to the secret number. Stub up conditional statements to handle what happens when the number is higher, lower, or equal to the secret number.
Fill in each of the conditional statements for the checkGuess function. Flip the isWinner variable to true if there's a correct guess to prevent additional clicks. Add a line to clear out the guess input value as well as error handling for inputting a number out of range. Push the guess into the previous guesses array. Call a function to render all guesses.
Write a render function to display the list of previous guesses on the page. Append an element to the cached guesses element, also adding a class name indicating whether it is higher or lower than the secret number.
Step 6: Create an HTML element for the game's title in index.html:
<body><h1>Number Guessing Game</h1></body>
Step 7: Add some simple CSS in style.css to center everything on the page:
body {
text-align: center;
margin-top:50px;
}
Step 8: Create an element in index.html to handle displaying messages to the user. Be sure to give it an id of "message":
<h3id="message">Please enter a guess between 1 and 100!</h3>
Step 9: Create an input field for the user to enter a guess, along with a button to handle submitting the guess. Give both elements appropriate id values. Add placeholder text to the input field to pretty it up. Be sure to enclose both the and the in a
Step 10: Create an HTML element to handle displaying a list of previous guesses. Be sure to give the element an id. Put an element inside to show where guesses will be displayed:
<divid="prevGuesses"></div>
Step 11: Add CSS to handle formatting the previous guesses list:
Step 15: Define cached element reference for the game message and previous guesses HTML elements, the guess input field, and both buttons:
/*------Cached Element References------*/constmessageEl=document.getElementById('message');constguessesEl=document.getElementById('prevGuesses');constguessBtn=document.getElementById('guessButton');constresetBtn=document.getElementById('resetButton');constguessInput=document.getElementById('guessInput');
Step 16: Write an initialization function that resets the game's status and picks a winning number. Call the initialization function before any other functions:
/*------Functions------*/init();functioninit(){guessesEl.innerText='';messageEl.innerText='Please enter a number between 1 and 100'guessInput.value='';guessList=[];isWinner=false;secretNum=Math.floor(Math.random()*100)+1;}
Step 17: Write an event listener for the 'Reset' button to run the initialization function and reset the game:
Listed below are the contents of index.html, main.js, and style.css. Use these as references if you're encountering any errors.
index.html:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Guessing Game</title><linkrel="stylesheet" href="css/style.css"><scriptdefersrc="js/main.js"></script></head><body><h1>Number Guessing Game</h1><h3id="message">Please enter a guess between 1 and 100!</h3><div><inputid="guessInput" type="text" placeholder="Enter guess here..."><buttonid="guessButton">Guess</button></div><divid="prevGuesses"></div><buttonid="resetButton">Reset</button></body></html>
main.js:
/*------Constants------*//*------Variables------*/letsecretNum,guessList,isWinner;/*------Cached Element References------*/constmessageEl=document.getElementById('message');constguessesEl=document.getElementById('prevGuesses');constguessBtn=document.getElementById('guessButton');constresetBtn=document.getElementById('resetButton');constguessInput=document.getElementById('guessInput');/*------Event Listeners------*/resetBtn.addEventListener('click',function(){init();});/*------Functions------*/init();functioninit(){guessesEl.innerText='';messageEl.innerText='Please enter a number between 1 and 100'guessInput.value='';guessList=[];isWinner=false;secretNum=Math.floor(Math.random()*100)+1;}
Step 18: Add an event listener for the 'Submit' button that calls a function to check the current guess. Check for a winner to disallow clicks once the game has been won. Pass the current value of the input element into the function for comparison. Use parseInt on the value to turn it from a string into a number. Define this function below the initialization function. This function should compare the guess to the secret number. Stub up conditional statements to handle what happens when the number is higher, lower, or equal to the secret number:
// Below the initialization function:functioncheckGuess(guess){if(guess===secretNum){// Win scenario}elseif(guess<=secretNum){// Guess too low}else{// Guess too high}}
Step 19: Fill in each of the conditional statements for the checkGuess function. Each condition should display a different message using the cached message element. Flip the isWinner variable to true if there's a correct guess to prevent additional clicks. Add a line to clear out the guess input value as well as error handling for inputting a number out of range. Push the guess into the previous guesses array. Add a class name to the message element to change it's color based on the guess. (Don't forget to add a line in the initialization function to change the class name back!) Call a function to render all guesses (which will be defined in the next step):
functioninit(){// Add this line of code:messageEl.className='';guessesEl.innerText='';messageEl.innerText='Please enter a number between 1 and 100'guessInput.value='';guessList=[];...
functioncheckGuess(guess){guessInput.value='';if(guess<1||guess>100){messageEl.innerText='Whoops! Please try a number between 1 and 100.';}elseif(guess===secretNum){messageEl.className='winner';isWinner=true;if(guessList.length===0){messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guess!`}else{messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guesses!`}}elseif(guess<=secretNum){messageEl.className='low';messageEl.innerText=`${guess} is too low, please try again!`guessList.push(guess);}else{messageEl.className='high';messageEl.innerText=`${guess} is too high, please try again!`guessList.push(guess);}render(guess);}
Step 20: Add CSS styling for each guess condition:
Step 21: Write a render function to display the list of previous guesses on the page. Append an element to the cached guesses element, also adding a class name indicating whether it is higher or lower than the secret number. (Add the render function in the initialization function to refresh changes being made to the DOM on a reset!):
functioninit(){messageEl.className='';guessesEl.innerText='';messageEl.innerText='Please enter a number between 1 and 100'guessInput.value='';guessList=[];isWinner=false;secretNum=Math.floor(Math.random()*5)+1;// Add this linerender();}
Listed below are the contents of index.html, main.js, and style.css. Use these as references if you're encountering any errors.
index.html:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Guessing Game</title><linkrel="stylesheet" href="css/style.css"><scriptdefersrc="js/main.js"></script></head><body><h1>Number Guessing Game</h1><h3id="message">Please enter a guess between 1 and 100!</h3><div><inputid="guessInput" type="text" placeholder="Enter guess here..."><buttonid="guessButton">Guess</button></div><divid="prevGuesses"></div><buttonid="resetButton">Reset</button></body></html>
/*------Constants------*//*------Variables------*/letsecretNum,currentGuess,guessList,isWinner;/*------Cached Element References------*/constmessageEl=document.getElementById('message');constguessesEl=document.getElementById('prevGuesses');constguessBtn=document.getElementById('guessButton');constresetBtn=document.getElementById('resetButton');constguessInput=document.getElementById('guessInput');/*------Event Listeners------*/resetBtn.addEventListener('click',function(){init();});guessBtn.addEventListener('click',function(){if(guessList.length===0){guessesEl.innerText='Previous Guesses:'}if(isWinner===false){checkGuess(parseInt(guessInput.value));}})/*------Functions------*/init();functioninit(){messageEl.className='';guessInput.value='';guessesEl.innerText='';messageEl.innerText='Please enter a number between 1 and 100'guessList=[];isWinner=false;secretNum=Math.floor(Math.random()*100)+1;render();}functioncheckGuess(guess){guessInput.value='';if(guess<1||guess>100){messageEl.innerText='Whoops! Please try a number between 1 and 100.';}elseif(guess===secretNum){messageEl.className='winner';isWinner=true;if(guessList.length===0){messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guess!`}else{messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guesses!`}}elseif(guess<=secretNum){messageEl.className='low';messageEl.innerText=`${guess} is too low, please try again!`guessList.push(guess);}else{messageEl.className='high';messageEl.innerText=`${guess} is too high, please try again!`guessList.push(guess);}render(guess);}functionrender(guess){if(guess>secretNum){vardiv=document.createElement("div");div.id='guess';div.innerText=guess;div.className='high';guessesEl.appendChild(div);}elseif(guess<secretNum){vardiv=document.createElement("div");div.id='guess';div.innerText=guess;div.className='low';guessesEl.appendChild(div);}}
----------- End Of Code Checkpoint -----------
BONUS MATERIAL:
The following section contains some fun additions to make this game a little less boring. I've picked a few examples of easy to use JavaScript/CSS libraries that spice things up a bit.
Adding Confetti on a win:
Who doesn't love confetti? The simple answer is nobody. If you want a quick way to add confetti streamers to an application, check out confetti.js.
By simply adding the CDN link in a script tag in the head of the index.html file, you'll have access to all sorts of functions that control confetti in your app.
After adding the CDN link, simply add one of the functions to the win logic and you'll be celebrating in no time:
functioncheckGuess(guess){guessInput.value='';if(guess<1||guess>100){messageEl.innerText='Whoops! Please try a number between 1 and 100.';}elseif(guess===secretNum){messageEl.className='winner';isWinner=true;// Adding this single line of code will cause confetti to fall for 1.5 seconds on a correct guess!confetti.start(1500);if(guessList.length===0){messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guess!`}else{messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guesses!`}...
Spice up your buttons with Bootstrap:
Let's face it, normal buttons are boring. A quick way to add some style to your buttons is by using the Bootstrap library.
Grab the CDN from the documentation and add it to the head of index.html. It comes with default options for many html elements, so you will notice a few changes to the game after adding the link. (Make sure you add it ABOVE the style.css link or else it will screw with all that hard work we did earlier to get things centered!):
Take a look at the documentation for buttons. All that's needed to style a button is adding a couple of class names! Let's update the button elements in the index.html:
After adding the CDN, the documentation mentions that to give an element an animated effect, add 'animated' and whatever the animation name is you're after to the element. Let's make our title wobble if the game is won:
functioninit(){// Reset the title class name when resetting gametitleEl.className='';messageEl.className='';guessInput.value='';guessesEl.innerText='';messageEl.innerText='Please enter a number between 1 and 100'guessList=[];isWinner=false;secretNum=Math.floor(Math.random()*5)+1;render();console.log(secretNum);}
functioncheckGuess(guess){guessInput.value='';if(guess<1||guess>100){messageEl.innerText='Whoops! Please try a number between 1 and 100.';}elseif(guess===secretNum){// Add this linetitleEl.className='animated bounce'messageEl.className='winner';isWinner=true;confetti.start(1500);if(guessList.length===0){messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guess!`}else{messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guesses!`}
Adding sound effects:
Let's add a sweet kazoo sound effect to go with the awesome confetti. You'll notice that there's a directory named 'audio' with a file 'kazoo.wav' within it. Declare a variable in the constants section of main.js:
Using setTimeout, add a 1 second delay to the sound effect and include it in the code where the winner is being declared. Easy peasy, you've got yourself some sweet kazoo action!:
functioncheckGuess(guess){guessInput.value='';if(guess<1||guess>100){messageEl.innerText='Whoops! Please try a number between 1 and 100.';}elseif(guess===secretNum){titleEl.className='animated bounce'messageEl.className='winner';isWinner=true;confetti.start(1500);// Add this line of code:setTimeout(function(){kazoo.play();},1000);if(guessList.length===0){messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guess!`}else{messageEl.innerText=`Congratulations! You found the number in ${guessList.length+1} guesses!`}