From 902f2aac23b6b8914914ae4c132a1bfbb67160d7 Mon Sep 17 00:00:00 2001
From: siddhanth339 <sidrk339@gmail.com>
Date: Mon, 29 Mar 2021 22:58:21 +0530
Subject: [PATCH] Fixed Drum kit bug

---
 01 - JavaScript Drum Kit/index-FINISHED.html | 12 +++------
 01 - JavaScript Drum Kit/style.css           | 27 +++++++++++++++-----
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
index 1a16d0997c..f517a9fe01 100644
--- a/01 - JavaScript Drum Kit/index-FINISHED.html	
+++ b/01 - JavaScript Drum Kit/index-FINISHED.html	
@@ -58,23 +58,19 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  function removeTransition(e) {
-    if (e.propertyName !== 'transform') return;
-    e.target.classList.remove('playing');
-  }
-
   function playSound(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
     if (!audio) return;
 
-    key.classList.add('playing');
+    key.style.animationPlayState = 'running';
+    var elm = key;
+    var newone = elm.cloneNode(true);
+    elm.parentNode.replaceChild(newone, elm);
     audio.currentTime = 0;
     audio.play();
   }
 
-  const keys = Array.from(document.querySelectorAll('.key'));
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
   window.addEventListener('keydown', playSound);
 </script>
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index bfdba84312..dc68e0567c 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -18,13 +18,32 @@ body,html {
   justify-content: center;
 }
 
+@keyframes highlight {
+  0% {
+      border: .4rem solid black;
+      width: 10rem;
+  }
+  50% {
+      border: .6rem solid #ffc600;
+      box-shadow: 0 0 1rem #ffc600;
+      transform: scale(1.1);
+  }
+  100% {
+      border: .4rem solid black;
+      width: 10rem;
+  }
+}
+
 .key {
   border: .4rem solid black;
   border-radius: .5rem;
   margin: 1rem;
   font-size: 1.5rem;
   padding: 1rem .5rem;
-  transition: all .07s ease;
+  animation-name: highlight;
+  animation-duration: 0.07s;
+  animation-fill-mode: forwards;
+  animation-play-state: paused;
   width: 10rem;
   text-align: center;
   color: white;
@@ -32,12 +51,6 @@ body,html {
   text-shadow: 0 0 .5rem black;
 }
 
-.playing {
-  transform: scale(1.1);
-  border-color: #ffc600;
-  box-shadow: 0 0 1rem #ffc600;
-}
-
 kbd {
   display: block;
   font-size: 4rem;