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;
+}