This is a quick "Guess the Number" game I made. It’s simple, fun, and lets users guess numbers within a specified range.
You can even customize the range, whether it’s 1-10, 1-20, 1-50, or 1-100, to make it easier or harder!
How It Works
The game picks a random number within the range.
You enter guesses, and it gives hints if the guess is too high or too low.
When you guess the correct number, it congratulates you!
A very simple game
Customization
To change the number range, update these lines in the code:
var minNumber = 1; // Change this to set the minimum number
var maxNumber = 100; // Change this to set the maximum number
Examples:
- For 1–50, change maxNumber to 50.
- For 1–10*, change maxNumber to 10.
The Code
Here’s the full HTML and JavaScript code:
<!DOCTYPE html>
<html>
<head>
<title>Guess the Number</title>
<style>
.game-container {
text-align: center;
margin-top: 50px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
.input-container {
margin-bottom: 20px;
}
.input-label {
display: block;
margin-bottom: 5px;
}
.input-field {
padding: 5px;
font-size: 16px;
}
.result-message {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="game-container">
<h1>Guess the Number</h1>
<div class="input-container">
<label class="input-label">Enter a number between <span id="min-number"></span> and <span id="max-number"></span>:</label>
<input type="text" class="input-field" id="guess-input">
</div>
<div class="result-message" id="result-message"></div>
<button id="submit-button">Submit</button>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var minNumber = 1; // Set the minimum number for the range
var maxNumber = 100; // Set the maximum number for the range
var randomNumber = Math.floor(Math.random() * (maxNumber - minNumber + 1)) + minNumber;
var minNumberElement = document.getElementById("min-number");
var maxNumberElement = document.getElementById("max-number");
minNumberElement.textContent = minNumber;
maxNumberElement.textContent = maxNumber;
var guessInput = document.getElementById("guess-input");
var resultMessage = document.getElementById("result-message");
var submitButton = document.getElementById("submit-button");
submitButton.addEventListener("click", function() {
var guess = parseInt(guessInput.value);
if (isNaN(guess)) {
resultMessage.textContent = "Please enter a valid number.";
} else if (guess < minNumber || guess > maxNumber) {
resultMessage.textContent = "Please enter a number within the valid range.";
} else if (guess === randomNumber) {
resultMessage.textContent = "Congratulations! You guessed the correct number!";
submitButton.disabled = true;
} else if (guess < randomNumber) {
resultMessage.textContent = "Too low. Try again!";
} else {
resultMessage.textContent = "Too high. Try again!";
}
});
});
</script>
</body>
</html>
That's It
I made this game to practice JavaScript basics. Feel free to copy it, play around with the range, or add features like attempt limits, hints, or make it more complex not just number.
Happy coding!
