-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
142 lines (141 loc) · 6.32 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Calculator</title>
<meta
name="description"
content="Calculator made in HTML, Grid CSS, Vanilla JS and given accesibility and performance in mind"
/>
<meta
name="keywords"
content="calculator, vanillajs, accesibility, performance"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔢</text></svg>"
/>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<main id="calculator" class="calculator">
<div class="panel">
<div id="display" class="panel__display">
<span aria-live="polite" class="panel__display-number">0</span>
</div>
</div>
<div id="keypad" class="keypad">
<button
name="clean"
aria-label="clean"
class="keypad__button keypad__clean-button"
>
C
</button>
<button name="negate" aria-label="negate" class="keypad__button">
<svg
aria-hidden="true"
class="keypad__button-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 141.293 141.293"
>
<defs />
<path
d="M77.955 109.975c-4.037 0-7.309 3.271-7.309 7.308s3.272 7.31 7.309 7.31h56.029c4.037 0 7.309-3.271 7.309-7.31 0-4.036-3.271-7.308-7.309-7.308H77.955zM0 44.2c0 4.037 3.272 7.308 7.309 7.308h19.489v19.49c0 4.036 3.271 7.309 7.308 7.309s7.309-3.271 7.309-7.309v-19.49H63.34c4.037 0 7.308-3.271 7.308-7.308s-3.271-7.309-7.308-7.309H41.414V12.53c0-4.037-3.272-7.308-7.309-7.308-4.037 0-7.308 3.271-7.308 7.308v24.361H7.308C3.272 36.892 0 40.164 0 44.2zM131.428 17.261c-2.854-2.855-7.481-2.855-10.336 0L14.763 123.594c-2.853 2.854-2.853 7.481 0 10.334 1.425 1.429 3.298 2.143 5.167 2.143 1.868 0 3.742-.714 5.169-2.143L131.428 27.599c2.855-2.853 2.855-7.485 0-10.338z"
/>
</svg>
</button>
<button name="percent" aria-label="percent" class="keypad__button">
<svg
aria-hidden="true"
class="keypad__button-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<defs />
<path
d="M504.936 7.136c-9.38-9.392-24.6-9.392-33.98 0L7.204 470.888c-9.388 9.384-9.388 24.592 0 33.976 4.692 4.696 10.844 7.044 16.992 7.044s12.3-2.348 16.988-7.044L504.936 41.112c9.388-9.384 9.388-24.592 0-33.976zM114.144.256C51.208.256 0 51.468 0 114.404s51.208 114.144 114.144 114.144c62.94 0 114.144-51.212 114.144-114.148S177.08.256 114.144.256zm0 180.228c-36.44 0-66.084-29.648-66.084-66.084 0-36.436 29.648-66.084 66.084-66.084 36.44 0 66.084 29.648 66.084 66.084 0 36.436-29.644 66.084-66.084 66.084zM397.856 283.596c-62.936 0-114.144 51.208-114.144 114.144s51.208 114.144 114.144 114.144S512 460.68 512 397.74s-51.208-114.144-114.144-114.144zm0 180.224c-36.44 0-66.084-29.648-66.084-66.084 0-36.436 29.648-66.084 66.084-66.084 36.436 0 66.084 29.648 66.084 66.084s-29.644 66.084-66.084 66.084z"
/>
</svg>
</button>
<button name="divide" aria-label="divide" class="keypad__button">
<svg
aria-hidden="true"
class="keypad__button-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42 42"
>
<defs />
<path
d="M0 19h42v4H0zM21 13c2.757 0 5-2.243 5-5s-2.243-5-5-5-5 2.243-5 5 2.243 5 5 5zM21 29c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
/>
</svg>
</button>
<button name="seven" class="keypad__button">7</button>
<button name="eight" class="keypad__button">8</button>
<button name="nine" class="keypad__button">9</button>
<button name="multiply" aria-label="multiply" class="keypad__button">
<svg
aria-hidden="true"
class="keypad__button-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="105.93 105.93 271.53 271.53"
>
<defs></defs>
<path
d="M241.7 211.577L136.058 105.935l-30.123 30.123L211.577 241.7 105.935 347.342l30.123 30.123L241.7 271.823l105.642 105.642 30.122-30.123L271.823 241.7l105.641-105.642-30.122-30.123L241.7 211.577z"
></path>
</svg>
</button>
<button name="four" class="keypad__button">4</button>
<button name="five" class="keypad__button">5</button>
<button name="six" class="keypad__button">6</button>
<button name="subtract" aria-label="subtract" class="keypad__button">
<svg
aria-hidden="true"
class="keypad__button-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 298.667 298.667"
>
<defs />
<path d="M0 128h298.667v42.667H0z" />
</svg>
</button>
<button name="one" class="keypad__button">1</button>
<button name="two" class="keypad__button">2</button>
<button name="three" class="keypad__button">3</button>
<button name="sum" aria-label="sum" class="keypad__button">
<svg
aria-hidden="true"
class="keypad__button-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 341.4 341.4"
>
<defs />
<path
d="M192 149.4V0h-42.6v149.4H0V192h149.4v149.4H192V192h149.4v-42.6z"
/>
</svg>
</button>
<button name="zero" class="keypad__button keypad__zero-button">
0
</button>
<button aria-label="dot" name="point" class="keypad__button">·</button>
<button name="equals" aria-label="equal" class="keypad__button">
<svg
aria-hidden="true"
class="keypad__button-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 341.333 341.333"
>
<defs />
<path d="M0 192h341.333v42.667H0zM0 106.667h341.333v42.667H0z" />
</svg>
</button>
</div>
</main>
<script src="index.js"></script>
</body>
</html>