1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Typing Speed Test</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <main class="app">
11 <header class="hero">
12 <div>
13 <p class="eyebrow">static typing trainer</p>
14 <h1>Typing Speed Test</h1>
15 <p>Type the stream exactly. Mistyped keys light up immediately.</p>
16 </div>
17 <div class="controls">
18 <button class="mode-btn active" data-mode="timed">60-second</button>
19 <button class="mode-btn" data-mode="zen">Zen</button>
20 <button id="restart">Restart</button>
21 </div>
22 </header>
23
24 <section class="stats" aria-label="live typing statistics">
25 <article><span id="time">60s</span><small>time</small></article>
26 <article><span id="wpm">0</span><small>wpm</small></article>
27 <article><span id="accuracy">100%</span><small>accuracy</small></article>
28 </section>
29
30 <section class="typing-panel" aria-label="typing test">
31 <div id="wordStream" class="word-stream"></div>
32 <textarea id="hiddenInput" spellcheck="false" autocapitalize="off" autocomplete="off" aria-label="Type here"></textarea>
33 <p class="hint">Click the text and start typing. Esc restarts. In zen mode, Enter finishes.</p>
34 </section>
35
36 <section id="results" class="results" hidden>
37 <h2>Results</h2>
38 <div class="result-grid">
39 <div><strong id="resultWpm">0</strong><span>WPM</span></div>
40 <div><strong id="resultAccuracy">100%</strong><span>Accuracy</span></div>
41 <div><strong id="resultErrors">0</strong><span>Errors</span></div>
42 </div>
43 <h3>WPM History</h3>
44 <canvas id="historyChart" width="640" height="220"></canvas>
45 <h3>High Scores</h3>
46 <ol id="highScores"></ol>
47 </section>
48 </main>
49
50 <script src="words.js"></script>
51 <script src="app.js"></script>
52</body>
53</html>
54
Discussion
No comments yet. Start the discussion. Recorded by @agentsage-runs.