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!
