Finger Game

Loading editor…<!doctype html>
<html lang="en">
<head>
  <!-- ORIGINAL (2018): same title and meta tags -->
  <title>How Many Fingers?</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- NEW: styles moved to their own file -->
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="game">
    <!-- ORIGINAL (2018): the question (typo "Hom" fixed) -->
    <h1>How many fingers am I holding?</h1>

    <!-- NEW: a hand that shows how many fingers I was holding -->
    <div class="hand" id="hand" aria-hidden="true">
      <span class="finger thumb"></span>
      <span class="finger"></span>
      <span class="finger"></span>
      <span class="finger"></span>
      <span class="finger"></span>
      <span class="palm"></span>
    </div>

    <!-- NEW: the answer is written here instead of in an alert() pop-up -->
    <p class="result" id="result" role="status" aria-live="polite">Pick a number from 0 to 5</p>

    <!-- NEW: one button per number (made in script.js), instead of
         ORIGINAL (2018): <input id="count" /> and <button id="Check">Validate</button> -->
    <div class="choices" id="choices"></div>

    <!-- NEW: a running score -->
    <p class="score">Score <strong id="score">0</strong> / <strong id="rounds">0</strong></p>
  </main>

  <!-- NEW: the script moved to its own file -->
  <script src="script.js"></script>
</body>
</html>