From 40be8b4c28703b7c798d9c3f695f9cfcbc1711f9 Mon Sep 17 00:00:00 2001
From: bgando <gandolfo.bianca@gmail.com>
Date: Tue, 13 Dec 2016 18:30:52 +0100
Subject: [PATCH] Complete day 1/30

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..589255ae2b 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,29 @@
 
 <script>
 
+var playSound = function(e) {
+  const keyCode = e.keyCode;
+  const audioElement = document.querySelector(`audio[data-key="${keyCode}"]`);
+  const keyElement = document.querySelector(`div[data-key="${keyCode}"]`);
+  
+  if(!audioElement) return;
+
+  audioElement.currentTime = 0;
+  audioElement.play();
+  keyElement.classList.add('playing');
+}
+
+var removeTransition = function(e){
+  if(e.propertyName === 'transform'){
+    e.currentTarget.classList.remove('playing');
+  }
+}
+
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+document.addEventListener('keydown', playSound);
+
 </script>