From ce1baacd1d185bf9ba8cb7bda37be1655734efd7 Mon Sep 17 00:00:00 2001
From: Wlainer Ribeiro <wlainer@localhost.localdomain>
Date: Fri, 30 Dec 2016 17:27:39 -0200
Subject: [PATCH] Day 1

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..2a115f86aa 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,6 +58,28 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+function removeTransition(e) {
+    if (e.propertyName !== 'transform') return;
+    e.target.classList.remove('playing');
+  }
+
+function playSound (event) {
+  const keyCode = event.keyCode;
+  
+  const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
+  if (!audio) return;
+  audio.currentTime = 0;
+  audio.play();
+
+  const element = document.querySelector(`div[data-key="${keyCode}"]`);
+  console.log(element);
+  element.classList.add('playing');
+
+}
+
+const keys = Array.from(document.querySelectorAll('.key'));
+keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+document.addEventListener('keydown', playSound);
 
 </script>