CodeYourFuture · alibvr · Dec 6, 2021
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,5 +1,29 @@
-function setAlarm() {}
+function setAlarm() {
+  let alarmSet = document.getElementById("alarmSet").value;
+  const timeLeft = document.getElementById("timeRemaining");
 
+  const isInterval = setInterval(() => {
+    const minutes = Math.floor(alarmSet / 60)
+      .toString()
+      .padStart(2, "0");
+    const seconds = (alarmSet % 60).toString().padStart(2, "0");
+    timeLeft.innerText = `Time Remaining: ${minutes}:${seconds}`;
+    if (alarmSet === 0) {
+      clearInterval(isInterval);
+      playAlarm();
+    } else {
+      alarmSet--;
+      console.log(alarmSet);
+    }
+
+    const alarmSound = alarmPlaying(() => {
+      const playButton = document.getElementById("button");
+      if (alarmSet === 0) {
+        alarmPlaying(audio.play);
+      }
+    });
+  }, 1000);
+}
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");

diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -12,6 +12,15 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div> <h1 id="header">Image Carousel. Level  Dome</h1> 
+      <img src="" alt="" id="img">
+      <button id="autoback">Auto Back</button>
+      <button id="back">Back</button>
+      <button id="stop">Stop</button>
+      <button id="forward">Forward</button>
+      <button id="autoforward">Auto Forward</button>
+      <input type="number" id="setTime" value="1000" name="setTime" min="500" max="100000" required>
+    </div>
     <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -1,26 +1,34 @@
-// DO NOT EDIT BELOW HERE
-
-// A function which will return one item, at
-// random, from the given array.
-//
-// Parameters
-// ----------
-// choices: an array of items to pick from.
-//
-// Returns
-// -------
-// One item of the given array.
-//
-// Examples of use
-// ---------------
-// pickFromArray([1,2,3,4])     //maybe returns 2
-// pickFromArray(coloursArray)  //maybe returns "#F38630"
-//
 // You DO NOT need to understand how this function works.
 function pickFromArray(choices) {
   return choices[Math.floor(Math.random() * choices.length)];
 }
 
+const title = document.getElementById("title");
+const author = document.getElementById("author");
+const button = document.getElementById("btn");
+
+button.addEventListener("click", () => {
+  const text = pickFromArray(quotes);
+  // console.log(text, '<<<<<');
+  author.innerText = text.author;
+  title.innerText = text.quote;
+});
+let intervalId = 0;
+
+const auto = document.getElementById("auto");
+auto.addEventListener("click", () => {
+  const checkedValue = document.querySelector("#auto").checked;
+  if (checkedValue === false) {
+    clearInterval(intervalId);
+  } else {
+    intervalId = setInterval(() => {
+      const text = pickFromArray(quotes);
+      author.innerText = text.author;
+      title.innerText = text.quote;
+    }, 6000);
+  }
+});
+
 // A list of quotes you can use in your app.
 // Feel free to edit them, and to add your own favourites.
 const quotes = [

diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,15 @@
 /** Write your CSS in here **/
+body  {
+    margin: 20px;
+    padding: 0;
+    background-color: coral;
+  }
+
+  section {
+      align-items: center;
+      background-color: rgb(255, 255, 255);
+      border: 1px solid #000;
+      width: 50%;
+      margin: auto;
+      padding: 20px;
+  }