Complete JavaScript30 exercises wesbos#1 and wesbos#25

Author: kailixie

01 - JavaScript Drum Kit/index-START.html

@@ -59,6 +59,27 @@
 
 <script>
 
+function playSound(e) {
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+
+  if (!audio) return;
+  audio.currentTime = 0;
+  audio.play();
+  key.classList.add('playing');
+};
+
+function removeTransition(e) {
+  if(e.propertyName !== 'transform') return;
+  this.classList.remove('playing');
+};
+
+window.addEventListener('keydown', playSound);
+
+const keys = document.querySelectorAll('.key');
+keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // animationend works the same way for animations
+
+
 </script>
 
 

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

@@ -41,8 +41,22 @@
 </style>
 
 <button></button>
+
 <script>
+const divs = document.querySelectorAll('div');
+
+function logText(e) {
+  console.log(this.classList.value);
+  // e.stopPropagation();
+};
+
+divs.forEach(div => div.addEventListener('click', logText, {
+  capture: false,
+  // once: true // makes so it runs once and then won't run again until refreshed -- good for store checkouts
+}));
 
 </script>
+
 </body>
+
 </html>