From 4d32bf74cfdcae4ab3fd9649690752be00633cf9 Mon Sep 17 00:00:00 2001
From: yieldjessyield <jess.harrelson0707@gmail.com>
Date: Mon, 6 Mar 2017 17:53:00 -0500
Subject: [PATCH] finished drum machine

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..4a6db1a907 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,26 @@
 
 <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; //stop the function from running all together
+    audio.currentTime = 0  //rewind to the start
+    audio.play();
+    key.classList.add('playing')
+  }
+
+  function removeTransition(e){
+    if (e.propertyName !== 'transform') return
+      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/style.css b/01 - JavaScript Drum Kit/style.css
index 3e0a320b37..bcc57ebc3d 100644
--- a/01 - JavaScript Drum Kit/style.css	
+++ b/01 - JavaScript Drum Kit/style.css	
@@ -32,7 +32,7 @@ body,html {
 }
 
 .playing {
-  transform:scale(1.1);
+  transform:scale(4);
   border-color:#ffc600;
   box-shadow: 0 0 10px #ffc600;
 }