Number Guessing Game using JavaScript

Difficulty Level : Easy
Last Updated : 15 Feb, 2019

Prerequisites:

The game is to guess a random number generated by computer in range 1 – 10 in minimum number of Guesses.

Functions to be used:

1. document.getElementById(“id given”): document.getElementById() is used to fetch an element from the HTML page having the id as provided (specified) by the user.
“.value” is used to access the value of the HTML element accessed.

2. Math.random() : The random() function is used to generate a random number between 0 (inclusive) and 1 (exclusive). This generated number is then multiplied with 10 and added 1 to generate numbers from 1 – 10.

3. Math.floor() : The floor() function is used to return the number to the nearest integer (downwards). The value will not be rounded, if the passed argument is an integer.

Implementation of the Game.

                        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Number Guessing Game</title>
  
    <style>
        html {
    font-family: sans-serif;
    }
      
        body {
    width: 50%;
    max-width: 800px;
    min-width: 480px;
    margin: 0 auto;
    }
    </style>
</head>
  
<body>
<h1>Guess The Number</h1>
  
<p>We have selected a random number between 1 - 10. 
See if you can guess it.</p>
  
<div class="form">
    <label for="guessField">Enter a guess: </label>
    <input type = "text" id = "guessField" class = "guessField">
    <input type = "submit" value = "Submit guess" 
           class = "guessSubmit" id = "submitguess">
</div>
  
<script type = "text/javascript">
  
    // random value generated
    var y = Math.floor(Math.random() * 10 + 1);
      
    // counting the number of guesses
    // made for correct Guess
    var guess = 1;
      
    document.getElementById("submitguess").onclick = function(){
      
   // number guessed by user     
   var x = document.getElementById("guessField").value;
  
   if(x == y)
   {    
       alert("CONGRATULATIONS!!! YOU GUESSED IT RIGHT IN "
               + guess + " GUESS ");
   }
   else if(x > y) /* if guessed number is greater
                   than actual number*/ 
   {    
       guess++;
       alert("OOPS SORRY!! TRY A SMALLER NUMBER");
   }
   else
   {
       guess++;
       alert("OOPS SORRY!! TRY A GREATER NUMBER")
   }
}
</script>
</body>
</html>                    

Output:

My Personal Notes

Related Articles