Add visual feedback for keyboard input

script.js

@@ -202,22 +202,33 @@ function handleKeys(e) {
         "/": "divide"
     };
 
+    let button;
 
     if (e.key >= 0 && e.key <= 9) {
-        document.querySelector(`#num${e.key}`).click();
+        button = document.querySelector(`#num${e.key}`);
     } else if (e.key === ".") {
-        document.querySelector("#dec").click();
+        button = document.querySelector("#dec");
     } else if (e.key === "Backspace" || e.key === "Delete") {
-        document.querySelector(".error").click();
+        button = document.querySelector(".error");
     } else if (e.key === "c" || e.key === "Escape") {
-        document.querySelector(".all").click();
+        button = document.querySelector(".all");
     } else if (operators.hasOwnProperty(e.key)) {
         e.preventDefault();
-        document.querySelector(`#${operators[e.key]}`).click();
+        button = document.querySelector(`#${operators[e.key]}`);
     } else if (e.key === "=" || e.key === "Enter") {
         e.preventDefault();
-        document.querySelector(".equal").click();
+        button = document.querySelector(".equal");
     } else if (e.key === "_") {
-        document.querySelector(".plus-minus").click();
+        button = document.querySelector(".plus-minus");
+    }
+
+    if (button) {
+        button.classList.add("active");
+
+        window.addEventListener("keyup", () => {
+            button.classList.remove("active")
+        });
+
+        button.click();
     }
 } 

style.css

@@ -63,6 +63,12 @@ button:hover {
     filter: brightness(.9);
 }
 
+button:active, .active {
+    filter: brightness(.9);
+    border: 1px solid #888; 
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); 
+}
+
 .num, .plus-minus {
     background: #d9e1f2;
 }