day 1

slackerzz · slackerzz · commit 799c59ec3340 · 2016-12-17T12:46:03.000+01:00
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -6,8 +6,6 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
-
   <div class="keys">
     <div data-key="65" class="key">
       <kbd>A</kbd>
@@ -58,7 +56,25 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  function playAudio(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const block = document.querySelector(`div[data-key="${e.keyCode}"]`);
+    if(!audio)
+      return;
+    block.classList.add('playing');
+    audio.load();
+    audio.play();
+  }
+
+  function removeEffect(e) {
+    if (e.propertyName !== 'transform') return;
+    e.target.classList.remove('playing');
+  }
+
+  const keys = [... document.getElementsByClassName('key')];
 
+  keys.forEach((key) => key.addEventListener('transitionend', removeEffect));
+  window.addEventListener('keydown', playAudio);
 </script>
 
 
