cascadecoder.github.io/guessing-game.html at main · cascadecoder/cascadecoder.github.io · 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
  <head>
    <title>Guessing Game | rowannerd</title>
    <style>
      body {
        background-color: rgb(0, 250, 250);
        color: rgb(10, 10, 12);
        font-family: sans-serif;
        width: 600px;
      }
      .middle {
        text-align: center;
      }
      button {
        background-color: red;
        height: 50px;
        color: white;
        box-shadow: 4px 4px 5px grey;
      }
      button:hover {
        background-color: black;
      }
      #game {
        visibility: hidden;
      }
      #start {
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <h1 class="middle">Guessing Game | rowannerd</h1>
    <p>Objective: Correctly guess the number I will randomly come up with!</p>
    <br>
    <br>
    <button onclick="randomize()" id="start">Start Game</button>
    <div id="game">
    <p>I am thinking of a number between 1 and 10</p>
    <br>
    <br>

    <p>Guess:</p>
    <input type="text" id="guess">
    <button onclick="guess()">Guess</button>
    </div>
    <br>
    <br>
    <div id="message">
    </div>
    <div id="score"></div>
    <div id="demo"></div>
    <script>
      var number = 0;
      var tries = 0;
      var win = 0;
      function randomize() {
        tries = 0;
        number = Math.random();
        number*=10;
        number = number.toFixed(0);
        document.getElementById("game").style.visibility = 'visible';
        document.getElementById("start").style.visibility = 'hidden';
        document.getElementById("score").style.visibility = 'hidden';
        document.getElementById("message").style.visibility = 'hidden';
        //document.getElementById("message").innerHTML = number;
        win = 0;
      }
      function guess() {
        if (win == 0) {
        tries++;
        document.getElementById("score").style.visibility = 'visible';
        document.getElementById("message").style.visibility = 'visible';
        var answer = document.getElementById("guess").value;
        answer = Number(answer); // added by dad
        number=Number(number); // added by dad
        var message = document.getElementById("message");
          document.getElementById("guess").value="";
        if (answer == number) {
          message.innerHTML = "You got it! It was " + number;
          document.getElementById("score").innerHTML = "You got it in " + tries + " tries.";
          document.getElementById("start").style.visibility = 'visible';
          win++;
        } else if (!answer == "") {
          message.innerHTML = "Nope! Try again!" + " Your answer: " + answer + " Tries so far: " + tries;
          if (answer > number) {
            document.getElementById("score").innerHTML = "Lower!";
          } else if (answer < number) {
            document.getElementById("score").innerHTML = "Higher!";
          } else {
            document.getElementById("score").innerHTML = "Enter a number, not a letter or symbol!";
          }
        } else {
          message.innerHTML = "Enter a number!";
        }
        //document.getElementById("score").innerHTML = number;
        var demo = document.getElementById("guess");
        //demo.innerHTML = message.value;
        }
      }
      //randomize();
    </script>
  </body>
</html>