Random Number Guessing Game in JS. 10 Days 10 Beginner JS Projects. Day 7

You’ve learned HTML and CSS and started to learn JavaScript. You studied all the basics. Now it is time to practice.

But... What should I build?

We'll build 10 projects in 10 days. We'll be exploring 10 beginner-friendly JavaScript projects one by one that will help you sharpen your skills and get you started on your journey to becoming a skilled web developer. These projects are easy to follow and require minimal experience, making them perfect for beginners. Let's get started and dive into the exciting world of JavaScript projects! We'll focus on JavaScript so I won't explain every HTML and CSS code. You can style it however you want and add things to make your own.

Let's go.

What we will build in 10 days:

1. Simple Calculator

2. Random Quote Generator

3. To-do List

4. Image Slider

5. Stopwatch

6. Weather App with an API

7. Random Number Guessing Game

8. Rock-Paper-Scissors

9. Memory Game

10. Countdown Timer.

Day 6.

Random Number Guessing Game

Today we'll build a simple, fun game. Random Number Guessing Game. You guess a number between 1 and 10. If it is the same as the computer guess you win, or you lose.

Let's start.

Simple HTML:

1. An input field for the user to write the guess

2. An area to display if the user win or not

3. An area to display the guess of the computer

<h1>Guessing Game</h1>
    <p>Guess a number between 1 and 10:</p>
    <input type="number" id="guess" min="1" max="10">
    <button onclick="checkGuess()">Submit</button>
    <p id="result"></p>
    <p id="computer-guess"></p>

Simple CSS

body {
    text-align: center;
    font-family: sans-serif;
}

h1 {
    margin-top: 50px;
}

input {
    padding: 10px;
    margin-bottom: 10px;
  width:10%;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #0062cc;
}

p {
    margin-top: 20px;
    font-size: 18px;
}

And JS

function checkGuess() {
    // Generate a random number between 1 and 10
    var number = Math.floor(Math.random() * 10) + 1;

The checkGuess the function is defined to perform some actions when it's called. The second line generates a random number between 1 and 10 using the built-in Math.random() function in JavaScript. The Math.floor() function is used to round the result down to the nearest integer, and we add 1 to ensure that the result is between 1 and 10 (inclusive).

var guess = parseInt(document.getElementById("guess").value);

This line retrieves the user's guess from an input field with an id "guess". The parseInt() function is used to convert the string value of the input field to an integer value.

document.getElementById("computer-guess").innerText = "The computer guessed: " + number;

This line displays the computer's guess on the page by setting the innerText property of an HTML element with an id of "computer-guess". The + operator is used to concatenate the string "The computer guessed: " with the value of the number variable.

    if (guess === number) {

This line checks if the user's guess is equal to the computer's guess using the === operator. If they are equal, the if block is executed. Otherwise, the else block is executed.

document.getElementById("result").innerText = "Congratulations! You guessed the correct number.";
    } else {
        document.getElementById("result").innerText = "Sorry, you guessed the wrong number. The correct number was " + number;
    }
}

These lines display the result of the game by setting the innerText property of an HTML element with an id of "result". If the user's guess is equal to the computer's guess, the message "Congratulations! You guessed the correct number." is displayed. Otherwise, the message "Sorry, you guessed the wrong number. The correct number was " is displayed along with the value of the number variable.

Full JS code:

function checkGuess() {
    // Generate a random number between 1 and 10
    var number = Math.floor(Math.random() * 10) + 1;

    // Get the user's guess
    var guess = parseInt(document.getElementById("guess").value);

    // Show the computer's guess
    document.getElementById("computer-guess").innerText = "The computer guessed: " + number;

    // Check if the user's guess matches the computer's guess
    if (guess === number) {
        document.getElementById("result").innerText = "Congratulations! You guessed the correct number.";
    } else {
        document.getElementById("result").innerText = "Sorry, you guessed the wrong number.";
    }
}

Hope you understand it. See you tomorrow.

Full code on GitHub.