From 96d014537893c752a496ed60f205a145e7d69a64 Mon Sep 17 00:00:00 2001
From: Jesuschristislord1 <bshimels88@gmail.com>
Date: Fri, 5 Jul 2024 13:50:03 -0700
Subject: [PATCH] =?UTF-8?q?Master=20<!--=20=F0=9F=91=8B=F0=9F=91=8B?=
 =?UTF-8?q?=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B?=
 =?UTF-8?q?=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B?=
 =?UTF-8?q?=F0=9F=91=8B=F0=9F=91=8B=20=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B?=
 =?UTF-8?q?Hello=20Friend!=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B?=
 =?UTF-8?q?=20=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B?=
 =?UTF-8?q?=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B?=
 =?UTF-8?q?=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B=F0=9F=91=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thanks for Submitting a pull request. Before you hit that button please make sure:

These files are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things or fixed a small bug, that is great great, but I will be keeping them the same as the videos to avoid confusing.

Spelling mistakes / CSS updates / other clarifications are welcome as long as they don't change what is shown in the videos.

I encourage you to blog about your implementation and add the link to this repo - that way everyone can benefit from it.

-->
---
 01 - JavaScript Drum Kit/index-START.html | 24 +++++++++++++++++++++++
 01 - JavaScript Drum Kit/style.css        |  2 +-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 8a2f8e8417..97d5590c43 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,7 +59,31 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+window.addEventListener("keydown",function(e){
+  // console.log(e.keyCode);
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
 
+  // console.log(audio);
+  if(!audio) return;
+  audio.currentTime = 0;
+  audio.play();
+  // console.log(key);
+  key.classList.add('playing');
+})
+
+function removeTransitionEnd(e){
+  // console.log(e);
+  if(e.propertyName !== 'transform') return;
+  // console.log(e.propertyName);
+  // console.log(this);
+  this.classList.remove('playing');
+}
+
+
+
+const keys = document.querySelectorAll('.key');
+keys.forEach(key =>key.addEventListener('transitionend',removeTransitionEnd));
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index bfdba84312..c9c0ca0d3a 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -24,7 +24,7 @@ body,html {
   margin: 1rem;
   font-size: 1.5rem;
   padding: 1rem .5rem;
-  transition: all .07s ease;
+  transition: all 3.07s ease;
   width: 10rem;
   text-align: center;
   color: white;