From 164f2972b5dfcf99fe818f7e3d37984417a1a723 Mon Sep 17 00:00:00 2001
From: kimkvn <kimkvn@gmail.com>
Date: Mon, 12 Dec 2016 13:50:47 -0500
Subject: [PATCH 1/6] hmm I should read up on es6

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..8bcf7d2a71 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}]`);
+    console.log(audio)
+  });
 </script>
 
 

From e272191f140dc3fec2dd4b221a6b6806c1de3782 Mon Sep 17 00:00:00 2001
From: kimkvn <kimkvn@gmail.com>
Date: Mon, 12 Dec 2016 13:57:44 -0500
Subject: [PATCH 2/6] enable play on keypress

---
 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 8bcf7d2a71..0306034929 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -60,7 +60,9 @@
 <script>
   window.addEventListener('keydown', function(e){
 
-    const audio = document.querySelector(`audio[data-key=${e.keyCode}]`);
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    if(!audio) return;
+    audio.play();
     console.log(audio)
   });
 </script>

From 42d15320517f62c8226a51243259f2e76a9f15b3 Mon Sep 17 00:00:00 2001
From: kimkvn <kimkvn@gmail.com>
Date: Mon, 12 Dec 2016 14:28:42 -0500
Subject: [PATCH 3/6] writing listener to remove css class upon completion

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 0306034929..002132088d 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,13 +58,28 @@
   <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;
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
+    if(!audio) return; //stops function from running all together & prevents console error
+
+    audio.currentTime = 0; //rewinds audio to start, enable rapid keypress
     audio.play();
-    console.log(audio)
+
+    key.classList.add('playing');
+
   });
+
+  function removeTransition(e){
+    if(e.propertyName !== 'transform') return; //skip if not transform
+    console.log(e.propertyName);
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
 </script>
 
 

From 3fdb7705aafe178e1906b77d7a18b332eb42499c Mon Sep 17 00:00:00 2001
From: kimkvn <kimkvn@gmail.com>
Date: Mon, 12 Dec 2016 14:31:50 -0500
Subject: [PATCH 4/6] removing css class complete

---
 01 - JavaScript Drum Kit/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 002132088d..b8acb654a3 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -74,7 +74,7 @@
 
   function removeTransition(e){
     if(e.propertyName !== 'transform') return; //skip if not transform
-    console.log(e.propertyName);
+    this.classList.remove('playing')
   }
 
   const keys = document.querySelectorAll('.key');

From 7389b427dc0fd8300b83b85f7b8906fdf69d56a3 Mon Sep 17 00:00:00 2001
From: kimkvn <kimkvn@gmail.com>
Date: Mon, 12 Dec 2016 14:35:32 -0500
Subject: [PATCH 5/6] separating playSound code into its own function

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index b8acb654a3..52bcdbb6f7 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,18 +59,16 @@
 
 <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; //stops function from running all together & prevents console error
-
     audio.currentTime = 0; //rewinds audio to start, enable rapid keypress
     audio.play();
-
     key.classList.add('playing');
-
-  });
+  }
 
   function removeTransition(e){
     if(e.propertyName !== 'transform') return; //skip if not transform
@@ -80,6 +78,8 @@
   const keys = document.querySelectorAll('.key');
   keys.forEach(key => key.addEventListener('transitionend', removeTransition));
 
+  window.addEventListener('keydown', playSound);
+
 </script>
 
 

From 894bf60cf19c0f099a8440a980b1b0dc4318d47b Mon Sep 17 00:00:00 2001
From: kimkvn <kimkvn@gmail.com>
Date: Wed, 14 Dec 2016 01:40:57 -0500
Subject: [PATCH 6/6] decided to create a separate html file for my code,
 instead of writing it in the start file

---
 01 - JavaScript Drum Kit/index-START.html | 21 ------
 01 - JavaScript Drum Kit/index-mine.html  | 87 +++++++++++++++++++++++
 2 files changed, 87 insertions(+), 21 deletions(-)
 create mode 100644 01 - JavaScript Drum Kit/index-mine.html

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 52bcdbb6f7..4070d32767 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,27 +59,6 @@
 
 <script>
 
-
-
-  function playSound(e){
-    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
-    if(!audio) return; //stops function from running all together & prevents console error
-    audio.currentTime = 0; //rewinds audio to start, enable rapid keypress
-    audio.play();
-    key.classList.add('playing');
-  }
-
-  function removeTransition(e){
-    if(e.propertyName !== 'transform') return; //skip if not transform
-    this.classList.remove('playing')
-  }
-
-  const keys = document.querySelectorAll('.key');
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
-
-  window.addEventListener('keydown', playSound);
-
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/index-mine.html b/01 - JavaScript Drum Kit/index-mine.html
new file mode 100644
index 0000000000..52bcdbb6f7
--- /dev/null
+++ b/01 - JavaScript Drum Kit/index-mine.html	
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS Drum Kit</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+
+  <div class="keys">
+    <div data-key="65" class="key">
+      <kbd>A</kbd>
+      <span class="sound">clap</span>
+    </div>
+    <div data-key="83" class="key">
+      <kbd>S</kbd>
+      <span class="sound">hihat</span>
+    </div>
+    <div data-key="68" class="key">
+      <kbd>D</kbd>
+      <span class="sound">kick</span>
+    </div>
+    <div data-key="70" class="key">
+      <kbd>F</kbd>
+      <span class="sound">openhat</span>
+    </div>
+    <div data-key="71" class="key">
+      <kbd>G</kbd>
+      <span class="sound">boom</span>
+    </div>
+    <div data-key="72" class="key">
+      <kbd>H</kbd>
+      <span class="sound">ride</span>
+    </div>
+    <div data-key="74" class="key">
+      <kbd>J</kbd>
+      <span class="sound">snare</span>
+    </div>
+    <div data-key="75" class="key">
+      <kbd>K</kbd>
+      <span class="sound">tom</span>
+    </div>
+    <div data-key="76" class="key">
+      <kbd>L</kbd>
+      <span class="sound">tink</span>
+    </div>
+  </div>
+
+  <audio data-key="65" src="sounds/clap.wav"></audio>
+  <audio data-key="83" src="sounds/hihat.wav"></audio>
+  <audio data-key="68" src="sounds/kick.wav"></audio>
+  <audio data-key="70" src="sounds/openhat.wav"></audio>
+  <audio data-key="71" src="sounds/boom.wav"></audio>
+  <audio data-key="72" src="sounds/ride.wav"></audio>
+  <audio data-key="74" src="sounds/snare.wav"></audio>
+  <audio data-key="75" src="sounds/tom.wav"></audio>
+  <audio data-key="76" src="sounds/tink.wav"></audio>
+
+<script>
+
+
+
+  function playSound(e){
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
+    if(!audio) return; //stops function from running all together & prevents console error
+    audio.currentTime = 0; //rewinds audio to start, enable rapid keypress
+    audio.play();
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e){
+    if(e.propertyName !== 'transform') return; //skip if not transform
+    this.classList.remove('playing')
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+  window.addEventListener('keydown', playSound);
+
+</script>
+
+
+</body>
+</html>