From c48ef2d7de393f896607af49f481247081f80238 Mon Sep 17 00:00:00 2001
From: Daniel Shneyder <archcorsair@gmail.com>
Date: Mon, 26 Dec 2016 19:30:39 -0800
Subject: [PATCH 1/4] Listens for keypress events

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..6b0d32bc6f 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -10,7 +10,7 @@
 
   <div class="keys">
     <div data-key="65" class="key">
-      <kbd>A</kbd>
+      <kbd on>A</kbd>
       <span class="sound">clap</span>
     </div>
     <div data-key="83" class="key">
@@ -58,7 +58,25 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  let key = document.querySelector(".key")
+  let keys = document.querySelector(".keys")
 
+  const keyMap {
+    'a': '65',
+    's': '83',
+    'd': '68',
+    'f': '70',
+    'g': '71',
+    'h': '72',
+    'j': '74',
+    'k': '75',
+    'l': '76',
+  }
+
+  console.log(keys)
+  document.addEventListener("keypress", e => {
+
+  })
 </script>
 
 

From 4eb2d6988bacc1bd5f8365ba3c6cc59fece69596 Mon Sep 17 00:00:00 2001
From: Daniel Shneyder <archcorsair@gmail.com>
Date: Wed, 28 Dec 2016 12:08:43 -0800
Subject: [PATCH 2/4] Plays sound on keypress

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 6b0d32bc6f..b8fd9da8da 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,10 +58,7 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  let key = document.querySelector(".key")
-  let keys = document.querySelector(".keys")
-
-  const keyMap {
+  const keyMap = {
     'a': '65',
     's': '83',
     'd': '68',
@@ -73,10 +70,15 @@
     'l': '76',
   }
 
-  console.log(keys)
-  document.addEventListener("keypress", e => {
+  function playAudio(key) {
+    const sound = document.querySelector(`audio[data-key="${keyMap[key]}"]`)
+    sound.play()
+  }
 
+  document.addEventListener("keypress", e => {
+    playAudio(e.key)
   })
+
 </script>
 
 

From 3dc33465a5965de2f98cf6b4d20048818c7c1594 Mon Sep 17 00:00:00 2001
From: Daniel Shneyder <archcorsair@gmail.com>
Date: Wed, 28 Dec 2016 12:10:40 -0800
Subject: [PATCH 3/4] Refactored. All logic in event listener

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index b8fd9da8da..c5a31a6d18 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -69,16 +69,10 @@
     'k': '75',
     'l': '76',
   }
-
-  function playAudio(key) {
-    const sound = document.querySelector(`audio[data-key="${keyMap[key]}"]`)
-    sound.play()
-  }
-
   document.addEventListener("keypress", e => {
-    playAudio(e.key)
+    const sound = document.querySelector(`audio[data-key="${keyMap[e.key]}"]`)
+    sound.play()
   })
-
 </script>
 
 

From 902f6fd6be7264de01fc933bb925b31463820d16 Mon Sep 17 00:00:00 2001
From: Daniel Shneyder <archcorsair@gmail.com>
Date: Wed, 28 Dec 2016 12:14:57 -0800
Subject: [PATCH 4/4] Does not play sounds for nonexistent keys

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index c5a31a6d18..140b1b291b 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -69,9 +69,12 @@
     'k': '75',
     'l': '76',
   }
+
   document.addEventListener("keypress", e => {
-    const sound = document.querySelector(`audio[data-key="${keyMap[e.key]}"]`)
-    sound.play()
+    if (keyMap.hasOwnProperty(e.key)) {
+      const sound = document.querySelector(`audio[data-key="${keyMap[e.key]}"]`)
+      sound.play()
+    }
   })
 </script>