finished drum machine

Author: yieldjessyield

01 - JavaScript Drum Kit/index-START.html

@@ -59,6 +59,26 @@
 
 <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 all together
+    audio.currentTime = 0  //rewind to the start
+    audio.play();
+    key.classList.add('playing')
+  }
+
+  function removeTransition(e){
+    if (e.propertyName !== 'transform') return
+      this.classList.remove('playing')
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key=> key.addEventListener('transitionend', removeTransition))
+  
+  window.addEventListener('keydown', playSound);
 </script>
 
 

01 - JavaScript Drum Kit/style.css

@@ -32,7 +32,7 @@ body,html {
 }
 
 .playing {
-  transform:scale(1.1);
+  transform:scale(4);
   border-color:#ffc600;
   box-shadow: 0 0 10px #ffc600;
 }