Add visuals for keyboard

Author: Suqbs

script.js

@@ -179,8 +179,12 @@ window.addEventListener("keydown", (e) => {
 
   keys.forEach((key) => {
     if (keyboardKey === key.value) {
-      key.focus();
+      key.classList.add("active");
       key.click();
     }
   });
 });
+
+window.addEventListener("keyup", (e) => {
+  keys.forEach(key => key.classList.remove("active"));
+});

style.css

@@ -48,6 +48,10 @@ input[type="button"]:active {
   background-color: rgb(var(--rgb), 0.5);
 }
 
+input[type="button"].active {
+  background-color: rgb(var(--rgb), 0.5);
+}
+ 
 input[type="text"] {
   background-color: #ded4e8;
   height: 90px;