From fb135a74a76de11d24352c2d9b5285d458c80692 Mon Sep 17 00:00:00 2001
From: Prima Aulia Gusta <primaulia@gmail.com>
Date: Wed, 14 Dec 2016 11:44:33 +0800
Subject: [PATCH] stable git for day 1

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..3d40f699e0 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,36 @@
   <audio data-key="76" src="http://github.com/sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener('keypress', function(e) {
+    // var key = e.key
+    const key = e.keyCode
+    const keys = [65, 83, 68, 70, 71, 72, 74, 75, 76]
 
+    if(keys.indexOf(key) !== -1) {
+      transitionKey(key)
+      playAudio(key)
+    }
+  })
+
+  function playAudio(key) {
+    const audio = document.querySelector(`audio[data-key="${ key }"]`)
+    if(! audio) return ;
+    audio.currentTime = 0
+    audio.play()
+  }
+
+  function transitionKey(key) {
+    const keyDiv = document.querySelector(`div[data-key="${ key }"]`)
+    keyDiv.classList.add('playing')
+  }
+
+  const keys = document.querySelectorAll('.key')
+  keys.forEach(elem => {
+    elem.addEventListener('transitionend', function(e) {
+      if (e.propertyName !== 'transform') return;
+      this.classList.remove('playing')
+    })
+  })
 </script>