theguessinggame/index.html at main · mustaquenadim/theguessinggame · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Guessing Game by mustaquenadim</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>

<body>
  <!-- header -->
  <header></header>
  <!-- end header -->

  <!-- main -->
  <main class="container mx-auto px-4">
    <h1 class="text-5xl text-center mt-10">The Guessing Game</h1>

    <!-- guess number input -->
    <section class="flex flex-col items-center justify-center mt-10">
      <label class="w-96 relative block">
        <span class="sr-only">Guess</span>
        <input id="guessedNumber"
          class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-red-300 rounded-full py-2 pl-3 pr-24 shadow-sm focus:outline-none focus:border-red-500 focus:ring-red-500 focus:ring-1 sm:text-sm"
          placeholder="Enter your guessed number here!" type="number" name="guess" onchange="catchGuessedNumber(this.value)" />
        <span class="absolute inset-y-0 right-0 flex items-center pr-1">
          <button type="button" class="bg-red-300 hover:bg-red-500 rounded-full px-4 py-1 text-white"
            onclick="catchGuessedNumberHandler()">Guess</button>
        </span>
      </label>

      <div class="italic text-sm text-slate-500">You've <span id="guessRemaining">10</span> guesses remaining!</div>
    </section>

    <!-- guesses -->
    <section id="guesses" class="mt-8 text-center space-y-2.5">
    </section>
    <!-- end guesses -->

    <!-- textbox -->
    <section class="fixed bottom-0 right-0">
      <img src="./assets/textbox.png" alt="Textbox Illustration" class="relative">
      <div
        class="w-96 text-center text-2xl italic absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        Hey, I'm thinking of a number between 1 to 100. Can you figure out what the number is? Remember, you've only 10
        guesses!</div>
      </img>
    </section>
    <!-- end textbox -->
  </main>
  <!-- end main -->

  <!-- footer -->
  <footer></footer>
  <!-- end footer -->

  <!--Overlay Effect-->
  <div id="modal" class="fixed hidden inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-screen w-full">
  </div>
  <!-- end overlay effect -->

  <script src="app.js"></script>
</body>

</html>