Add key inputs for most buttons

index.html

@@ -18,27 +18,27 @@
             <button class="clear all">C</button>
             <button class="clear error">CE</button>
             <button class="plus-minus">+/-</button>
-            <button class="operator">*</button>
+            <button id="multiply" class="operator">*</button>
 
 
-            <button class="num">7</button>
-            <button class="num">8</button>
-            <button class="num">9</button>
-            <button class="operator">/</button>
+            <button id="num7" class="num">7</button>
+            <button id="num8" class="num">8</button>
+            <button id="num9" class="num">9</button>
+            <button id="divide" class="operator">/</button>
 
-            <button class="num">4</button>
-            <button class="num">5</button>
-            <button class="num">6</button>
-            <button class="operator">-</button>
+            <button id="num4" class="num">4</button>
+            <button id="num5" class="num">5</button>
+            <button id="num6" class="num">6</button>
+            <button id="minus" class="operator">-</button>
 
-            <button class="num">1</button>
-            <button class="num">2</button>
-            <button class="num">3</button>
-            <button class="operator">+</button>
+            <button id="num1" class="num">1</button>
+            <button id="num2" class="num">2</button>
+            <button id="num3" class="num">3</button>
+            <button id="plus" class="operator">+</button>
 
 
-            <button class="num">0</button>
-            <button class="num">.</button>
+            <button id="num0" class="num">0</button>
+            <button id="dec" class="num">.</button>
             <button class="equal">=</button>
         </div>
     </main>

script.js

@@ -5,7 +5,6 @@ const equalButton = document.querySelector(".equal");
 const opButtons = document.querySelectorAll(".operator");
 const clearButtons = document.querySelectorAll(".clear");
 const plusMinus = document.querySelector(".plus-minus");
-const operators = ["+", "-", "*", "/"];
 let inOps = false;
 let isEval = false;
 
@@ -13,18 +12,15 @@ let isEval = false;
 numButtons.forEach((button) => {
     button.addEventListener("click", displayNum);
 });
-
 opButtons.forEach((button) => {
     button.addEventListener("click", displayOperator);
 });
-
 clearButtons.forEach((button) => {
     button.addEventListener("click", clear);
 });
-
 equalButton.addEventListener("click", displayEval);
-
 plusMinus.addEventListener("click", changeSign);
+window.addEventListener("keydown", handleKeys);
 
 
 function displayEval() {
@@ -181,4 +177,31 @@ function Calculator(str) {
         }
         return this.methods[op](a, b);
     };
-}
+}
+
+
+function handleKeys(e) {
+    const operators = {
+        "+": "plus", 
+        "-": "minus", 
+        "*": "multiply", 
+        "/": "divide"
+    };
+
+
+    if (e.key >= 0 && e.key <= 9) {
+        document.querySelector(`#num${e.key}`).click();
+    } else if (e.key === ".") {
+        document.querySelector("#dec").click();
+    } else if (e.key === "Backspace" || e.key === "Delete") {
+        document.querySelector(".error").click();
+    } else if (e.key === "c" || e.key === "Escape") {
+        document.querySelector(".all").click();
+    } else if (operators.hasOwnProperty(e.key)) {
+        e.preventDefault();
+        document.querySelector(`#${operators[e.key]}`).click();
+    } else if (e.key === "=" || e.key === "Enter") {
+        e.preventDefault();
+        document.querySelector(".equal").click();
+    }
+}