-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
59 lines (59 loc) · 3.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
<link rel="stylesheet" href="./main.css" />
<script src="./main.js" defer></script>
<title>binvis</title>
</head>
<body>
<header class="container">
<hgroup>
<h1>binvis</h1>
<h2>Visualize the binary number system.</h2>
</hgroup>
</header>
<hr>
<main class="container">
<article class="text-center">
<p style="font-size: 70px;" id="binaryCounter">00000000</p>
<p style="font-size: 40px;" class="text-secondary" id="base10Counter">0</p>
<p class="text-secondary" style="margin-top: 0; font-size: 30px;">
<span style="color: red" onclick="flipBit(128)" id="128bit">128</span>
+
<span style="color: red" onclick="flipBit(64)" id="64bit">64</span>
+
<span style="color: red" onclick="flipBit(32)" id="32bit">32</span>
+
<span style="color: red" onclick="flipBit(16)" id="16bit">16</span>
+
<span style="color: red" onclick="flipBit(8)" id="8bit">8</span>
+
<span style="color: red" onclick="flipBit(4)" id="4bit">4</span>
+
<span style="color: red" onclick="flipBit(2)" id="2bit">2</span>
+
<span style="color: red" onclick="flipBit(1)" id="1bit">1</span>
</p>
<small class="text-secondary"><i>Click each red or green number to flip its bit!</i></small>
</article>
<article>
<p>In Base 10, you would count in the powers of 10. For example,</p>
<p class="text-secondary" style="font-size: 25px">162</p>
<p class="text-secondary">ones, or 10^0: 2,<br>tens or 10^1: 6,<br>hundreds or 10^2: 1</p>
<p>So then, to find your number, multiply the values by the correct powers of 10:</p>
<p class="text-secondary">10^2(1) + 10^1(6) + 10^0(2) = 162</p>
<hr />
<p>It works the same in binary,</p>
<p class="text-secondary" style="font-size: 25px">10100010</p>
<p>Counting in the powers of two, each bit to the left has more value.</p>
<p class="text-secondary">2^0 place is 0,<br>2^1 place is 1 <br>2^2 place is 0...and so on</p>
<p>By adding them up just like in base 10, you can convert the binary number to decimal.</p>
<p class="text-secondary">2^0(0) + 2^1(1) + 2^2(0) + 2^3(0) + 2^4(0) + 2^5(1) + 2^6(0) + 2^7(1) = 162</p>
<p>This gives us 162, which is 10100010 represented in decimal.</p>
</article>
</main>
</body>
</html>