Day 01 - JavaSCript Drum Kit

olegon · olegon · commit 0e49f5a1f698 · 2018-06-04T15:26:30.000-03:00
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>JS Drum Kit</title>
   <link rel="stylesheet" href="style.css">
 </head>
-<body>
 
+<body>
 
   <div class="keys">
     <div data-key="65" class="key">
@@ -57,10 +58,7 @@
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
-<script>
-
-</script>
-
-
+  <script src="index.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/01 - JavaScript Drum Kit/index.js b/01 - JavaScript Drum Kit/index.js
@@ -0,0 +1,20 @@
+[...document.querySelectorAll('.key')]
+.forEach(key => {
+    key.addEventListener('transitionend', (e) => {
+        // This event is called for each property that ended a transition.
+        
+        key.classList.remove('playing');
+    });
+});
+
+window.addEventListener('keyup', ({ keyCode }) => {
+    const keyElement = document.querySelector(`.key[data-key="${keyCode}"]`);
+    const audioElement = document.querySelector(`audio[data-key="${keyCode}"]`);
+
+    if (keyElement && audioElement) {
+        audioElement.currentTime = 0; // rewind to start
+        audioElement.play();
+
+        keyElement.classList.add('playing');
+    }
+});
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
@@ -23,7 +23,7 @@ body,html {
   margin: 1rem;
   font-size: 1.5rem;
   padding: 1rem .5rem;
-  transition: all .07s ease;
+  transition: all .15s ease-in-out;
   width: 10rem;
   text-align: center;
   color: white;
