Number Guessing Game Javascript | Guess Number Javascript

Welcome🎉 to Code With Random blog. This blog teaches us how we create a Number Guessing Game. We use HTML, Css, and javascript for the Number Guessing Game. I hope you enjoy our blog so let’s start with a basic HTML structure for the Number Guessing Game.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
    <title>Guess Number</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <main>
        <h1>Guess My Number</h1>
        <p id="header">I'm a number between 1 and 100</p>
        <h4># of times you've guessed:<p id="guesses"></p></h4>
        <form id="thegame" action="" method="get">
          <fieldset>
            <input type="text" pattern="\d*" id="guess" maxlength="3" />
            <input type="submit" value="Guess" />
          </fieldset>
        </form>
        <a href="#">New game</a>
      </main>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="app.js"></script>  
</body>
</html>

There is all the HTML code for the Number Guessing Game. Now, you can see an output with a Number Guessing Game then we write javascript for the Number Guessing Game.

Output

CSS Code

html, body {
  padding: 25px 0;
  margin: 0;
  font: normal 16px "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  color: #16997c;
  background: url("http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

main {
  display: block;
  max-width: 400px;
  min-width: 250px;
  padding: 20px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  main {
    width: 90%;
  }
}

h1 {
  color: #d35400;
}

fieldset {
  padding: 0 0 25px 0;
  margin: 0;
  border: none;
}

input[type="text"] {
  width: 40px;
  height: 40px;
  padding: 10px;
  margin: 0 0 20px 0;
  font: normal 20px "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  border: none;
  box-sizing: border-box;
}

input[type="submit"] {
  display: block;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  padding: 15px 0;
  font: normal 20px Helvetica, Arial, sans-serif;
  color: #ffffff;
  text-shadow: 1px 1px 5px rgba(80, 80, 80, .8);
  border: none;
  background: linear-gradient(to bottom, #f39c12 0%, #d35400 100%);
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
}

a { 
  color: #d35400; 
  font-size: 1.4em;
  text-decoration: none;
  font-weight: bold;
}

#guess {
  width: 90px;
}

Css Updated output

Javascript Code

$(document).ready(function() {
  
  var answer = Math.floor(Math.random() * 100) + 1;
  console.log(answer);

  var guess_count = 0;
  console.log(guess_count);

  // on submit even for the guess
  $("form").on("submit", function(e) {
    e.preventDefault();

    var guess = +$("input#guess").val();
    console.log(guess);

    guess_count++;
    
   
    $("#guesses").text(guess_count);
    
    // comparisons to see if guess is right
    if (guess > answer) {
      var high_message = "My number is less than " + guess;
      $("#header").text(high_message);

    } else if (guess < answer) {
      var low_message = "My number is greater than " + guess;
      $("#header").text(low_message);
      
    } else {
      var congrat_message = "Congratulations " + guess + " is the number";
      $("#header").text(congrat_message);
      
    }
  });
  
  $("input:text").focus(function(){$(this).val("")});

  // on click event to reset the game
  $("a").on("click", function(e) {
    e.preventDefault();

    answer = Math.floor(Math.random() * 100) + 1;
    $("p").text("Guess a number from 1 to 100");
    console.log(answer);
    guess_count = 0;
  })

});

Final output

Now that we have completed our javascript section, our updated output with javascript. Hope you like the number guessing game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
This post teaches us how to create a number guessing game using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Code By – Luke Genco

Check out more…..

1. 50 front-end projects html Css

2. add to cart button

3. quiz app javascript