refactored code removed foreachs

unconnect · unconnect · commit 0c1ac2534cfd · 2022-08-20T08:14:29.000+02:00
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -59,38 +59,27 @@
 
 <script>
 
-const keys = document.querySelectorAll('.key')
-const audio = document.querySelectorAll('audio')
-
+  
 const playSoundAndAnimateKey = (e) => {
-  const keyname = e.key
-  keys.forEach((key) => {
-    if(key.children[0].textContent.toLowerCase() === keyname) {
-      audio.forEach((sound) => {
-        if(sound.dataset.key === key.dataset.key) {
-          sound.currentTime = 0;
-          sound.play()
-          key.classList.toggle('playing')
-        }
-      })
-    }
-  })
+  const key = document.querySelector(`div[data-key="${e.keyCode}"]`)
+  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
+  if(!audio) {
+    return
+  }
+  audio.currentTime = 0;
+  audio.play()
+  key.classList.toggle('playing')
 }
 
 const stopAnimationKey = (e) => {
-  const keyname = e.key
-  keys.forEach((key) => {
-    if(key.children[0].textContent.toLowerCase() === keyname) {
-      audio.forEach((sound) => {
-        if(sound.dataset.key === key.dataset.key) {
-          key.classList.toggle('playing')
-        }
-      })
-    }
-  })
+  const key = document.querySelector(`div[data-key="${e.keyCode}"]`)
+  if(!key) {
+    return
+  }
+  key.classList.toggle('playing')
 }
 
-document.addEventListener('keypress', playSoundAndAnimateKey, false)
+document.addEventListener('keydown', playSoundAndAnimateKey, false)
 document.addEventListener('keyup', stopAnimationKey, false)
 
 </script>
