day 9 completed

4 years ago · ad6a886453
parent 9952d8f694
commit ad6a886453
9 changed files with 75 additions and 0 deletions
--- a/code/09-sound-board/index.html
+++ b/code/09-sound-board/index.html
@ -0,0 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09 sound board</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <span class="btn" id="applause">applause</span>
    <span class="btn" id="boo">boo</span>
    <span class="btn" id="gasp">gasp</span>
    <span class="btn" id="tada">tada</span>
    <span class="btn" id="victory">victory</span>
    <span class="btn" id="wrong">wrong</span>
    <script src="script.js"></script>
 </body>
 </html>
--- a/code/09-sound-board/script.js
+++ b/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 = `<audio id="${e.target.id}-sound" src="./sounds/${e.target.id}.mp3"></audio>`;
    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;
  });
 }
--- a/code/09-sound-board/sounds/applause.mp3
+++ b/code/09-sound-board/sounds/applause.mp3
--- a/code/09-sound-board/sounds/boo.mp3
+++ b/code/09-sound-board/sounds/boo.mp3
--- a/code/09-sound-board/sounds/gasp.mp3
+++ b/code/09-sound-board/sounds/gasp.mp3
--- a/code/09-sound-board/sounds/tada.mp3
+++ b/code/09-sound-board/sounds/tada.mp3
--- a/code/09-sound-board/sounds/victory.mp3
+++ b/code/09-sound-board/sounds/victory.mp3
--- a/code/09-sound-board/sounds/wrong.mp3
+++ b/code/09-sound-board/sounds/wrong.mp3
--- a/code/09-sound-board/style.css
+++ b/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;
 }