-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
334 lines (309 loc) · 12.5 KB
/
index.html
File metadata and controls
334 lines (309 loc) · 12.5 KB
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
<!doctype html>
<html lang="en-US">
<head>
<title>Base Converter</title>
<link rel="shortcut icon" type="image/png" href="img/logo.png"/>
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#339">
<meta name="msapplication-navbutton-color" content="#339">
<meta name="apple-mobile-web-app-status-bar-style" content="#339">
<meta charset="utf-8">
<meta name="title=" content="Base Converter">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Contvert numbers between binary, octal, decimal, and hexadecimal">
<meta name="keywords" content="number, convert, converter, base, binary, octal, decimal, hexadecimal, hex">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> -->
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="scripts.js" "></script>
<script>
//https://codelabs.developers.google.com/codelabs/add-to-home-screen/#5
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Service worker successfully registered");
}).catch(function(err) {
console.log("Service worker registration failed: ", err);
});
}
</script>
</head>
<body>
<div class="text-center container">
<h3 class="lead"><img id="logo" src="img/logo.svg" width="48px" alt="">Base Converter <small>v.1.1.0</small></h3>
<div class="row">
<div class="col-sm-6 col-lg-3">
<input id="binary" class="form-control input-lg text-center" autofocus type="text" value="0"><sub>2 </sub><label for="binary"> Binary</label>
</div>
<div class="col-sm-6 col-lg-3">
<input id="octal" class="form-control input-lg text-center" type="text" value="0"><sub>8 </sub><label for="octal">Octal</label>
</div>
<div class="col-sm-6 col-lg-3">
<input id="decimal" class="form-control input-lg text-center" type="text" value="0"><sub>10 </sub><label for="decimal"> Decimal</label>
</div>
<div class="col-sm-6 col-lg-3">
<input id="hex" class="form-control input-lg text-center" type="text" value="0" spellcheck="false"><sub>16 </sub><label for="hex"> Hex</label>
</div>
</div>
<br>
<div class="alert alert-info alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close" tabindex="-1">×</a>
<p class="text-center">
Use <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> to navigate inputs
<br><br>Hit <kbd>Enter</kbd> (or <kbd>Tab</kbd>) to calculate other values
<br><br>Use the <kbd>↑</i></kbd> <kbd>↓</i></kbd> arrow keys to increment or decrement your input
</p>
</div>
<p id="simpleError" class="errorP"></p>
<hr>
<label>Quick Reference Table</label>
<table class="table table-hover table-bordered table-condensed">
<tr>
<th class="text-center">Decimal (base 10)</th>
<th class="text-center">Binary (base 2)</th>
<th class="text-center">Octal (base 8)</th>
<th class="text-center">Hexadecimal (base 16)</th>
</tr>
<tr>
<td>00</td>
<td>0000</td>
<td>00</td>
<td>0</td>
</tr>
<tr>
<td>01</td>
<td>0001</td>
<td>01</td>
<td>1</td>
</tr>
<tr>
<td>02</td>
<td>0010</td>
<td>02</td>
<td>2</td>
</tr>
<tr>
<td>03</td>
<td>0011</td>
<td>03</td>
<td>3</td>
</tr>
<tr>
<td>04</td>
<td>0100</td>
<td>04</td>
<td>4</td>
</tr>
<tr>
<td>05</td>
<td>0101</td>
<td>05</td>
<td>5</td>
</tr>
<tr>
<td>06</td>
<td>0110</td>
<td>06</td>
<td>6</td>
</tr>
<tr>
<td>07</td>
<td>0111</td>
<td>07</td>
<td>7</td>
</tr>
<tr>
<td>08</td>
<td>1000</td>
<td>10</td>
<td>8</td>
</tr>
<tr>
<td>09</td>
<td>1001</td>
<td>11</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>1010</td>
<td>12</td>
<td>A</td>
</tr>
<tr>
<td>11</td>
<td>1011</td>
<td>13</td>
<td>B</td>
</tr>
<tr>
<td>12</td>
<td>1100</td>
<td>14</td>
<td>C</td>
</tr>
<tr>
<td>13</td>
<td>1101</td>
<td>15</td>
<td>D</td>
</tr>
<tr>
<td>14</td>
<td>1110</td>
<td>16</td>
<td>E</td>
</tr>
<tr>
<td>15</td>
<td>1111</td>
<td>17</td>
<td>F</td>
</tr>
</table>
<button id="downloadChartButton" class="btn btn-sm btn-default" title="download chart as image"><i class="fas fa-download"></i> Download chart</button>
<button id="printButton" class="btn btn-sm btn-default" title="open tab to print chart"><i class="fas fa-print"></i> Print chart</button>
<hr>
<div class="form-group text-center">
<label for="valConsole">
<button class="btn btn-sm btn-default" title="reset history"><i id="reset" class="fas fa-history"></i> Reset</button>
History
<button id="downloadHistoryButton" class="btn btn-sm btn-default" title="download history as text file"><i class="fas fa-download"></i> Download</button>
</label>
<textarea id="valConsole" class="form-control text-center" rows="5"></textarea>
</div>
<hr>
<button title="Arithmetic and custom bases" type="button" class="btn btn-default" data-toggle="modal" data-target="#moreModal"><i class="fas fa-calculator"></i> Arithmetic</button>
<button title="Learn about bases" type="button" class="btn btn-default" data-toggle="modal" data-target="#learnModal"><i class="fas fa-lightbulb"></i> Learn</button>
<button title="toggle fullscreen" onclick="toggleFullscreen()" type="button" class="btn btn-default"><i class="fas fa-arrows-alt"></i> Toggle Fullscreen</button>
<br><br>
<p>Read about this project <a href="https://github.com/rgbstudios/base-convert/blob/master/README.md" target="_blank" rel="noopener">here</a></p>
<div id="moreModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fas fa-calculator"></i> Arithmetic</h4>
</div>
<div class="modal-body">
<div class="checkbox">
<label><input id="baseCheckbox" checked type="checkbox">Same Bases</label>
</div>
<label id="baseLabel">Base:<input id="baseInput" class="form-control baseInput" value="10" type="text"></label>
<div class="row" id="basesDiv">
<div class="col-sm-4">
<label>Input 1 Base:</label><input id="baseInput1" class="form-control baseInput" value="10" type="text">
</div>
<div class="col-sm-4">
<label>Input 2 Base:</label><input id="baseInput2" class="form-control baseInput" value="10" type="text">
</div>
<div class="col-sm-4">
<label>Output Base:</label><input id="baseInput3" class="form-control baseInput" value="10" type="text">
</div>
</div>
<hr>
<input id="val1Input" class="form-control" value="0" type="text">
<select class="form-control" id="operationInput">
<option>+</option>
<option>-</option>
<option>×</option>
<option>/</option>
</select>
<input id="val2Input" class="form-control" value="0" type="text">
<br>
<button id="calcButton" class="btn btn-default"><i class="fas fa-calculator"></i> Calculate</button>
<br><br>
<input disabled id="calcOutput" value="" type="text" class="form-control" style="cursor:text;">
<p id="complexError" class="errorP"></p>
</div>
</div>
</div>
</div>
<div id="learnModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fas fa-lightbulb"></i> Learn</h4>
</div>
<div class="modal-body">
<p class="text-center">
<b>What are number bases?</b><br>
A base is a counting system. Base 10, or "decimal"
uses the digits 0,1,2,3,4,5,6,7,8, and 9.<br>
Each number further left represents a power of 10.<br>
For example, 987 is 9 100s, 8 10s, and 7 1s<br>
or 9*10^2 + 8*10^1 + 7*10^0<br>
<br>
If we count in hexadecimal, which is base 16<br>
("hex" meaning 6 and "decimal" meaning 10),<br>
we have digits 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e, and f.<br>
Notice that 10 is a, 11 is b... and we go up to 15 (f), which is 16-1,<br>
just like in base 10 we go up to 9, which is 10-1.<br>
<br>
<b>Examples</b><br>
For example, for the number 3db in hex,<br>
instead of the 1s, 10s, and 100s places like decimal,<br>
we have the 1s, 16s, and 256s places, for powers of 16 instead of powers of 10.<br>
So 3db is 3*16^2 + d*16^1 + b*16^0 where d is 13 and b is 11.<br>
So we have 3*256 + 13*16 + 11*1 = 768 + 208 + 11 = 987.<br>
So 3db in hex is 987 in decimal.<br>
<br>
Similarly, we can convert decimal back to base 16:<br>
987/16 is 61 remainder 11.<br>
61/16 is 3 remainder 13.<br>
and 3 doesn't go into 16, so we finish with remainder 3.<br>
We take the remainders and go back upwards:
so we have 3, then 13, then 11, which is 3db<br>
<br>
<b>About Bases</b><br>
If we count in binary, which is base 2 ("bi" meaning 2) we have digits 0 and 1.<br>
The prefix "bi" is used in "bicycle", "bipetal", and "bilingual".<br>
In octal (base 8, "oct" meaning 8) we have digits 0,1,2,3,4,5,6, and 7.<br>
The prefix "oct" is used in "octopus" and "octagon".<br>
Base 2,8, and 16 are often used in programming because they're all powers of 2,<br>
data is stored in binary, and conversion between them is easy.<br>
We probably count in decimal because we have ten fingers.<br>
<hr>
<b>Using the Table as a Shortcut</b><br>
Converting between base 2, 8, and 16 is easy.<br>
You can just look at the quick reference table<br>
and substitute every 4 binary digits for a hex digit, or 3 for an oct digit.<br>
If the amount isn't divisable by 3 or 4 (whichever you need), pad the beginning with 0s.<br>
To convert from hex or oct, do the opposite.<br>
<br>
<b>For example:</b><br>
3db in hex: 3 is 0011, d is 1101 and b is 1011, so 3db is 001111011011<br>
getting rid of the leading 0s we have 1111011011<br>
converting 1111011011 back, we add 0s to make the number of digits divisable by 4<br>
this is because 2^4 is 16.<br>
001111011011 split into groups of 4 is 0011 1101 1011 which in the table is 3, d, and b<br>
<br>
<b>Misc. Facts:</b><br>
Sexigesimal (base 60) was used by ancient sumerians.<br>
That is why there are 60 seconds in a minute and 360 degrees in a circle.<br>
Sometimes bases above 10 use lowercase letters, but most of the time it's capital.<br>
Bases above 36 often use both capital and lowercase.<br>
Sometimes base 26 starts at A (where Z is 0).<br>
We often use hexadecimal to abbreviate RGB colors because each color is between 0-255, <br>
so each color is 2 hexadecimal digits.<br>
Sometimes people call hexadecimal "hex".<br>
Most of the time you can assume "hex" refers to base 16 not base 6.<br>
Binary is sometimes called "bin".<br>
RGB hexadecimal codes often start with a "#",<br>
and sometimes are only 3 digits meaing they store only the most significant digit of each color.<br>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>