day 1

Author: renatodeleao

01 - JavaScript Drum Kit/index-START.html

@@ -59,6 +59,28 @@
 
 <script>
 
+  function playSound(e){
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"`)
+    const currKey = document.querySelector(`.key[data-key="${e.keyCode}"`)
+
+    if (!audio) return;
+
+    audio.currentTime = 0; //rewind to start allowing repeated clicks
+    audio.play();
+    currKey.classList.add('playing');
+  }
+
+  function removeTransition(e){
+    if(e.propertyName !== "transform") return;
+    this.classList.remove('playing');
+  }
+
+
+  (() => {
+    document.addEventListener('keydown', playSound);
+    const keys = document.querySelectorAll('.key');
+    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  })();
 </script>