worked on folder wesbos#1 and wesbos#25

Author: aastha12

01 - JavaScript Drum Kit/index-START.html

@@ -59,6 +59,36 @@
 
 <script>
 
+  function playSound(e)
+  {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    // using classes is more messier here - const audio = document.querySelector('.key-65');
+    
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+
+    if(!audio) return; //stop function running
+    audio.currentTime = 0; //rewind audio clip to the start
+    audio.play(); 
+    key.classList.add('playing');
+
+  }
+
+  window.addEventListener('keydown', playSound);
+
+  function removeTransition(e)
+  {
+    console.log(e.propertyName);
+    if(e.propertyName!='transform') return;
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(  
+    (key) => {
+      key.addEventListener('transitionend',removeTransition);
+    }
+  );
+
 </script>
 
 

25 - Event Capture, Propagation, Bubbling and Once/index-START.html

@@ -42,6 +42,31 @@
 
 <button></button>
 <script>
+    const divs = document.querySelectorAll('div');
+    const button = document.querySelector('button');
+
+    function logText(e)
+    {
+        console.log(this);
+        console.log(this.classList.value);
+        e.stopPropagation(); //will prevent bubbling up 
+    }
+
+    divs.forEach(
+      (div) => div.addEventListener('click',logText,{
+        capture:false,
+        once:true
+        })
+    );
+    
+    //because we used once:true, "Hi" will get printed only once irrespective
+    //of how many times we click the button
+    button.addEventListener('click',
+      ()=> {
+        console.log("Hi");
+      }
+    , { once:true } ); 
+
 
 </script>
 </body>