completed day 1 challenge

iankhor · iankhor · commit b3c7e7cc2b9a · 2016-12-09T15:30:04.000+11:00
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>JS Drum Kit</title>
   <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
 
 
@@ -57,10 +59,35 @@
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
-<script>
+  <script>
+    const keys = document.querySelectorAll('.key');
+    window.addEventListener('keydown', playSound);
+    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+    /* ===== functions below ====== */
+    function playSound(e) {
+      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+      const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+
+      if (!audio) return;
 
-</script>
+      audio.currentTime = 0;
+      audio.play();
+      key.classList.add('playing');
+
+      // console.log('key:', key);
+      // console.log('audio:', audio);
+
+    };
+
+    function removeTransition(e) {
+      if (e.propertyName !== 'transform') return;
+      this.classList.remove('playing');
+      // console.log('this : ', this);
+    };
+  </script>
 
 
 </body>
-</html>
+
+</html>
