Initial commit

telecter · telecter · commit b547c241ea9d · 2024-12-21T18:01:50.000-05:00
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# binvis
+A simple tool to visualize the binary system.
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!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>
+        </main>
+    </body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,17 @@
+:root {
+    --pico-font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono',
+        'Ubuntu Mono', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Consolas', 'Courier New',
+        monospace;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-secondary {
+    color: gray;
+}
+
+span {
+    cursor: pointer;
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,32 @@
+const counter = document.getElementById("binaryCounter");
+const base10Counter = document.getElementById("base10Counter");
+const bits = {
+    1: false,
+    2: false,
+    4: false,
+    8: false,
+    16: false,
+    32: false,
+    64: false,
+    128: false
+}
+
+function flipBit(bit) {
+    const bitElement = document.getElementById(`${bit}bit`);
+    bits[bit] = !bits[bit];
+
+    if (bitElement.style.color == "green") {
+        bitElement.style.color = "red";
+    }
+    else if (bitElement.style.color == "red") {
+        bitElement.style.color = "green";
+    }
+
+    let num = 0;
+    for (const [k, v] of Object.entries(bits)) {
+        if (v) num += Number.parseInt(k);
+    }
+    counter.innerText = num.toString(2).padStart(8, '0');
+    base10Counter.innerText = num.toString()
+
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# binvis`
	`2`	`+A simple tool to visualize the binary system.`