From 72b561e50ba00dc5af12eb884ac61c799f6b4838 Mon Sep 17 00:00:00 2001
From: Krish Dev DB <krishdevdb@gmail.com>
Date: Thu, 18 Mar 2021 18:43:18 +0530
Subject: [PATCH] Fix The Border Transition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix The Issue That

> The Keys Don't Go Back To Their Original Form After The Gold Border
---
 01 - JavaScript Drum Kit/index-FINISHED.html | 26 +++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
index 1a16d0997c..5c90159b12 100644
--- a/01 - JavaScript Drum Kit/index-FINISHED.html	
+++ b/01 - JavaScript Drum Kit/index-FINISHED.html	
@@ -58,24 +58,20 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  function removeTransition(e) {
-    if (e.propertyName !== 'transform') return;
-    e.target.classList.remove('playing');
-  }
+window.addEventListener('keydown', (ev) => {
+  const audio = document.querySelector(`audio[data-key="${ev.keyCode}"]`);
+  const key = document.querySelector(`div[data-key="${ev.keyCode}"]`);
+  if (!audio) return;
 
-  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.classList.add('playing');
-    audio.currentTime = 0;
-    audio.play();
-  }
+  audio.currentTime = 0;
+  audio.play();
 
-  const keys = Array.from(document.querySelectorAll('.key'));
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
-  window.addEventListener('keydown', playSound);
+  setTimeout(() => {
+    key.classList.remove('playing');
+  }, (audio.duration * 100));
+});
 </script>