Add my solution for JS30 wesbos#1

Author: joeyriosa

01 - JavaScript Drum Kit/index-START.html

@@ -59,6 +59,36 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  
+
+  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 to start.
+    audio.play();
+    if (!key) return;
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e) {
+    // Skip is not a transform.
+    if (e.propertyName !== 'transform') return;
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  // This is based on the CSS transitionend property. This is to make sure that the highlight will be removed after transition to yellow border.
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+  window.addEventListener('keydown', playSound);
+  
+  // window.addEventListener('keyup', function(e) {
+  //   const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+  //   if (!key) return;
+  //   key.classList.remove('playing');
+  // })
+
 
 </script>