guessing-game/index.html at main · nextsaimon/guessing-game · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Guessing Game</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body
    class="min-h-screen w-screen flex flex-col items-center justify-center text-[22px]"
  >
    <fieldset class="fieldset">
      <legend>Settings</legend>
      <span>Limit</span>
      <select id="limit" onchange="updateLimit()">
        <option value="100">100</option>
        <option value="50">50</option>
        <option value="200">200</option>
      </select>
      <br />
      <span>Max Tries</span>
      <select id="tries" onchange="updateTries()">
        <option value="10">10</option>
        <option value="1">1</option>
        <option value="5">5</option>
        <option value="20">20</option>
      </select>
    </fieldset>
    <fieldset class="fieldset">
      <legend>Game</legend>
      <h1>
        Guess my chosen number.
        <span class="help text-blue-500 cursor-pointer" onclick="showHelp()"
          >? Help</span
        >
      </h1>
      <h1 class="font-bold" id="status">
        Max <span id="triesLeft"></span> tries
      </h1>
      <p id="rangeDisplay"></p>
      <input
        class="border-[2px] rounded-md border-gray-500"
        id="guessInput"
        type="text"
        placeholder="Enter your guess"
      />
      <button onclick="makeGuess()" class="btn">Guess</button>
    </fieldset>
    <button style="margin-top: 5px" onclick="resetGame()" class="btn">
      Reset
    </button>
    <script src="./script.js"></script>
  </body>
</html>