From 49ea951c6397a6eb1e68a0e7f1bc585b43e94d53 Mon Sep 17 00:00:00 2001
From: Dkinguag <dkinguag@gmail.com>
Date: Tue, 23 Jul 2019 22:49:39 -0400
Subject: [PATCH 1/2] First Attempt! Got stuck at getting the keys to make
 sounds

---
 01 - JavaScript Drum Kit/index-START.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..01b11390f8 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,11 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+         window.addEventListener('keydown', function(e) {
+           const audio = document.querySelector(`audio[data-key = " ${e.keyCode}'' ]`);
+           if(!audio) return; //Stops the function from running completely
+           audio.play();
+         });
 </script>
 
 

From 7c82ff59f245d3ea50248f382a8651602580228c Mon Sep 17 00:00:00 2001
From: Dkinguag <dkinguag@gmail.com>
Date: Wed, 31 Jul 2019 23:56:59 -0400
Subject: [PATCH 2/2] Basically Finished. I have to tweak a few things.

---
 01 - JavaScript Drum Kit/index-START.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 01b11390f8..652b9214e4 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,11 +58,23 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-         window.addEventListener('keydown', function(e) {
-           const audio = document.querySelector(`audio[data-key = " ${e.keyCode}'' ]`);
-           if(!audio) return; //Stops the function from running completely
-           audio.play();
+         window.addEventListener('keydown', function (e) {
+          const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+          const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+          if (!audio) return; //stops the function all together
+          audio.currentTime = 0; //rewind to the start
+          audio.play();
+          key.classList.add('playing');
          });
+
+        function removeTransition(e) {
+          if ( e.propertyName !==  'transform' )  return;  //skip if its not a transform
+          this.classList.remove('playing');
+        }
+
+         const keys = document.querySelectorAll('.key');
+         keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
 </script>