-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
119 lines (105 loc) · 5.24 KB
/
index.html
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
<!DOCTYPE html">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simple web app for practicing touch-typing">
<title>Programmer's Typing Practice</title>
<link rel="preload" as="font" href="assets/fonts/iosevka-regular.subset.woff2" type="font/woff2" crossorigin="anonymous"/>
<link rel="preload" as="font" href="assets/fonts/iosevka-bold.subset.woff2" type="font/woff2" crossorigin="anonymous"/>
<link rel="preload" as="font" href="assets/fonts/iosevka-italic.subset.woff2" type="font/woff2" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
<link rel="shortcut icon" type="image/png" href="assets/favicon.png" />
</head>
<body>
<svg style="display: none">
<defs>
<symbol id="github-mark" viewBox="0 0 12 12"><path d="M6 .395a5.746 5.746 0 00-1.817 11.2c.288.052.393-.125.393-.277 0-.137-.005-.498-.008-.978-1.599.348-1.936-.77-1.936-.77-.261-.664-.638-.84-.638-.84-.522-.357.04-.35.04-.35.576.041.88.592.88.592.512.878 1.345.625 1.672.478.052-.371.2-.625.365-.768-1.276-.145-2.618-.639-2.618-2.84 0-.628.224-1.14.592-1.543-.06-.145-.256-.73.056-1.52 0 0 .483-.155 1.58.589.459-.128.95-.191 1.44-.194.487.003.979.066 1.438.194 1.097-.744 1.578-.59 1.578-.59.314.792.117 1.376.058 1.521.368.402.59.915.59 1.542 0 2.208-1.343 2.694-2.623 2.836.206.178.39.528.39 1.064 0 .768-.007 1.388-.007 1.577 0 .153.103.332.395.276A5.749 5.749 0 006 .395"/></symbol>
<symbol id="plus" viewBox="0 0 11 11"><path d="M0 4 h4 v-4 h3 v4 h4 v3 h-4 v4 h-3 v-4 h-4z"/></symbol>
<symbol id="minus" viewBox="0 0 11 11"><path d="M0 4 h11 v3 h-11z"/></symbol>
<symbol id="play" viewBox="0 0 11 11"><path d="M2 0 L11 5.5 L2 11Z"/></symbol>
<symbol id="pause" viewBox="0 0 11 11"><path d="M1 0 h3 v11 h-3z M7 0 h3 v11 h-3z"/></symbol>
</defs>
</svg>
<div id="github-link">
<a href="https://github.com/climech/typing-practice">
<svg><use xlink:href="#github-mark"></use></svg>
</a>
</div>
<div id="root">
<header>
<h1>Programmer's<br/>Typing Practice</h1>
</header>
<section id="welcome">
<p>This tool was inspired by George Hotz's <span class="space-out">mad skillz</span>, and the ideas found in the book <a href="https://amzn.to/3qil2uQ" target="_blank"><em>Make It Stick</em></a> by Peter C. Brown. There are no timers, no WPMs—just a never-ending stream of gibberish. Aim for accuracy over speed. Adjust the weights below to emphasize areas you're struggling with. With regular practice, typing structured text should become easier.
<div>
<strong>Tip:</strong> Practicing with a
<div id="metronome" class="off">
<button class="toggle">
<svg class="play"><use xlink:href="#play"/></svg>
<svg class="pause"><use xlink:href="#pause"/></svg>
</button>
<span>metronome</span>
<button class="slower"><svg><use xlink:href="#minus"/></svg></button>
<button class="faster"><svg><use xlink:href="#plus"/></svg></button>
</div>
can be a good way to improve consistency.
</div>
</section>
<div id="practice">
<section class="given"></section>
<section class="typed">
<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</section>
<div class="weights">
<div class="lettersUpper">
<div class="chars">A–Z</div>
<div class="weight">
<span>1</span>
<div class="controls">
<button class="incr"><svg><use xlink:href="#plus"/></svg></button>
<button class="decr"><svg><use xlink:href="#minus"/></svg></button>
</div>
</div>
</div>
<div class="lettersLower">
<div class="chars">a–z</div>
<div class="weight">
<span>1</span>
<div class="controls">
<button class="incr"><svg><use xlink:href="#plus"/></svg></button>
<button class="decr"><svg><use xlink:href="#minus"/></svg></button>
</div>
</div>
</div>
<div class="digits">
<div class="chars">0–9</div>
<div class="weight">
<span>1</span>
<div class="controls">
<button class="incr"><svg><use xlink:href="#plus"/></svg></button>
<button class="decr"><svg><use xlink:href="#minus"/></svg></button>
</div>
</div>
</div>
<div class="punctuation">
<div class="chars">!@#…</div>
<div class="weight">
<span>1</span>
<div class="controls">
<button class="incr"><svg><use xlink:href="#plus"/></svg></button>
<button class="decr"><svg><use xlink:href="#minus"/></svg></button>
</div>
</div>
</div>
<svg class="lines"></svg>
</div>
<p>You have typed <span class="count">0</span> characters so far.</p>
</div>
<footer>
<div>(c) 2021 <a href="https://github.com/climech">climech</a></div>
</footer>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>