CodeYourFuture · aaokunade · Jan 29, 2021 · Feb 3, 2021
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,21 @@
-function setAlarm() {}
+function setAlarm() {
+  let counter = document.getElementById("timeRemaining");
+  let timer = document.getElementById("alarmSet").value;
+  // timer = timer.value - 1;
+  function counterFunc() {
+    //check if seconds has reached  zero to enable alarm sound
+    if (timer < 0) {
+      clearInterval(countDown); //stop the setInterval method
+      playAlarm();
+    } else {
+      //convert the seconds to time and extract the relevant portion
+      const timerVal = new Date(timer * 1000).toISOString().substr(14, 5); //.substr(11,8) to include hr
+      counter.innerText = `Time Remaining: ${timerVal}`;
+      timer -= 1; //decrement the seconds counter by one
+    }
+  }
+  const countDown = setInterval(counterFunc, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <title>Quote Generator</title>
-    <script src="quotes.js"></script>
+
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -13,5 +13,7 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+
   </body>
+  <script src="quotes.js"></script>
 </html>
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -1,3 +1,31 @@
+function quoteGenerator(arr) {
+  let bodyDoc = document.getElementsByTagName("body")[0];
+  let newDiv = document.createElement("div");
+  // document.body.appendChild(newDiv);
+  // console.log(newDiv);
+  let quoteHeader = document.createElement("h2");
+  quoteHeader.innerHTML = arr[0]["quote"];
+  newDiv.appendChild(quoteHeader);
+  // console.log(quoteHeader);
+  let authorHeader = document.createElement("h4");
+  authorHeader.innerHTML = arr[0]["author"];
+  newDiv.appendChild(authorHeader);
+  let newButton = document.createElement("button");
+  newButton.innerHTML = "New Quote";
+  newDiv.appendChild(newButton);
+  bodyDoc.appendChild(newDiv);
+  // console.log(newButton);
+  // console.log(authorHeader);
+  // arr.forEach(function(obj){
+  newButton.addEventListener("click", function () {
+    let randomQuote = Math.floor(Math.random() * arr.length);
+    quoteHeader.innerHTML = arr[randomQuote]["quote"];
+    authorHeader.innerHTML = arr[randomQuote]["author"];
+  });
+  // })
+  // return (quoteHeader, authorHeader);
+}
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at
@@ -23,7 +51,7 @@ function pickFromArray(choices) {
 
 // A list of quotes you can use in your app.
 // Feel free to edit them, and to add your own favourites.
-const quotes = [
+let quotes = [
   {
     quote: "Life isn’t about getting and having, it’s about giving and being.",
     author: "Kevin Kruse",
@@ -490,3 +518,5 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+quoteGenerator(quotes);
diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,38 @@
 /** Write your CSS in here **/
+body{
+    background-color: rgb(197, 127, 255);
+    width:100%;
+    height: 100%;
+    margin:10rem;
+}
+
+div{
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    height: 20%;
+    text-align: center;
+    background-color: rgb(240, 171, 171);
+    margin: 10em;
+}
+
+h2{
+    color:rgba(159, 30, 210);
+    text-align: left;
+    padding: 2em;
+}
+h4{
+    color:rgb(165, 42, 149);
+    text-align: right;
+    margin: 1em;
+}
+
+button{
+    display: flex;
+    /* flex-direction: row; */
+    width: 7em;
+    height: 2em;
+    background-color: rgb(159, 30, 210);
+    text-align: center;
+    margin: 0.5em;
+}
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -2,7 +2,6 @@
 <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 +12,9 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div class = "imgDiv"></div>
+    <div class = "btnDiv"></div>
+    <script src="slideshow.js"></script>
   </body>
+
 </html>
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js
@@ -1 +1,100 @@
-// Write your code here
+let images = [
+  {
+    imageName: "Design 1",
+    imageLink:
+      "https://images.unsplash.com/photo-1577083165350-16c9f88b4a25?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=420&q=80",
+  },
+  {
+    imageName: "Design 2",
+    imageLink:
+      "https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTE4fHxkZXNpZ258ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
+  },
+  {
+    imageName: "Design 3",
+    imageLink:
+      "https://images.unsplash.com/photo-1543248939-ff40856f65d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=333&q=80",
+  },
+  {
+    imageName: "Design 4",
+    imageLink:
+      "https://images.unsplash.com/photo-1519974719765-e6559eac2575?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
+  },
+];
+console.log(images.length);
+
+let divImg = document.querySelector(".imgDiv");
+let headerOne = document.createElement("h1");
+headerOne.innerText = "My Image Carousel";
+divImg.appendChild(headerOne);
+let defaultImg = document.createElement("img");
+defaultImg.src = images[0]["imageLink"];
+divImg.appendChild(defaultImg);
+let imgNam = document.createElement("h4");
+imgNam.innerText = images[0]["imageName"];
+divImg.appendChild(imgNam);
+
+let divBtn = document.querySelector(".btnDiv");
+divImg.appendChild(divBtn);
+
+let backBtn = document.createElement("button");
+backBtn.innerText = "Back";
+divBtn.appendChild(backBtn);
+
+let autoBackBtn = document.createElement("button");
+autoBackBtn.innerText = "Auto Back";
+divBtn.appendChild(autoBackBtn);
+
+let stopBtn = document.createElement("button");
+stopBtn.innerText = "Stop";
+divBtn.appendChild(stopBtn);
+
+let forwardBtn = document.createElement("button");
+forwardBtn.innerText = "Forward";
+divBtn.appendChild(forwardBtn);
+
+let autoForwardBtn = document.createElement("button");
+autoForwardBtn.innerText = "Auto Forward";
+divBtn.appendChild(autoForwardBtn);
+
+let counter = 0;
+let stopBtnInterval;
+
+function forwardBtnFunc() {
+  counter += 1;
+  counter = counter % images.length;
+  defaultImg.src = images[counter]["imageLink"];
+  imgNam.innerText = images[counter]["imageName"];
+  console.log(counter);
+}
+
+function backBtnFunc() {
+  if (counter === 0) {
+    counter = images.length - 1;
+  } else {
+    counter -= 1;
+  }
+  // counter = counter % images.length;
+  defaultImg.src = images[counter]["imageLink"];
+  imgNam.innerText = images[counter]["imageName"];
+  console.log(counter);
+}
+
+function stopBtnFunc() {
+  clearInterval(stopBtnInterval);
+}
+
+function autoForwardFunc() {
+  stopBtnFunc();
+  stopBtnInterval = setInterval(forwardBtnFunc, 1000);
+}
+
+function autoBackFunc() {
+  stopBtnFunc();
+  stopBtnInterval = setInterval(backBtnFunc, 1000);
+}
+
+forwardBtn.addEventListener("click", forwardBtnFunc);
+backBtn.addEventListener("click", backBtnFunc);
+stopBtn.addEventListener("click", stopBtnFunc);
+autoForwardBtn.addEventListener("click", autoForwardFunc);
+autoBackBtn.addEventListener("click", autoBackFunc);
diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css
@@ -1 +1,47 @@
 /** Write your CSS in here **/
+body{
+    width: 100%;
+    height: 100%;
+    background-color: rgb(181, 181, 243);
+}
+
+.imgDiv{
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    height: 30%;
+    /* text-align: center; */
+    background-color: rgb(230, 212, 212);
+    margin: 10em;
+}
+
+.btnDiv{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 20%;
+    /* text-align: center; */
+    /* background-color: rgb(240, 171, 171); */
+    margin: 2em;
+}
+button{
+    display: flex;
+    /* justify-content:space-between; */
+    /* width: 9em;
+    height: 2em; */
+    /* align-items: center; */
+    border-radius: 0.5em; 
+    margin: 0.2em;
+}
+
+img{
+    display: flex;
+    align-content: center;
+    width: 30em;
+    height: 20em;
+    margin: 2em; 
+    /* align-items: center; */
+}
+h4, h1{
+    margin-left:3em;
+}