Day 1

oddlyfunctional · oddlyfunctional · commit e127a2fcdf9f · 2016-12-14T20:55:57.000-02:00
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -58,7 +58,28 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  document.addEventListener('keyup', play);
+  document.querySelectorAll('.key').forEach(
+    el => el.addEventListener('transitionend', removeTransition)
+  );
 
+  function play(event) {
+    const key = event.keyCode;
+    const button = document.querySelector(`.key[data-key="${key}"]`);
+    const audio = document.querySelector(`audio[data-key="${key}"]`);
+
+    if (!button) { return; }
+
+    button.classList.add('playing');
+    audio.currentTime = 0;
+    audio.play();
+  }
+
+  function removeTransition(event) {
+    if (event.propertyName !== 'transform') { return; }
+
+    event.target.classList.remove('playing');
+  }
 </script>
 
 
