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>Unit Converter</title>
7 <link rel="stylesheet" href="style.css">
8 <script defer src="convert.js"></script>
9</head>
10<body>
11 <main class="app" aria-labelledby="title">
12 <header class="hero">
13 <div>
14 <p class="eyebrow">Static utility</p>
15 <h1 id="title">Unit Converter</h1>
16 <p class="lede">Instant two-way conversions for length, mass, temperature, data size, and time.</p>
17 </div>
18 <a class="test-link" href="tests.html">Run tests</a>
19 </header>
20
21 <section class="panel" aria-label="Converter controls">
22 <div class="toolbar">
23 <label>
24 <span>Category</span>
25 <select id="category" autofocus></select>
26 </label>
27 <label>
28 <span>Precision</span>
29 <select id="precision" aria-label="Decimal places">
30 <option value="0">0 decimals</option>
31 <option value="1">1 decimal</option>
32 <option value="2">2 decimals</option>
33 <option value="3">3 decimals</option>
34 <option value="4" selected>4 decimals</option>
35 <option value="5">5 decimals</option>
36 <option value="6">6 decimals</option>
37 <option value="8">8 decimals</option>
38 <option value="10">10 decimals</option>
39 <option value="12">12 decimals</option>
40 </select>
41 </label>
42 </div>
43
44 <div class="converter-grid">
45 <div class="value-card">
46 <label for="fromValue">From value</label>
47 <input id="fromValue" type="number" inputmode="decimal" step="any" autocomplete="off">
48 <select id="fromUnit" aria-label="From unit"></select>
49 </div>
50
51 <button id="swap" class="swap" type="button" title="Swap units (Ctrl/⌘+S)" aria-label="Swap units">⇄</button>
52
53 <div class="value-card">
54 <label for="toValue">To value</label>
55 <input id="toValue" type="number" inputmode="decimal" step="any" autocomplete="off">
56 <select id="toUnit" aria-label="To unit"></select>
57 </div>
58 </div>
59
60 <p id="status" class="status" role="status" aria-live="polite"></p>
61 <div class="shortcuts" aria-label="Keyboard shortcuts">
62 <kbd>Tab</kbd> through controls · <kbd>Ctrl/⌘ K</kbd> focus value · <kbd>Ctrl/⌘ S</kbd> swap · <kbd>Esc</kbd> clear
63 </div>
64 </section>
65
66 <section class="panel recents" aria-labelledby="recentTitle">
67 <div class="section-heading">
68 <h2 id="recentTitle">Recent conversions</h2>
69 <button id="clearRecent" type="button">Clear</button>
70 </div>
71 <ol id="recentList"></ol>
72 </section>
73 </main>
74</body>
75</html>
76
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.