From c2107e363a363287aee8db1f5a0b933dd913e343 Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 13:19:56 -0800
Subject: [PATCH 1/5] Console.log keyCodes pressed

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..376a809b63 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,9 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+  window.addEventListener('keydown', function(e) {
+    console.log(e.keyCode)
+  });
 </script>
 
 

From 5fd7d94353b6ba2a87c3c48b8fac8dde0c6bf60f Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 13:29:32 -0800
Subject: [PATCH 2/5] Get audio to play for corresp keyCode

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 376a809b63..1a971f9811 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,7 +59,10 @@
 
 <script>
   window.addEventListener('keydown', function(e) {
-    console.log(e.keyCode)
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    console.log(audio)
+    if(!audio) return; //stop function all together
+    audio.play();
   });
 </script>
 

From 56771adee2202015f0da1234f64d6bcf3ca8d4f8 Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 13:35:31 -0800
Subject: [PATCH 3/5] Play keystroke audio in quick succession

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 1a971f9811..65fbf22957 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -62,7 +62,10 @@
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     console.log(audio)
     if(!audio) return; //stop function all together
+    // note if call .play on audio element already playing, it won't play again. so if press "F" in successsion it will only play every 5 sec
+    audio.currentTime = 0; //rewind to the start, so that it can be played many times quickly
     audio.play();
+
   });
 </script>
 

From cae28972f8659f86c7871878d61289aa663a77d2 Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 14:47:23 -0800
Subject: [PATCH 4/5] Add and remove playing class when key pressed with
 transition

---
 01 - JavaScript Drum Kit/index-START.html | 15 +++++++++++++--
 01 - JavaScript Drum Kit/style.css        |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 65fbf22957..fc69be9465 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -60,13 +60,24 @@
 <script>
   window.addEventListener('keydown', function(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-    console.log(audio)
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
     if(!audio) return; //stop function all together
     // note if call .play on audio element already playing, it won't play again. so if press "F" in successsion it will only play every 5 sec
     audio.currentTime = 0; //rewind to the start, so that it can be played many times quickly
     audio.play();
-
+    // CSS: transition:all .07s;
+    //.playing adds transform:scale(1.1);
+    key.classList.add('playing');
   });
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return; // skip it if its not a transform
+    // here this = key div
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 3e0a320b37..279381403c 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -23,7 +23,7 @@ body,html {
   margin:1rem;
   font-size: 1.5rem;
   padding:1rem .5rem;
-  transition:all .07s;
+  transition:all .1s;
   width:100px;
   text-align: center;
   color:white;

From 7842712d19b4d296caa097c7f37bcd9200f52db1 Mon Sep 17 00:00:00 2001
From: hypatiah <danielle.hassid@gmail.com>
Date: Fri, 9 Dec 2016 15:33:57 -0800
Subject: [PATCH 5/5] Modularize playSound function

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index fc69be9465..a8832782b1 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,7 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  window.addEventListener('keydown', function(e) {
+  function playSound(e) {
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
     if(!audio) return; //stop function all together
@@ -68,7 +68,7 @@
     // CSS: transition:all .07s;
     //.playing adds transform:scale(1.1);
     key.classList.add('playing');
-  });
+  }
 
   function removeTransition(e) {
     if (e.propertyName !== 'transform') return; // skip it if its not a transform
@@ -78,6 +78,7 @@
 
   const keys = document.querySelectorAll('.key');
   keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  window.addEventListener('keydown', playSound);
 </script>