Completed Drum Kit

elitenomad · elitenomad · commit f649fc0bdddb · 2017-03-14T23:19:49.000+11:00
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -59,6 +59,24 @@
 
 <script>
 
+    function removeTransition(e){
+      if(e.propertyName != 'transform') return;
+      e.target.classList.remove('playing');
+    }
+
+    function playSound(event){
+        const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
+        const key = document.querySelector(`div[data-key="${event.keyCode}"]`);
+        if(!audio) return;
+
+        key.classList.add('playing');
+        audio.currentTime = 0;
+        audio.play();
+    }
+
+    const keys = Array.from(document.querySelectorAll('.key'));
+    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+    window.addEventListener('keydown', playSound);
 </script>
 
 
