1let root = document.documentElement;
 2
 3inputString = "";
 4resultString = "";
 5
 6function updateInputField(){
 7    console.log(inputString);
 8    inputContainer = document.getElementById("input-container")
 9    if(inputString.length < inputContainer.children.length){
10        inputContainer.lastElementChild.className+=" bitLoadOut"
11        setTimeout(function(){
12        inputContainer.removeChild(inputContainer.lastElementChild);
13        },190);
14    } else {
15        bitDiv = document.createElement("div");
16        bitDiv.className+="bit-div"
17        bitDiv.innerHTML = inputString[inputString.length-1]
18        inputContainer.appendChild(bitDiv);
19    }
20}
21
22function convertStart(){
23    inputContainer = document.getElementById("input-container")
24    outputContainer = document.getElementById("result-container")
25    outputContainer.innerHTML=""
26    for (bitDivIndex in document.getElementsByClassName("bit-div")){
27        bitDiv = document.getElementsByClassName("bit-div")[bitDivIndex]
28        bitDiv.innerHTML = inputString[bitDivIndex]
29        bitValueDiv = document.createElement("div");
30        bitValueDiv.className+="bit-value-div"
31        bitValueDiv.innerHTML = 2**(inputString.length-bitDivIndex-1)
32        if (inputString[bitDivIndex]=="0"){
33            bitValueDiv.className+=" bit-value-div-disabled"
34        }
35        try{
36        bitDiv.appendChild(bitValueDiv);
37        }catch{
38            //ignore
39        }
40    }
41    root.style.setProperty('--bit-length', inputString.length);
42    setTimeout(function(){for (bitDivIndex in document.getElementsByClassName("bit-value-div")){document.getElementsByClassName("bit-value-div")[bitDivIndex].className+=" bit-value-calculating"}},1000);
43    setTimeout(function(){
44        resultInt = 0
45        for (bitIndex in inputString){
46            bit = inputString[bitIndex];
47            bitValue = 2**(inputString.length-bitIndex-1)
48            resultInt+=parseInt(bit)*bitValue;
49        }
50        resultString = String(resultInt)
51        for (resultStringIndex in resultString){
52        bitDiv = document.createElement("div");
53        bitDiv.className+="result-bit-div"
54        bitDiv.innerHTML = resultString[resultStringIndex]
55        outputContainer.appendChild(bitDiv);
56        }
57    },2000);
58
59}
60
61document.addEventListener('keydown', function(event) {
62    switch(event.key){
63        case "0":
64            inputString+="0";
65            updateInputField();
66        break;
67        case "1":
68            inputString+="1";
69            updateInputField();
70        break;
71        case "Backspace":
72            if (inputString.length > 0){
73            inputString=inputString.slice(0, -1);
74            updateInputField();
75            }
76        break;
77    }
78});