Update

Finished tutorial, still need to go back to add comments for things that are new to me for clarification.

Author: erikwallace

01 - JavaScript Drum Kit/index.html

@@ -9,40 +9,41 @@
 
   <!-- Buttons -->
   <!-- Data attributes (data-key) wire up buttons with sounds -->
+  <!-- http://keycode.info - nice site for getting keycodes -->
   <div class="keys">
-    <div data-key="65" class="key">
+    <div data-key="65" class="js-key">
       <kbd>A</kbd>
       <span class="sound">clap</span>
     </div>
-    <div data-key="83" class="key">
+    <div data-key="83" class="js-key">
       <kbd>S</kbd>
       <span class="sound">hihat</span>
     </div>
-    <div data-key="68" class="key">
+    <div data-key="68" class="js-key">
       <kbd>D</kbd>
       <span class="sound">kick</span>
     </div>
-    <div data-key="70" class="key">
+    <div data-key="70" class="js-key">
       <kbd>F</kbd>
       <span class="sound">openhat</span>
     </div>
-    <div data-key="71" class="key">
+    <div data-key="71" class="js-key">
       <kbd>G</kbd>
       <span class="sound">boom</span>
     </div>
-    <div data-key="72" class="key">
+    <div data-key="72" class="js-key">
       <kbd>H</kbd>
       <span class="sound">ride</span>
     </div>
-    <div data-key="74" class="key">
+    <div data-key="74" class="js-key">
       <kbd>J</kbd>
       <span class="sound">snare</span>
     </div>
-    <div data-key="75" class="key">
+    <div data-key="75" class="js-key">
       <kbd>K</kbd>
       <span class="sound">tom</span>
     </div>
-    <div data-key="76" class="key">
+    <div data-key="76" class="js-key">
       <kbd>L</kbd>
       <span class="sound">tink</span>
     </div>
@@ -60,9 +61,27 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  window.addEventListener('keydown', function (e) {
-    console.log(e);
-  });
+  
+  function playSound(e) {
+    // console.log(e.keyCode);
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.js-key[data-key="${e.keyCode}"]`);
+    if (!audio) return; // if the key pressed isn't a match stop the function from running
+    audio.currentTime = 0; // rewind audio clip to start
+    audio.play();
+    key.classList.add('is-playing');
+  }
+
+  function removeTransition(e) {
+    if(e.propertyName !== 'transform') return // skip if it's not a transform
+      // console.log(e.propertyName);
+      this.classList.remove('is-playing');
+  }
+
+  const keys = document.querySelectorAll('.js-key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+  window.addEventListener('keydown', playSound);
 
 </script>