Merge pull request #11 from 202306-NEA-DZ-FEW/btn_logic2

added buttons with logic
202306-NEA-DZ-FEW · Aug 18, 2023 · 2892e59 · 2892e59
2 parents 90035d1 + 0b92f6b
commit 2892e59
Show file tree

Hide file tree

Showing 5 changed files with 238 additions and 184 deletions.
diff --git a/index.html b/index.html
@@ -1,50 +1,47 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>repl.it</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
-  <title>repl.it</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;600;700;800;900&display=swap"
-    rel="stylesheet">
-  <link href="style.css" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
-  <div id="loading" class="loading">
-    <img src="assets/jumanjiLogo.png" alt="logo" class="logo-load">
-    <p class="progress-load-num">0 %</p>
-    <div class="progress-bar">
-      <div class="progress-fill"></div>
-    </div>
-  </div>
-  <div id="content" class="content hidden">
-    <div class="start-page">
-      <div class="bab1">
+  <body>
+    <div id="loading" class="loading">
+      <img src="assets/jumanjiLogo.png" alt="logo" class="logo-load" />
+      <p class="progress-load-num">0 %</p>
+      <div class="progress-bar">
+        <div class="progress-fill"></div>
       </div>
-      <div class="bab2">
-        <div class="action-container">
-          <button class="start-btn" onclick="startBtn()">Start</button>
-          <div class="sound-btn" onclick="soundBtn()">
-            <div class="checkbox">
-              <img src="assets/icons8-checkmark-96.svg" alt="check icon">
+    </div>
+    <div id="content" class="content hidden">
+      <div class="start-page">
+        <div class="bab1"></div>
+        <div class="bab2">
+          <div class="action-container">
+            <button class="start-btn" onclick="startBtn()">Start</button>
+            <div class="sound-btn" onclick="soundBtn()">
+              <div class="checkbox">
+                <img src="assets/icons8-checkmark-96.svg" alt="check icon" />
+              </div>
+              <span>Sound</span>
             </div>
-            <span>Sound</span>
           </div>
         </div>
-
       </div>
+      <audio id="sound"><source src="sound/jumanji.mp3" /></audio>
+      <div class="madLibsEdit"></div>
+      <div class="madLibsPreview"></div>
     </div>
-    <div class='madLibsEdit'>
-    </div>
-    <div class='madLibsPreview'>
-    </div>
-  </div>
-  <script src="do-not-touch.js"></script>
-  <script src="madlibs.js"></script>
-</body>
 
-</html>
+    <script src="do-not-touch.js"></script>
+    <script src="madlibs.js"></script>
+  </body>
+</html>
diff --git a/madlibs.js b/madlibs.js
@@ -26,6 +26,7 @@
  * There are multiple ways to do this, but you may want to use regular expressions.
  * Please go through this lesson: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/
  */
+document.body.style.overflow = "hidden";
 
 const progressFill = document.querySelector(".progress-fill"),
   progressLoadNum = document.querySelector(".progress-load-num");
@@ -73,7 +74,7 @@ function parseStory(rawStory) {
   rawStory = rawStory.replace(/\,/g, " ,");
   let arrWord = rawStory.split(" ");
   let storyToObj = [];
-  arrWord.forEach(item => {
+  arrWord.forEach((item) => {
     if (item.match(/[[a-zA-Z]]/g)) {
       let key = item.split("[");
       switch (key[1]) {
@@ -113,24 +114,66 @@ function parseStory(rawStory) {
  * You'll want to use the results of parseStory() to display the story on the page.
  *
  */
+const body = document.querySelector("body");
+const container = document.createElement("div");
+const edit = document.querySelector(".madLibsEdit"); // Using querySelector to select a specific element
+const pre = document.querySelector(".madLibsPreview"); // Using querySelector to select a specific element
+const playMusic = document.createElement("button");
+const resetBtn = document.createElement("button");
+const soundCheckBtn = document.querySelector(".sound-btn");
+const sound = document.getElementById("sound");
+soundCheckBtn.addEventListener("click", () => {
+  if (sound.paused) {
+    sound.play();
+    playMusic.textContent = "Pause";
+  } else {
+    sound.pause();
+  }
+});
+body.append(container);
+playMusic.textContent = "Play";
+resetBtn.textContent = "Reset";
+
+playMusic.addEventListener("click", () => {
+  if (sound.paused) {
+    sound.play();
+    playMusic.textContent = "Pause";
+  } else {
+    sound.pause();
+    playMusic.textContent = "Play";
+  }
+});
+
+container.setAttribute("class", "container");
+container.appendChild(edit);
+container.appendChild(pre);
 
 function madlibsEdit(processedStory) {
-  const edit = document.querySelector(".madLibsEdit"); // Using querySelector to select a specific element
-  const pre = document.querySelector(".madLibsPreview"); // Using querySelector to select a specific element
+  const editPara = document.createElement("p");
+  const previewPara = document.createElement("p");
   const newArr = [];
   for (const item of processedStory) {
     if (item.pos) {
       const input = document.createElement("input");
       const span = document.createElement("span");
 
       span.setAttribute("class", "opacity");
-      edit.appendChild(input);
-      pre.appendChild(span);
+      editPara.appendChild(input);
+      previewPara.appendChild(span);
 
       input.setAttribute("placeholder", item.pos);
       input.setAttribute("maxlength", "20");
       span.innerHTML = ` ${item.pos}`;
 
+      input.addEventListener("input", (e) => {
+        if (e.target.value === "") {
+          span.innerHTML = ` ${item.pos}`;
+          span.classList.remove("noopacity");
+        } else {
+          span.innerHTML = ` ${e.target.value}`;
+          span.classList.add("noopacity");
+        }
+      });
       input.addEventListener("focus", function () {
         input.style.backgroundColor = "green";
       });
@@ -139,22 +182,18 @@ function madlibsEdit(processedStory) {
         input.style.backgroundColor = "";
       });
 
-      input.addEventListener("input", e => {
-        if (e.target.value === '') {
-          span.innerHTML = ` ${item.pos}`;
-          span.classList.remove("noopacity");
-        } else {
-          span.innerHTML = ` ${e.target.value}`;
-          span.classList.add("noopacity");
-        }
+      resetBtn.addEventListener("click", () => {
+        input.value = "";
+        input.setAttribute("placeholder", item.pos);
+        span.textContent = item.pos;
       });
       newArr.push(input);
     } else {
-      edit.append(` ${item.word} `);
-      pre.append(` ${item.word} `);
+      editPara.append(` ${item.word} `);
+      previewPara.append(` ${item.word} `);
     }
     newArr.forEach((input, i) => {
-      input.addEventListener("keypress", e => {
+      input.addEventListener("keypress", (e) => {
         if (e.key === "Enter") {
           if (i < newArr.length - 1) {
             newArr[i + 1].focus();
@@ -163,11 +202,14 @@ function madlibsEdit(processedStory) {
       });
     });
   }
+  body.appendChild(playMusic);
+  body.appendChild(resetBtn);
+  edit.append(editPara);
+  pre.append(previewPara);
 }
 
-
 getRawStory()
   .then(parseStory)
-  .then(processedStory => {
+  .then((processedStory) => {
     madlibsEdit(processedStory);
   });
diff --git a/sound/24655.mp3:Zone.Identifier b/sound/24655.mp3:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://voicebot.su/en/sound/the-sound-of-the-drum-from-the-movie-jumanji-listen-and-download/
+HostUrl=https://voicebot.su/uploads/sounds/25/24655/24655.mp3
diff --git a/sound/jumanji.mp3 b/sound/jumanji.mp3