Guess the Number Game in JavaScript

Now, let’s create a fun little game called “Guess the Number.” It’s a simple game where the computer randomly picks a number, and the player has to guess it. If they guess too high or too low, they get feedback, making it engaging!

Approach

Here’s how we’ll set it up:

HTML: We’ll create a simple interface where users can input their guesses.
CSS: We’ll add some styles to make the game look good.
JavaScript: We’ll implement the game logic, including random number generation and feedback for guesses.

Let’s jump into it!

1. HTML Code (index.html)

Here’s the HTML for our guessing game:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guess the Number Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Guess the Number Game</h1>
    <p>I'm thinking of a number between 1 and 100. Can you guess it?</p>
    <input type="number" id="guess-input" placeholder="Enter your guess">
    <button id="guess-button">Guess!</button>
    <p id="result-message"></p>
    <script src="script.js"></script>
</body>
</html>

This HTML file sets up a title and a brief instruction for the game.
There’s an input field for the user’s guess and a button to submit their guess.
We also have a <p> element to display feedback messages.

2. CSS Code (style.css)

Next, let’s style our game:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

input {
    margin: 10px;
}

button {
    padding: 10px 15px;
    background-color: #2ecc71;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #27ae60;
}

#result-message {
    margin-top: 20px;
    font-size: 18px;
}

The CSS makes everything look nice and clean.
The button has a green color scheme that changes on hover, making it interactive.
The result message is styled to stand out after the user makes a guess.

3. JavaScript Code (script.js)

Finally, here’s the JavaScript to bring the game to life:

let randomNumber = Math.floor(Math.random() * 100) + 1; // Generate random number
let attempts = 0;

document.getElementById("guess-button").addEventListener("click", () => {
    const userGuess = parseInt(document.getElementById("guess-input").value);
    attempts++;
    const resultMessage = document.getElementById("result-message");

    if (userGuess === randomNumber) {
        resultMessage.textContent = `Congratulations! You guessed the number in ${attempts} attempts.`;
    } else if (userGuess < randomNumber) {
        resultMessage.textContent = "Too low! Try again.";
    } else if (userGuess > randomNumber) {
        resultMessage.textContent = "Too high! Try again.";
    } else {
        resultMessage.textContent = "Please enter a valid number.";
    }
});

We start by generating a random number between 1 and 10 and keep track of the number of attempts.
When the user clicks the guess button, we get their input and increment the attempts counter.
We check the guess against the random number and update the message accordingly.

Output

Conclusion

And there you have it! You’ve just created a “Guess the Number” game that challenges players to guess the computer’s number. This is a fantastic project to practice basic JavaScript and user interaction.

Use Cases

Fun interactive games for educational websites.
Basic skill-testing applications.
Great practice for learning JavaScript fundamentals.