HomeJavascriptGuess the number | Step By Step Javascript Project

Guess the number | Step By Step Javascript Project

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!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

eleven + eight =

Most Popular