finished the drum but cleanup needed and improvement

Vikas-KM · Vikas-KM · commit 7417d25ea3ea · 2018-12-08T22:42:42.000+05:30
diff --git a/01 - JavaScript Drum Kit/drumKit.js b/01 - JavaScript Drum Kit/drumKit.js
@@ -1,3 +1,19 @@
 window.addEventListener('keydown', function(e){
-    console.log(e);
-})
+    const audio = document.querySelector(`audio[data-key='${e.keyCode}']`);
+    const key = document.querySelector(`.key[data-key='${e.keyCode}']`);
+    if(!audio)  return;
+    // console.log(audio);
+    audio.currentTime = 0; //for rewind
+    audio.play();
+    key.classList.add('playing');
+});
+
+function removeTransition(e){
+    // console.log(e.propertyName);
+    if(e.propertyName !== 'transform')    return;
+    // console.log(this);  // refers to the key event which it triggered
+    this.classList.remove('playing');
+}
+
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitionend', removeTransition));
diff --git a/01 - JavaScript Drum Kit/learning.txt b/01 - JavaScript Drum Kit/learning.txt
@@ -2,4 +2,8 @@ Things learnt while solving this project
 
 1: learnt css property transform, translate, skew, scale, rotate.
 2: learnt css property box-shadow.
-3: DOM Events
+3: DOM KeyEvents AudioEvents and Transistion
+
+// TODO
+1: Build own CSS 
+
