From c617399ec24adaa160f76d9ccbdff831837f77d1 Mon Sep 17 00:00:00 2001
From: Andrew Grant <andrew.grant@carbon60.com>
Date: Fri, 21 Dec 2018 09:10:49 -0500
Subject: [PATCH] Drumkit noodling.

---
 01 - JavaScript Drum Kit/index-START.html | 20 ++++++++++++++++++++
 01 - JavaScript Drum Kit/style.css        |  4 ++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..58cd8b6253 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,26 @@
 
 <script>
 
+
+  window.addEventListener('keydown', function(e) {
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    // console.log(key);
+    if (audio){
+      audio.currentTime = 0; //rewind
+      audio.play();
+      key.classList.add("playing");
+      // console.log(audio);
+    }
+  });
+
+  window.addEventListener('keyup', function(e) {
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    console.log(key);
+    if (key && key.classList.contains("playing")){
+      key.classList.remove("playing");
+    }
+  });
 </script>
 
 
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 0673a8752a..b9584f48a5 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -1,5 +1,5 @@
 html {
-  font-size: 10px;
+  font-size: 14px;
   background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
   background-size: cover;
 }
@@ -33,7 +33,7 @@ body,html {
 }
 
 .playing {
-  transform: scale(1.1);
+  transform: scale(1.5);
   border-color: #ffc600;
   box-shadow: 0 0 1rem #ffc600;
 }