Update index.html

erikwallace · web-flow · commit b2a89148777e · 2016-12-14T16:00:12.000-05:00
diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html
@@ -7,7 +7,8 @@
 </head>
 <body>
 
-
+  <!-- Buttons -->
+  <!-- Data attributes (data-key) wire up buttons with sounds -->
   <div class="keys">
     <div data-key="65" class="key">
       <kbd>A</kbd>
@@ -47,6 +48,7 @@
     </div>
   </div>
 
+  <!-- Links to sound files that play on button press -->
   <audio data-key="65" src="sounds/clap.wav"></audio>
   <audio data-key="83" src="sounds/hihat.wav"></audio>
   <audio data-key="68" src="sounds/kick.wav"></audio>
@@ -58,26 +60,12 @@
   <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; // stop the function from running altogether
-    audio.currentTime = 0; // rewind to the start
-    audio.play();
-    key.classList.add('playing');
-  }
-  function removeTransition(e) {
-    if (e.propertyName !== 'transform') return; // skip it if it's not a transform
-    this.classList.remove('playing');
-  }
-
-  const keys = document.querySelectorAll('.key');
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
-  window.addEventListener('keydown', playSound);
+  window.addEventListener('keydown', function (e) {
+    console.log(e);
+  });
 
 </script>
 
+
 </body>
 </html>
