Create a Number Guessing Game with HTML, CSS and JavaScript

I’m thrilled to share that I’ve just completed my first project combining HTML, CSS, and JavaScript. It’s a simple yet exciting “Guess the Number” game, and I couldn’t be prouder of how it turned out. Building this project was not only a great learning experience but also a lot of fun. Let me walk you through the process, the challenges I faced, and what I learned along the way.

What is the “Guess the Number” Game?

The “Guess the Number” game is a classic beginner-friendly project where the player tries to guess a randomly generated number within a certain range. In my version, the game generates a number between 1 and 100, and the player has a limited number of attempts to guess the correct number. After each guess, the game provides feedback like “Too high!” or “Too low!” to help the player narrow down their next guess. If the player guesses the number within the allowed attempts, they win; otherwise, they lose.

How I Built It

HTML: The Structure

The HTML part was straightforward. I created a simple structure for the game, including:

• A title for the game.
• An input field for the player to enter their guess.
• A button to submit the guess.
• A section to display messages like “Too high!” or “You win!”
• A counter to show the number of remaining attempts.

Here’s a snippet of the HTML code:

<div class="game-container">
    <h1>Guess the Number!</h1>
    <p>Guess a number between 1 and 100:</p>
    <input type="number" id="guessInput" min="1" max="100">
    <button id="submitGuess">Submit</button>
    <p id="message"></p>
    <p>Attempts remaining: <span id="attempts">10</span></p>
</div>

CSS: The Styling

Next, I used CSS to make the game visually appealing. I added some basic styling to center the game on the page, style the input field and button, and make the messages stand out. I also used a bit of hover and focus effects to make the game feel more interactive.

Here’s a snippet of the CSS:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.game-container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

JavaScript: The Logic

The JavaScript part was where the magic happened. I wrote the logic to:

• Generate a random number between 1 and 100.
• Compare the player’s guess to the random number.
• Provide feedback based on the guess.
• Track the number of attempts and end the game if the player runs out of guesses.

Here’s a snippet of the JavaScript code:

const randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 10;

document.getElementById('submitGuess').addEventListener('click', function() {
    const guess = parseInt(document.getElementById('guessInput').value);
    const message = document.getElementById('message');
    const attemptsDisplay = document.getElementById('attempts');

    if (isNaN(guess) || guess < 1 || guess > 100) {
        message.textContent = 'Please enter a valid number between 1 and 100.';
        return;
    }

    attempts--;
    attemptsDisplay.textContent = attempts;

    if (guess === randomNumber) {
        message.textContent = 'Congratulations! You guessed the number!';
        endGame();
    } else if (guess < randomNumber) {
        message.textContent = 'Too low! Try again.';
    } else {
        message.textContent = 'Too high! Try again.';
    }

    if (attempts === 0) {
        message.textContent = `Game over! The number was ${randomNumber}.`;
        endGame();
    }
});

function endGame() {
    document.getElementById('submitGuess').disabled = true;
    document.getElementById('guessInput').disabled = true;
}

Challenges I Faced

• Validating User Input:
  Ensuring the player entered a valid number between 1 and 100 was trickier than I thought. I had to add checks to handle cases where the input was empty, out of range, or not a number.
• Game Logic:
  Figuring out how to compare the guess to the random number and provide the right feedback took some trial and error. I also had to make sure the game ended properly when the player won or ran out of attempts.
• Styling:
  While CSS is fun, getting everything to look just right (especially centering the game on the page) was a bit challenging at first.

What I Learned

This project taught me so much about how HTML, CSS, and JavaScript work together to create interactive web applications. Here are some key takeaways:

• HTML provides the structure and content.
• CSS makes the content visually appealing and user-friendly.
• JavaScript adds interactivity and functionality.

I also learned the importance of planning before coding. Breaking the project into smaller tasks (like designing the layout, writing the logic, and styling) made the process much smoother.

Final Thoughts

Building this “Guess the Number” game was an incredibly rewarding experience. It’s amazing to see how a few lines of code can come together to create something fun and interactive. This project has given me the confidence to tackle more complex projects in the future, and I’m excited to continue learning and growing as a developer.