From 9f2ce945270f4408292c4de2861296c985dad99d Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Mon, 1 Jul 2019 23:58:30 +0200
Subject: [PATCH] Dynamically create more inputs

---
 index.html | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 5604d04..155416f 100644
--- a/index.html
+++ b/index.html
@@ -61,12 +61,14 @@
     <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 alphabet = "0123456789abcdef";
+
         const updateAllInputs = newValue => {
             for (const numberInput of $a(".numberInput"))
-                numberInput.value = newValue.toString(numberInput.getAttribute("data-base"));
+                numberInput.value = newValue.toString(numberInput.getAttribute("data-base"), alphabet);
         };
 
-        const createTextarea = (base, name) => {
+        const createInput = (base, name) => {
             const label = document.createElement("label");
             label.setAttribute("for", `${name}Input`);
             label.innerHTML = name;
@@ -76,29 +78,35 @@
             textarea.className = "numberInput";
             textarea.setAttribute("data-base", base);
             textarea.oninput = () => {
-                if (textarea.value)
-                    updateAllInputs(bigInt(textarea.value, base));
+                if (textarea.value === undefined || textarea.value === null)
+                    return;
+
+                const inputAlphabet = alphabet.substring(0, base);
+                textarea.value = textarea.value.toLowerCase().replace(new RegExp("[^" + inputAlphabet + "]"), "");
+                updateAllInputs(bigInt(textarea.value, base));
             };
 
             return [label, textarea];
         };
 
-        const addTextarea = (label, textarea) => {
+        const addInput = (label, textarea) => {
             const inputs = $("#inputs");
             inputs.appendChild(label);
             inputs.appendChild(textarea);
         };
 
-        const generateTextareas = () => {
+        const generateInputs = () => {
             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]);
+                const elements = createInput(textarea[0], textarea[1]);
+                addInput(elements[0], elements[1]);
             }
+
+            $("#" + textareas[0][1] + "Input").focus();
         };
 
-        doAfterLoad(() => generateTextareas());
+        doAfterLoad(() => generateInputs());
     </script>
 </body>
 </html>