From c70011b7a4b44a2ff5832d1ede45430f15e042e3 Mon Sep 17 00:00:00 2001
From: Homero Silva <hsilvap@me.com>
Date: Wed, 14 Dec 2016 00:48:42 -0600
Subject: [PATCH] finished first video.

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..1d529ca037 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,25 @@
 
 <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;
+      audio.currentTime = 0; //rewinds
+      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>