stable git for day 1

primaulia · primaulia · commit fb135a74a76d · 2016-12-14T11:44:33.000+08:00
diff --git 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="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>
 
 
