In this detailed tutorial, we will embark on the exciting journey of creating a simple, yet engaging, number guessing game using JavaScript. This interactive game aims to offer users a fun experience by challenging them to guess a randomly generated number that falls within a specified range of 1 to 20. We will meticulously guide you through the process of crafting the user interface and implementing the game logic to ensure a seamless gaming experience.

This project serves as a practical platform for enhancing my skills in HTML, CSS, and JavaScript — three essential technologies in web development. As such, I am thrilled to walk you through the process of utilizing HTML and CSS to design a visually appealing and user-friendly application. After crafting the design, we will then delve into employing JavaScript to infuse dynamic elements into the application, thereby enriching its interactivity and overall user experience.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. You’ll also need a code editor and a web browser to test your game

Number Guessing Game in JavaScript

I’ve made the complete tutorial on this topic, and I’ve explained everything from scratch. So, You can learn step-by-step how to use HTML, CSS, and JavaScript to make a Number Guessing Game.

https://youtu.be/WJZUXEG46Yc

Random Number Guessing Game in JavaScript

I’ve used very basic tactics to design and develop that game, you can add another functionality you can do that. I just share with you how to use three technologies such as HTML, CSS, and JS to make a game

Step 1: Set Up Your HTML Structure

Create an HTML file and name it index.html.
Inside the <body> tag, create the necessary elements for your game, such as a heading, an input field for guessing, a submit button, a message area to display feedback, and a button to start a new game.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <script defer src="js/script.js"></script>
    <title>Guess My Number Game......</title>
  </head>
  <body>
    <div class="container">
      <div class="container_wrapper">
        <button type="button" class="btn btn_again">Play Again</button>
        <p>Between 1 and 20</p>
      </div>
      <h2>Guess My Number Game</h2>
      <p class="hide_num">?</p>
      <p class="message">Start Guesing..............</p>
      <div class="number_data">
        <form>
          <input
            type="number"
            placeholder="Enter Your Lucky Number!"
            class="input_number"
          />
          <button type="button" class="btn btn_check">Check Now!</button>
        </form>
        <div class="content">
          <p>Score: <span class="score">20</span></p>
          <p>high Score: <span class="high_score">20</span></p>
        </div>
      </div>
    </div>
  </body>
</html>

First of All, you need to make a project and create an index.html file, once you made the file you need to use above mentioned HTML-based codes.

Once you do that, you need to use CSS to design the application, you need to create another file CSS file inside that you need use below mentioned codes that help you to design the application.

Step 2: Style Your Game with CSS

Create a CSS file and name it styles.css.
Style the elements you created in Step 1 to make your game visually appealing. You can use CSS to adjust fonts, colors, and layout.

@import url("<https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap>");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #0f2734;
  font-family: "Poppins", sans-serif;
}
.container {
  max-width: 850px;
  width: 100%;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
  padding: 2rem;
  color: 000;
  border-radius: 5px;
  background-color: #ddd;
  transition: all 0.6s ease-in;
}
.container_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .btn {
  border: none;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  outline: none;
  font-size: 0.9rem;
  background-color: #cb3050;
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
}
.container .btn:focus {
  transform: scale(0.98);
  outline: none;
}
.container h2 {
  text-align: center;
  font-size: 3rem;
  margin: 1rem 0;
}
.hide_num {
  text-align: center;
  font-size: 3rem;
  background-color: #cb3050;
  border-radius: 4px;
  width: 25%;
  margin: 0 auto;
  color: #fff;
}
.message {
  text-align: center;
  font-size: 1.3rem;
  margin: 1rem 0;
}
.number_data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0;
}
.number_data input {
  outline: none;
  border: none;
  border-radius: 3px;
  padding: 0.5rem 0.8rem;
  font-size: 1.2rem;
  border: 1px solid #ddd;
}
.number_data button {
  margin-top: 0.5rem;
  display: block;
}
.content {
  font-size: 1.2rem;
}