rock_paper_scissors/index.html at master · code-1-Morgan/rock_paper_scissors · 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
<!DOCTYPE html>
<html>

<head>

	<meta charset="UTF-8">

	<title>Parchment, Stone, or Blade</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Monda:wght@400;700&display=swap" rel="stylesheet">
  <!-- 400,700 -->

	<link rel="stylesheet" href="css/main.css">

</head>

<body>

  <main>
    <h1>Rock, Paper, or Scissors?</h1>

    <p>A bot has challenged you to a game. <strong>Rock</strong> beats <strong>scissors</strong>, <strong>scissors</strong> beats <strong>paper</strong>, and <strong>paper</strong> beats <strong>rock</strong>.</p>

    <div class="middleRow">
      <section class="selection">
        <h2>Choose Wisely</h2>
        <div class="buttonSection">
          <button id="rock">Rock</button>
          <button id="paper">Paper</button>
          <button id="scissors">Scissors</button>
        </div>
      </section>

      <div class="scoreboard">
        <table>
          <caption>Scoreboard</caption>
          <tbody>
            <tr>
              <td id="humanScore">0</td>
              <td id="computerScore">0</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th>You</th>
              <th>Bot</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="bottomText">
      <div id="roundResults"></div>
      <div id="status"></div>
    </div>

  </main>

  <script type="text/javascript" src="js/main.js"></script>
</body>


</html>