Update index.js

added button animation
rohityadav-sas · Nov 6, 2023 · 30bfc5e · 30bfc5e
1 parent 3ae0655
commit 30bfc5e
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/index.js b/index.js
@@ -5,11 +5,14 @@ for(var i = 0; i < document.querySelectorAll(".drum").length; i++){
         var buttonHTML = this.innerHTML;
         makeSound(buttonHTML);
 
+        buttonAnimation(buttonHTML);
     });
 }
 
     document.addEventListener("keypress",function(event){
         makeSound(event.key);
+
+        buttonAnimation(event.key);
     });
 
 
@@ -50,3 +53,13 @@ for(var i = 0; i < document.querySelectorAll(".drum").length; i++){
 
     }
 
+function buttonAnimation(clickedKey){
+        var activeKey = document.querySelector("." + clickedKey);
+
+        activeKey.classList.add("pressed");
+
+        setTimeout(function(){
+            activeKey.classList.remove("pressed");
+        }, 100);
+    }
+