From 5e2252646209f635986290da42f4a7f93aa31365 Mon Sep 17 00:00:00 2001
From: Kan <39623361+bearbunny@users.noreply.github.com>
Date: Fri, 7 Sep 2018 09:31:14 +0700
Subject: [PATCH] Finish Exc-1, JavaScript Drum

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..51a174aed0 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,25 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+function playSound(e) {
+  // function(e): e is Event object data from addEventListener
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);// attribute selector audio[data-key="65"]
+  console.log(audio)
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+  if(!audio) return; // stop the function from running
+  audio.currentTime = 0; // rewind to start everytime keydown
+  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>