feat: day 9

Author: solygambas

009-sound board/index.html

@@ -13,6 +13,7 @@
     <audio src="sounds/tada.mp3" id="tada"></audio>
     <audio src="sounds/victory.mp3" id="victory"></audio>
     <audio src="sounds/wrong.mp3" id="wrong"></audio>
+    <audio src="sounds/joke.mp3" id="joke"></audio>
     <div id="buttons"></div>
     <script src="script.js"></script>
   </body>

009-sound board/script.js

@@ -1,4 +1,5 @@
-const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"];
+// Include a New Sound
+const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong", "joke"];
 const buttons = document.getElementById("buttons");
 
 const stopSounds = () => {
@@ -7,15 +8,25 @@ const stopSounds = () => {
     currentSound.pause();
     currentSound.currentTime = 0;
   });
+  document
+    .querySelectorAll(".btn")
+    .forEach((btn) => btn.classList.remove("playing"));
 };
 
 sounds.forEach((sound) => {
   const btn = document.createElement("button");
   btn.classList.add("btn");
-  btn.innerText = sound;
+  // Change Button Text
+  btn.innerText = btn.innerText = "Play " + sound.toUpperCase();
   btn.addEventListener("click", () => {
     stopSounds();
-    document.getElementById(sound).play();
+    // Add Visual Feedback on Play
+    btn.classList.add("playing");
+    const audio = document.getElementById(sound);
+    audio.play();
+    audio.onended = () => {
+      btn.classList.remove("playing");
+    };
   });
   buttons.appendChild(btn);
 });

009-sound board/sounds/joke.mp3

@@ -18,8 +18,10 @@ body {
 }
 
 .btn {
-  background-color: rebeccapurple;
-  border-radius: 5px;
+  /* Adjust Button Styling */
+  background-color: #2e1c2b;
+  color: #eaeaea;
+  border-radius: 10px;
   border: none;
   color: #fff;
   margin: 1rem;
@@ -36,3 +38,7 @@ body {
 .btn:focus {
   outline: none;
 }
+
+.btn.playing {
+  background-color: rebeccapurple;
+}