code/number-guessing-game.html at master · beardev-in/code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<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>