1 done. Practiced ES6 without any transpilers

frequencydesign · frequencydesign · commit 613e45e51cc4 · 2016-12-10T16:03:04.000-08:00
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -59,6 +59,32 @@
 
 <script>
 
+  function playSound(event) {
+    /* // ES5 version
+     const audioKeyCode = event.keyCode;
+     const audio = document.querySelector("audio[data-key='"+audioKeyCode+"']");
+     */
+    const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${event.keyCode}"]`);
+    if(!audio) return; // stop running function all together
+    audio.currentTime = 0; // resets or rewinds to the start
+    audio.play();
+    key.classList.add("playing");
+  };
+
+  function removeTransition(e) {
+    if(e.propertyName !== "transform") return; //skip it if it's not a transform
+    this.classList.remove("playing");
+  }
+
+  const keys = document.querySelectorAll(".key");
+  keys.forEach(key => key.addEventListener("transitionend", removeTransition));
+
+
+  window.addEventListener("keydown", playSound);
+
+
+
 </script>
 
 
