fm-typing-speed-test/index.html at main · LYGreen/fm-typing-speed-test · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <title>Frontend Mentor | Typing Speed Test</title>
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <link rel="stylesheet" href="./assets/resources/style.css">
  <script src="./assets/resources/script.js" defer></script>
</head>
<body>
  <header>
    <picture class="logo">
      <source media="(max-width: 640px)" srcset="./assets/images/logo-small.svg">
      <img src="./assets/images/logo-large.svg" alt="">
    </picture>
    <div class="personal-best">
      <img src="./assets/images/icon-personal-best.svg" alt="">
      <p>Personal best: </p>
      <span id="personal-best-wpm"><!-- PB --></span>
      <span> WPM</span>
    </div>
  </header>
  <main>
    <div class="typing-page">
      <div class="test-head">
        <table class="computations regular-medium">
          <tbody>
            <tr>
              <td>WPM: <span class="wpm sora-bold-medium"><!-- WPM --></span></td>
              <td>Accuracy: <span class="accuracy sora-bold-medium"><!-- Accuracy --></span></td>
              <td>Time: <span class="time sora-bold-medium"><!-- Time --></span></td>
            </tr>
          </tbody>
        </table>

        <table class="options sora-small">
          <tr>
            <td>
              <div role="radiogroup" aria-labelledby="difficulty">
                <span>Difficulty:</span>
                <div class="mobile-option"><span id="mobile-option-difficulty">Easy</span><img src="./assets/images/icon-down-arrow.svg" alt=""></div>

                <div class="list">
                  <input id="easy" name="difficulty" value="easy" type="radio" checked>
                  <label for="easy">Easy</label>

                  <input id="medium" name="difficulty" value="medium" type="radio">
                  <label for="medium">Medium</label>

                  <input id="hard" name="difficulty" value="hard" type="radio">
                  <label for="hard">Hard</label>
                </div>
              </div>
            </td>

            <td>
              <div role="radiogroup" aria-labelledby="mode">
                <span>Mode:</span>
                <div class="mobile-option"><span id="mobile-option-mode">Timed (60s)</span><img src="./assets/images/icon-down-arrow.svg" alt=""></div>

                <div class="list">
                  <input id="mode-timed" name="mode" value="timed" type="radio" checked>
                  <label for="mode-timed">Timed (60s)</label>

                  <input id="mode-passage" name="mode" value="passage" type="radio">
                  <label for="mode-passage">Passage</label>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>


      <div class="test-body sora-regular">
        <hr>
        <!-- Passage -->
        <div class="before-start">
          <button id="start-typing-btn" class="sora-bold-medium">Start Typing Test</button>
          <p class="sora-bold-medium">Or click the text and start typing</p>
        </div>

        <input id="passage" type="text">
        <div id="passage-div" class="passage">
          <!-- <span class="placeholder">She walked to the store to buy some bread and milk. The shop was busy but she found what she needed quickly. On her way home, she saw a friend and waved.</span> -->
        </div>

        <hr>

        <button id="restart-btn" class="sora-bold-medium">
          Restart Test
          <img src="./assets/images/icon-restart.svg" alt="">
        </button>
      </div>

    </div>

    <div class="complete-page" style="display: none;">
      <!-- Test Complete Start -->

      <img class="img" src="./assets/images/icon-completed.svg" alt="">
      <h1 class="title sora-regular">Test Complete!</h1>
      <p class="description sora-medium">Solid run. Keep pushing to beat your high score.</p>

      <div class="results sora-medium">
        <div>WPM: <span class="wpm sora-bold-medium"><!-- WPM --></span></div>
        <div>Accuracy: <span class="accuracy sora-bold-medium"><!-- Accuracy --></span></div>
        <div>Characters:
          <span class="sora-bold-medium">
            <span class="correct"></span>
            /
            <span class="wrong"></span>
          </span>
        </div>
      </div>

      <button id="go-again-btn" class="sora-bold-medium">
        <span class="btn-text">Go Again</span>
        <img src="./assets/images/icon-restart-dark.svg" alt="">
      </button>

      <img id="star1" src="./assets/images/pattern-star-2.svg" alt="">
      <img id="star2" src="./assets/images/pattern-star-1.svg" alt="">

      <!-- Test Complete End -->
    </div>
  </main>

  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge">Frontend Mentor</a>.
    Coded by <a href="https://github.com/LYGreen">LYGreen</a>.
  </footer>
</body>
</html>