Introduction:
In this tutorial, you will create a simple number-guessing game using JavaScript. This project will help you understand the basics of JavaScript, including working with variables, functions, and user input. By the end of this project, you’ll have a fun, interactive game that tests the player’s ability to guess a randomly generated number between 1 and 100.
Things You Will Learn:
- Generating random numbers in JavaScript
- Handling user input and converting data types
- Creating feedback messages
- Building simple game logic
Video Tutorial:
I would suggest you to watch the video down below for better understanding on we have implemented the functionlity of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks and tutorials related to HTML, CSS and Javascript.
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ‘Guess the number’. Inside this folder we have 3 files. These files are :
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Guess The Number</title> <!-- Google Font --> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" /> <!-- Stylesheet--> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <h1>Guess The Number Game</h1> <p>I have picked a random number between 1 & 100. Can you guess it?</p> <input type="number" id="guessInput" placeholder="Enter your guess" /> <button onclick="makeGuess()">Guess</button> <p id="message"></p> </div> <script src="script.js"></script> </body> </html>
CSS:
Next, you’ll apply the styles by inserting this CSS code into your stylesheet.
* { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #9ebefb; font-family: "Poppins", sans-serif; text-align: center; } .container { width: min(500px, 90vw); position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; box-shadow: 0 20px 40px rgba(3, 15, 64, 0.2); border-radius: 16px; background-color: #ffffff; } h1 { background-color: #3359f8; border-radius: 16px 16px 0 0; padding: 20px 0; color: #ffffff; } p { padding: 20px; } input { width: 130px; padding: 20px 5px; border: 2px solid #000000; border-radius: 6px; } button { background-color: #3359f8; color: #ffffff; border: none; padding: 16px 10px; font-size: 20px; border-radius: 6px; }
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
//Part:1 generate a random number between 1 and 100 const randomNumber = Math.floor(Math.random() * 100) + 1; //Part 2: set up a variable to keep trackof number of guesses let attempts = 0; //Part 3: Create a function to handle the guessing process function makeGuess() { //Get user's guess from input and convert into integer const userGuess = parseInt(document.getElementById("guessInput").value); //Select paragraph element where we will display feedback messages const message = document.getElementById("message"); //Increment the number of attempts each time user makes a guess attempts++; //Part 4: check if user's guess matches the random number if (userGuess === randomNumber) { message.textContent = `Congratulations! You gussed it right in ${attempts} attempts`; } else if (userGuess < randomNumber) { message.textContent = "Too low! Try higher number"; } else { message.textContent = "Too High! Try lower number"; } }
Conclusion:
In this project, you created a number-guessing game using HTML, CSS, and JavaScript. You learned how to generate random numbers, handle user input, and build basic game logic. This project is a great way to build foundational skills in JavaScript. Try experimenting with the code to add more features, such as a reset button or a maximum attempt limit, to make the game more challenging!