From 6fd432f906d7dafb075827de85ef20fc7c237502 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Thu, 28 Dec 2023 09:44:07 -0700
Subject: [PATCH] Add visual feedback for keyboard input

---
 script.js | 25 ++++++++++++++++++-------
 style.css |  6 ++++++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/script.js b/script.js
index 1cf6a6c..27a177c 100644
--- a/script.js
+++ b/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();
     }
 } 
\ No newline at end of file
diff --git a/style.css b/style.css
index f172f4d..c849277 100644
--- a/style.css
+++ b/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;
 }