diff --git a/sound-board/index.html b/sound-board/index.html new file mode 100644 index 0000000..e3d4e94 --- /dev/null +++ b/sound-board/index.html @@ -0,0 +1,21 @@ + + + + + + + Sound Board + + + + + + + + + +
+ + + + diff --git a/sound-board/script.js b/sound-board/script.js new file mode 100644 index 0000000..b1c3393 --- /dev/null +++ b/sound-board/script.js @@ -0,0 +1,25 @@ +const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong'] + +sounds.forEach(sound => { + const btn = document.createElement('button') + btn.classList.add('btn') + + btn.innerText = sound + + btn.addEventListener('click', () => { + stopSongs() + + document.getElementById(sound).play() + }) + + document.getElementById('buttons').appendChild(btn) +}) + +function stopSongs() { + sounds.forEach(sound => { + const song = document.getElementById(sound) + + song.pause() + song.currentTime = 0; + }) +} \ No newline at end of file diff --git a/sound-board/sounds/applause.mp3 b/sound-board/sounds/applause.mp3 new file mode 100644 index 0000000..8be6dc1 Binary files /dev/null and b/sound-board/sounds/applause.mp3 differ diff --git a/sound-board/sounds/boo.mp3 b/sound-board/sounds/boo.mp3 new file mode 100644 index 0000000..8c27241 Binary files /dev/null and b/sound-board/sounds/boo.mp3 differ diff --git a/sound-board/sounds/gasp.mp3 b/sound-board/sounds/gasp.mp3 new file mode 100644 index 0000000..1f4c6f0 Binary files /dev/null and b/sound-board/sounds/gasp.mp3 differ diff --git a/sound-board/sounds/tada.mp3 b/sound-board/sounds/tada.mp3 new file mode 100644 index 0000000..a284f94 Binary files /dev/null and b/sound-board/sounds/tada.mp3 differ diff --git a/sound-board/sounds/victory.mp3 b/sound-board/sounds/victory.mp3 new file mode 100644 index 0000000..f565a5e Binary files /dev/null and b/sound-board/sounds/victory.mp3 differ diff --git a/sound-board/sounds/wrong.mp3 b/sound-board/sounds/wrong.mp3 new file mode 100644 index 0000000..2b4939a Binary files /dev/null and b/sound-board/sounds/wrong.mp3 differ diff --git a/sound-board/style.css b/sound-board/style.css new file mode 100644 index 0000000..91ee7d1 --- /dev/null +++ b/sound-board/style.css @@ -0,0 +1,38 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: rgb(161, 100, 223); + font-family: 'Poppins', sans-serif; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.btn { + background-color: rebeccapurple; + border-radius: 5px; + border: none; + color: #fff; + margin: 1rem; + padding: 1.5rem 3rem; + font-size: 1.2rem; + font-family: inherit; + cursor: pointer; +} + +.btn:hover { + opacity: 0.9; +} + +.btn:focus { + outline: none; +}