diff --git a/my code/09-sound-board/index.html b/my code/09-sound-board/index.html new file mode 100644 index 0000000..e30f156 --- /dev/null +++ b/my code/09-sound-board/index.html @@ -0,0 +1,25 @@ + + + + + + + + 09 sound board + + + + + + + applause + boo + gasp + tada + victory + wrong + + + + + \ No newline at end of file diff --git a/my code/09-sound-board/script.js b/my code/09-sound-board/script.js new file mode 100644 index 0000000..f84ac2e --- /dev/null +++ b/my code/09-sound-board/script.js @@ -0,0 +1,26 @@ +const btns = document.querySelectorAll(".btn"); +const body = document.querySelector("body"); +let addText = ""; + +btns.forEach((btn) => { + btn.addEventListener("click", (e) => { + addText = ``; + + stopSong(); + + console.log(e, e.target.id); + + body.innerHTML += addText; + document.getElementById(e.target.id + "-sound").play(); + // stopSong(addText); + }); +}); + +function stopSong() { + const audio = document.querySelectorAll("audio"); + + audio.forEach((elm) => { + elm.pause(); + elm.currentTime = 0; + }); +} diff --git a/my code/09-sound-board/sounds/applause.mp3 b/my code/09-sound-board/sounds/applause.mp3 new file mode 100644 index 0000000..8be6dc1 Binary files /dev/null and b/my code/09-sound-board/sounds/applause.mp3 differ diff --git a/my code/09-sound-board/sounds/boo.mp3 b/my code/09-sound-board/sounds/boo.mp3 new file mode 100644 index 0000000..8c27241 Binary files /dev/null and b/my code/09-sound-board/sounds/boo.mp3 differ diff --git a/my code/09-sound-board/sounds/gasp.mp3 b/my code/09-sound-board/sounds/gasp.mp3 new file mode 100644 index 0000000..1f4c6f0 Binary files /dev/null and b/my code/09-sound-board/sounds/gasp.mp3 differ diff --git a/my code/09-sound-board/sounds/tada.mp3 b/my code/09-sound-board/sounds/tada.mp3 new file mode 100644 index 0000000..a284f94 Binary files /dev/null and b/my code/09-sound-board/sounds/tada.mp3 differ diff --git a/my code/09-sound-board/sounds/victory.mp3 b/my code/09-sound-board/sounds/victory.mp3 new file mode 100644 index 0000000..f565a5e Binary files /dev/null and b/my code/09-sound-board/sounds/victory.mp3 differ diff --git a/my code/09-sound-board/sounds/wrong.mp3 b/my code/09-sound-board/sounds/wrong.mp3 new file mode 100644 index 0000000..2b4939a Binary files /dev/null and b/my code/09-sound-board/sounds/wrong.mp3 differ diff --git a/my code/09-sound-board/style.css b/my code/09-sound-board/style.css new file mode 100644 index 0000000..6e139a6 --- /dev/null +++ b/my code/09-sound-board/style.css @@ -0,0 +1,24 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: darkorchid; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +span.btn { + font-size: 20px; + font-family: sans-serif; + color: #fff; + font-weight: 400; + background-color: rgba(0, 0, 0, 0.3); + padding: 30px 60px; + margin: 20px; + display: block; + border-radius: 10px; +}