Adding working drum kit

Author: Greg Pfaff

01 - JavaScript Drum Kit/index-START.html

@@ -62,33 +62,29 @@ <h1>#JavaScript30 Drum Example</h1>
 
 <script>
 
-    var drum = document.getElementsByClassName('drum');
-    var audio = document.getElementsByTagName('audio');
+  window.addEventListener('keydown', drummer);
 
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return;
+    console.log(e.propertyName);
+    this.classList.remove('playing');
+  }
 
-    for (var i = 0; i < drum.length; i++) {
-      var drumAttr = drum[i].getAttribute('data-key');
-      var drumEl = drum[i];
-      console.log(drumEl);
-      for (var j = 0; j < audio.length; j++) {
-        var audioEl = audio[j];
-        console.log(audioEl);
-      }
-      this.addEventListener("keyup", function(e) {
-        if (e.keyCode == 65) {
-          console.log(e.keyCode);
-        }
-      })
-    }
+  function drummer(e) {
+    console.log(e.keyCode);
 
-    
-    //drumEl.addEventListener('click', drumLoop, false);
-    //drum.addEventListener('click', drumLoop, false);
-   /* drumEl.addEventListener("keyup", function(event) {
-      if (event.keyCode == 65) {
-        console.log("Clicked");
-      }
-    })*/
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"`);
+    const drum = document.querySelector(`div[data-key="${e.keyCode}"`);
+
+    if (!audio) return;
+    audio.currentTime = 0;
+    audio.play();
+    drum.classList.add('playing');
+  }
+
+  const drums = document.querySelectorAll('.drum');
+  drums.forEach(drum => drum.addEventListener('transitionend', removeTransition));
+      
 </script>
 
 

01 - JavaScript Drum Kit/style.css

@@ -35,7 +35,7 @@ h1 {
   text-align: center;
   vertical-align: middle;
 }
-.drums .drumkit .drum {
+.drum {
   border: 4px solid black;
   width: 90px;
   height: 80px;
@@ -44,12 +44,13 @@ h1 {
   vertical-align: middle;
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
+  transition: all 0.6s;
 }
-.drums .drumkit .drum:hover {
+.drum:hover, .drum.playing {
   box-shadow: 0 0 10px #fff;
-  transition: ease-in 0.25s;
+  transform: scale(1.05);
 }
-.drums .drumkit .drum-note {
+.drum-note {
   display: block;
   text-transform: uppercase;
   margin-top: 10px;
@@ -58,7 +59,7 @@ h1 {
   font-weight: bold;
   font-size: 20px;
 }
-.drums .drumkit .drum-sound {
+.drum-sound {
   text-transform: uppercase;
   margin-top: 10px;
   color: #ffc600;