From cb409972c9d7fd9e86388be716c0196fa37945e3 Mon Sep 17 00:00:00 2001
From: Arun <arun.ub29@gmail.com>
Date: Wed, 8 Mar 2017 17:44:57 -0500
Subject: [PATCH] Added functions to play music on key events:rocket:

---
 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..30d5fb3888 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(){
+function playSound(e){
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    if(!audio) return; // no associated key 
+    audio.currentTime = 0;//rewind to reset every time
+    audio.play();
+    key.classList.add('playing');//adding a new CSS class
 
+  }
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitionend',removeTransistion));
+
+function removeTransistion(e){
+  if(e.propertyName!== 'transform') return;
+  this.classList.remove('playing');
+}
+window.addEventListener('keydown',playSound);
+})();
 </script>