CodeYourFuture · Jamesdiop · Aug 14, 2020 · Aug 14, 2020 · Aug 14, 2020
diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,36 @@
-function setAlarm() {}
+
+
+
+function setAlarm() {
+  //Access to the DOM
+  let timeRemaining = document.getElementById('timeRemaining');
+  let alarmSet = document.getElementById('alarmSet');
+
+  let inputNumber = alarmSet.value;
+  let minutes = Math.floor(inputNumber/60);
+  let seconds = inputNumber % 60;
+
+  let interval = setInterval(() => {
+    if (minutes > 0 && seconds === 0) {
+      minutes--;
+      seconds = 59;
+    }
+
+    if (seconds === 0) {
+      clearInterval(interval);
+      audio.play();
+      let bgClock = document.body.style.backgroundColor = "magenta";
+      bgClock.reset();
+    }
+
+    timeRemaining.innerHTML = 'Time Remaining: ' + minutes + ':' + seconds;
+    seconds--;
+  }, 1000);
+
+  audio.pause();
+}
+
+
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Week-3/Homework/mandatory/1-alarmclock/index.html b/Week-3/Homework/mandatory/1-alarmclock/index.html
@@ -17,7 +17,8 @@
       <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <div>
         Set Time to:
-        <input id="alarmSet" type="number" />
+        <input type="number" 
+        id="alarmSet"/>
       </div>
       <div>
         <button id="set" type="button">Set Alarm</button>

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html
@@ -11,7 +11,48 @@
     />
     <link rel="stylesheet" href="style.css" />
   </head>
+  <body>
+    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Quote Generator</title>
+    <script
+      src="https://kit.fontawesome.com/0ac2206fb4.js"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
   <body>
     <!-- Write your HTML in here -->
+    <div class="quote-container" id="quote-container">
+      <!-- Quote -->
+      <div class="quote-text">
+        <i class="fas fa-quote-left"></i>
+        <span id="quote"> </span>
+      </div>
+      <!-- Author -->
+      <div class="quote-author">
+        <span id="author"> </span>
+      </div>
+      <!-- Buttons -->
+      <div class="button-container">
+        <button>
+
+        </button>
+        <button id="new-quote">
+          New Quote
+        </button>
+      </div>
+    </div>
+  </body>
+  <script src="quotes.js"></script>
+</html>
+
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
@@ -1,4 +1,28 @@
-// DO NOT EDIT BELOW HERE
+const quoteText = document.getElementById("quote");
+const authorText = document.getElementById("author");
+const newQuoteBtn = document.getElementById("new-quote");
+
+async function getQuote() {
+  try {
+    const response = await pickFromArray(quotes);
+    const data = await response;
+    quoteText.innerText = data.quote;
+    authorText.innerText = data.author;
+
+  } catch (error) {
+    console.log("I'm sorry there's no more quotes to display");
+  }
+}
+
+//On load
+getQuote();
+
+//Event listener on Button Click function
+newQuoteBtn.addEventListener("click", getQuote);
+
+
+// // DO NOT EDIT BELOW HERE
+
 
 // A function which will return one item, at
 // random, from the given array.

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css
@@ -1 +1,25 @@
 /** Write your CSS in here **/
+body{
+    background-color: #f5af18;
+    display: flex;
+}
+.container {
+    margin-top: 100px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.container div {
+  min-width: 500px;
+  min-height: 200px;
+  background-color: white;
+
+}
+div button {
+    display: inline;
+    flex-direction: column;
+    margin: 10px;
+
+}
+
diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+l<!DOCTYPE html>
 <html>
   <head>
     <title>Slideshow</title>
-    <script src="slideshow.js"></script>
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -13,5 +13,27 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div>
+      <div class="image-set">
+        <img id="image-slider" src="" alt="image gallery" />
+      </div>
+      <div class="button-container">
+        <button id="auto-forward">
+          AutoForward
+        </button>
+        <button id="forward">
+          Forward
+        </button>
+        <button id="stop">
+          Stop
+        </button>
+        <button id="backward">
+          Backward
+        </button>
+        <button id="auto-backward">
+          AutoBackward
+        </button>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js
@@ -1 +1,54 @@
 // Write your code here
+let imgArray =[];
+
+
+// selectors 
+let autoForwardBtn = document.querySelector("#auto-forward");
+let forwardBtn = document.querySelector("#forward");
+let stopBtn = document.querySelector("#stop");
+let backwardBtn = document.querySelector("#backward");
+let autoBackwardBtn = document.querySelector("#auto-backward");
+
+let i = 0;
+document.getElementById("image-slider").src = imgArray[0];
+
+// forward slide function 
+function forward() {
+    if (i === imgArray.length - 1) {
+        i = 0;
+    } else i++;
+    document.getElementById("image-slider").src = imgArray[i];
+}
+
+// backward slide function 
+function backward() {
+    if (i === 0) {
+        i = imgArray.length - 1;
+    } else i--;
+    document.getElementById("image-slider").src = imgArray[i];
+}
+
+// event listener for auto forward button 
+autoForwardBtn.addEventListener("click", function () {
+    let interval = setInterval(forward, 3000);
+    // stop button event listener 
+    stopBtn.addEventListener("click", function () {
+        clearInterval(interval);
+    });
+});
+
+// event listeners for forward button 
+forwardBtn.addEventListener("click", forward);
+
+// event listener for backward button 
+backwardBtn.addEventListener("click", backward);
+
+// event listener for auto backward button 
+autoBackwardBtn.addEventListener("click", function () {
+    let interval = setInterval(backward, 3000);
+
+    // stop button event listener 
+    stopBtn.addEventListener("click", function () {
+        clearInterval(interval);
+    });
+});