From a90caf7d4e106739a863a184cc812013ccfeddf8 Mon Sep 17 00:00:00 2001
From: Cameron <cameron@biteable.com>
Date: Sat, 13 Jan 2018 10:50:46 +1100
Subject: [PATCH] 01 - completed

---
 01 - JavaScript Drum Kit/index-START.html | 26 +++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..b973c1f888 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,33 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+;(() => {
+  const PLAYING_CLASSNAME = 'playing'
 
+  const keys = Array.from(document.querySelectorAll('.key'))
+
+  keys.forEach((el) => {
+    const key = Number(el.dataset.key);
+    const audio = document.querySelector(`audio[data-key="${key}"]`);
+
+    el.addEventListener('transitionend', () => el.classList.remove(PLAYING_CLASSNAME));
+
+    if (!audio) {
+      return;
+    }
+
+    const play = () => {
+      el.classList.add(PLAYING_CLASSNAME);
+      audio.pause();
+      audio.currentTime = 0;
+      audio.play();
+    }
+
+    el.addEventListener('click', () => play());
+
+    document.addEventListener('keydown', (ev) => ev.keyCode === key && play());
+  });
+})();
 </script>