From befca5d0a827c8f2d8dabdf8b4b6176c4dffec22 Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Mon, 1 Jul 2019 21:23:28 +0200
Subject: [PATCH] Implement basic functionality

---
 index.html | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5604d04
--- /dev/null
+++ b/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="author" content="Felix W. Dekker" />
+    <meta name="application-name" content="Converter" />
+    <meta name="description" content="Converts numbers to and from various bases." />
+    <meta name="theme-color" content="#0033cc" />
+
+    <title>Converter | FWDekker</title>
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
+          crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+          integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
+          integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-common.css" crossorigin="anonymous" />
+</head>
+<body>
+    <main class="wrapper">
+        <!-- Header -->
+        <header class="header">
+            <section class="container">
+                <h1>Converter</h1>
+                <blockquote>
+                    <p><em>Convert numbers to and from various bases.</em></p>
+                </blockquote>
+            </section>
+        </header>
+
+
+        <!-- Input -->
+        <section class="container">
+            <div class="row">
+                <div class="column">
+                    <form>
+                        <fieldset id="inputs">
+                        </fieldset>
+                    </form>
+                </div>
+            </div>
+        </section>
+
+
+        <!-- Footer -->
+        <footer class="footer">
+            <section class="container">
+                Made by <a href="https://fwdekker.com/">Felix W. Dekker</a>.
+                Licensed under the
+                <a href="https://git.fwdekker.com/FWDekker/converter/src/branch/master/LICENSE">MIT License</a>.
+                Source code available on <a href="https://git.fwdekker.com/FWDekker/converter/">git</a>.
+            </section>
+        </footer>
+    </main>
+
+
+    <!-- Scripts -->
+    <script src="https://static.fwdekker.com/js/common.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.44/BigInteger.min.js"
+            integrity="sha256-es+ex6Oj344uak+VnCPyaHY2nzQkqhr7ByWVQgdjATA=" crossorigin="anonymous"></script>
+    <script>
+        const updateAllInputs = newValue => {
+            for (const numberInput of $a(".numberInput"))
+                numberInput.value = newValue.toString(numberInput.getAttribute("data-base"));
+        };
+
+        const createTextarea = (base, name) => {
+            const label = document.createElement("label");
+            label.setAttribute("for", `${name}Input`);
+            label.innerHTML = name;
+
+            const textarea = document.createElement("textarea");
+            textarea.id = `${name}Input`;
+            textarea.className = "numberInput";
+            textarea.setAttribute("data-base", base);
+            textarea.oninput = () => {
+                if (textarea.value)
+                    updateAllInputs(bigInt(textarea.value, base));
+            };
+
+            return [label, textarea];
+        };
+
+        const addTextarea = (label, textarea) => {
+            const inputs = $("#inputs");
+            inputs.appendChild(label);
+            inputs.appendChild(textarea);
+        };
+
+        const generateTextareas = () => {
+            const textareas = [["2", "Binary"], ["8", "Octal"], ["10", "Decimal"], ["16", "Hexadecimal"]];
+
+            for (const textarea of textareas) {
+                const elements = createTextarea(textarea[0], textarea[1]);
+                addTextarea(elements[0], elements[1]);
+            }
+        };
+
+        doAfterLoad(() => generateTextareas());
+    </script>
+</body>
+</html>
