Adds Day 1 Finished Code.

Author: rob5standingby

01 - JavaScript Drum Kit/index-START.html

@@ -58,7 +58,30 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  // There's quite a bit of delay between keydown and when the audio plays,
+  // but this is functional :P
+  (function() {
+    const playingClass = 'playing';
 
+    function playSound (e) {
+      const audio = document.querySelector(`audio[data-key='${e.keyCode}']`);
+      const key = document.querySelector(`.key[data-key='${e.keyCode}']`);
+      if (!audio) return;
+      audio.currentTime = 0; // rewind the audio to the start
+      audio.play();
+      key.classList.add(playingClass);
+    }
+
+    function removeTransition (e) {
+      if (e.propertyName !== 'transform') return;
+      this.classList.remove(playingClass);
+    }
+
+    const keys = document.querySelectorAll('.key');
+    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+    window.addEventListener('keydown', playSound);
+  })();
 </script>