Number Guessing Game using JavaScript

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

Recommended Posts: