updates

index.js

@@ -9,7 +9,9 @@ const buttonMap = [
     ["C"]
 ]
 const keyMap = {
-
+    ["Backspace"]: () => {
+        input.value = input.value.substring(0, input.value.length-1)
+    }
 }
 
 function createRow(parent) {
@@ -26,16 +28,13 @@ function createRow(parent) {
 function createButton(parent, text) {
     buttons[text] = document.createElement("button")
     buttons[text].className = "opButton" //some code after this will change class to numButton for nums
-    buttons[text].style.width = "20%" //this solution for "C" button being square is bad, change it later
-    buttons[text].style.fontSize = "60px"
-    buttons[text].style.margin = "12px"
-    buttons[text].style.borderRadius = "25%"
     buttons[text].textContent = text
-    
+
     if (parent) {parent.appendChild(buttons[text])}
     return buttons[text]
 }
 
+//create the input row
 const input = document.createElement("input")
 input.readOnly = "true"
 input.style.backgroundColor = "rgb(50,50,50)"
@@ -46,12 +45,11 @@ input.style.width = "100%"
 input.style.height = "100%"
 input.style.borderRadius = "24px"
 
-
 const row = []
 row["text"] = createRow(calc)
 row["text"].appendChild(input)
 
-//create the buttons
+//create all the buttons
 for (let i=1; i<=buttonMap.length; i++) {
     row[i] = createRow(calc)
 
@@ -60,16 +58,15 @@ for (let i=1; i<=buttonMap.length; i++) {
     }
 }
 
-console.log(buttons)
-
-//create the buttons
+//style and add functions to numerical buttons
 for (let i=0; i<=9; i++) {
     keyMap[i] = ()=>{input.value += i}
 
     buttons[i].className = "numButton"
     buttons[i].addEventListener("click", ()=>{input.value += i})
 }
 
+//add keybinds for keymap
 document.addEventListener("keydown", (key) => {
     if (keyMap[key.key]) {
         keyMap[key.key]();

style.css

@@ -5,11 +5,9 @@
     --op-color: rgb(150,200,200);
 }
 
-/*
 * {
     outline: 2px solid red;
 }
-*/
 
 body {
     background-color: var(--bg);
@@ -22,21 +20,27 @@ body {
 
 #calc {
     width: 50vw;
-    height: 60vh;
+    height: 60vw;
     max-width: 90vw;
     max-height: 90vh;
     display: flex;
     flex-direction: column;
 }
 
-.numButton {
+.numButton, .opButton {
     background-color: var(--button-bg);
+    width: 20%; /*this solution for "C" button being square is bad, change it later*/
+    font-size: 100%;
+    margin: 12px;
+    border-radius: 25%;
+}
+
+.numButton {
     border-color: var(--num-color);
     color: var(--num-color)
 }
 
 .opButton {
-    background-color: var(--button-bg);
     border-color: var(--op-color);
     color: var(--op-color)
-}
+}