CodeYourFuture · Haseeb-Khalil · Oct 14, 2021
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,76 @@
-function setAlarm() {}
+function setAlarm() {
+  let newAlarm = document.getElementById("alarmSet");
+  let countDown = document.getElementById("timeRemaining");
+
+  // lets get the value of new alarm time
+  let startTime = newAlarm.value;
+
+  // Lets coverts these minutes to seconds so it's easy to manipulate
+  let time = startTime * 60;
+
+  setInterval(timeRemaining, 1000);
+  ////=== Function to update the remaining time  ===///
+
+  function timeRemaining() {
+    // lets get the minutes by diving the seconds by 60
+    // Math.floor is used to get the lowest number without decimal.
+    let minutes = Math.floor(time / 60);
+
+    // lets get the seconds
+    let seconds = time % 60;
+
+    // if seconds are < 10 then we want 0 + seconds else only seconds
+    //seconds = seconds < 10 ? "0" + seconds : seconds;
+
+    // Lets add the updating time to our countdown timer
+    countDown.innerHTML = `Time Remaining: ${minutes}:${seconds}`;
+
+    // Lets play a sound if time remaining is 0
+    // We can make the sound happen by using `playAlarm()`.
+    if (time === 0) {
+      countDown.innerHTML = `Time Remaining: 00:00`;
+      playAlarm();
+
+      // Lets also add some flashing colors at this point :)
+      let rainbowColors = [
+        "red",
+        "orange",
+        "yellow",
+        "green",
+        "lightBlue",
+        "violet",
+      ];
+      let colorIndex = 0;
+      function displayColors() {
+        // let clock = document.querySelector(".center");
+
+        // clock.style.backgroundColor = rainbowColors[colorIndex];
+
+        document.querySelector(".centre").style.padding = "20px";
+        document.querySelector(".centre").style.borderRadius = "20px";
+        document.querySelector(".centre").style.backgroundColor =
+          rainbowColors[colorIndex];
+        colorIndex = (colorIndex + 1) % rainbowColors.length;
+        alarmTimeOut = setTimeout(displayColors, 1000);
+      }
+      displayColors();
+    } else if (time > 0) {
+      time--;
+    }
+  }
+}
+/////==unable to make the stop alarm button work==//
+
+// function stopAlarm() {
+// let stopButton = document.getElementById("stop");
+// //   stopButton.addEventListener("click", () => {
+// //     clearTimeout(alarmTimeOut);
+// //   });
+// // }
+// stopButton.addEventListener("timeupdate", setAlarm, false);
+// stopButton.removeEventListener("timeupdate", setAlarm);
+
+///======////
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -12,6 +12,10 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div id="container">
+      <button id="Btn">Press for a new quote!</button>
+      <p id="output">Press button to generate a quote.</p>
+    </div>
     <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -1,4 +1,12 @@
-// DO NOT EDIT BELOW HERE
+let button = document.getElementById("Btn");
+let output = document.getElementById("output");
+
+button.addEventListener("click", () => {
+  let randomQuote = pickFromArray(quotes);
+  output.innerHTML = `${randomQuote.quote} <br> Author: <em>${randomQuote.author}</em>`;
+});
+
+/////====== DO NOT EDIT BELOW HERE ======//////
 
 // A function which will return one item, at
 // random, from the given array.

diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,26 @@
 /** Write your CSS in here **/
+body {
+  background-color: lightblue;
+}
+#container {
+  background-color: black;
+  border: 3px dashed red;
+  text-align: center;
+  height: 325px;
+  width: 850px;
+  margin: 150px auto;
+}
+#Btn {
+  background-color: cadetblue;
+  color: white;
+  margin: 30px auto;
+  height: 50px;
+  width: 250px;
+  border-radius: 7px;
+  font-size: 20px;
+}
+#output {
+  color: white;
+  margin: 5px auto;
+  font-size: 24px;
+}
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -12,6 +12,36 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <h2>Image Slider</h2>
+    <div id="container">
+      <!--All Images-->
+      <div id="images">
+        <!--       <img
+          class="imageSlide"
+          src=""
+          alt="Ocean waves on Ile d‘Oléron on the french atlantic coast"
+        />
+        <img class="imageSlide" src="" alt="Water Fall with people in front" />
+        <img
+          class="imageSlide"
+          src=""
+          alt="Brown Bear catching salmon at Brooks Falls in Katmai National Park, Alaska."
+        />
+        <img
+          class="imageSlide"
+          src=""
+          alt="Night view of lake with snow mountains and moon at the back"
+        />
+      --></div>
+      <!--All Buttons-->
+      <div id="buttons">
+        <button id="autoBackward">Auto Backward</button>
+        <button id="backward">Backward</button>
+        <button id="stop">Stop</button>
+        <button id="forward">Forward</button>
+        <button id="autoForward">Auto Forward</button>
+      </div>
+    </div>
     <script src="slideshow.js"></script>
   </body>
 </html>
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js
@@ -1 +1,99 @@
 // Write your code here
+let imagesDiv = document.getElementById("images");
+let img = document.createElement("img");
+img.setAttribute("id", "imageSlide");
+img.style.width = "600px";
+img.style.height = "500px";
+imagesDiv.appendChild(img);
+
+let imgLinks = [
+  "https://images.unsplash.com/photo-1633760737014-b71ea100de2e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1926&q=80",
+  "https://images.unsplash.com/photo-1634055633771-48a7a9d2464a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80",
+  "https://images.unsplash.com/photo-1633122117096-d7aa3f93a1c8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1098&q=80",
+  "https://images.unsplash.com/photo-1634095925899-247a9d209ab9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1171&q=80",
+];
+// Setting random links to our img tag
+function setLinks() {
+  img.src = imgLinks[Math.floor(Math.random() * imgLinks.length)];
+}
+// This will set a random link to img tag every time when page is loaded
+window.onload = setLinks;
+
+////////======Selecting buttons and their functionality========//////////
+
+// selecting forward button and adding Even Listener to it
+let forwardButton = document.getElementById("forward");
+
+function forward() {
+  let currentImg = document.getElementById("imageSlide");
+  let currentImgIndex = imgLinks.indexOf(currentImg.src);
+  if (currentImgIndex == 3) {
+    currentImg.src = imgLinks[0];
+  } else {
+    currentImg.src = imgLinks[currentImgIndex + 1];
+  }
+}
+
+forwardButton.addEventListener("click", forward);
+
+// selecting backward button and adding Even Listener to it
+let backwardButton = document.getElementById("backward");
+
+function backward() {
+  let currentImg = document.getElementById("imageSlide");
+  let currentImgIndex = imgLinks.indexOf(currentImg.src);
+  if (currentImgIndex == 0) {
+    currentImg.src == imgLinks[0];
+  } else {
+    currentImg.src = imgLinks[currentImgIndex - 1];
+  }
+}
+
+backwardButton.addEventListener("click", backward);
+
+// selecting Auto Forward button and adding Even Listener to it
+let autoForwardButton = document.getElementById("autoForward");
+
+function autoForward() {
+  let currentImg = document.getElementById("imageSlide");
+  let currentImgIndex = imgLinks.indexOf(currentImg.src);
+  showImages();
+  function showImages() {
+    currentImgIndex++;
+    if (currentImgIndex > imgLinks.length - 1) {
+      currentImgIndex = 0;
+    }
+    currentImg.src = imgLinks[currentImgIndex];
+    imgTimeOut = setTimeout(showImages, 1000);
+  }
+}
+
+autoForwardButton.addEventListener("click", autoForward);
+
+// selecting Auto Backward button and adding Even Listener to it
+let autoBackwardButton = document.getElementById("autoBackward");
+
+function autoBackward() {
+  let currentImg = document.getElementById("imageSlide");
+  let currentImgIndex = imgLinks.indexOf(currentImg.src);
+  showImages();
+  function showImages() {
+    currentImgIndex--;
+    if (currentImgIndex < 0) {
+      currentImgIndex = imgLinks.length - 1;
+    }
+    currentImg.src = imgLinks[currentImgIndex];
+    imgTimeOut = setTimeout(showImages, 1000);
+  }
+}
+
+autoBackwardButton.addEventListener("click", autoBackward);
+
+// selecting Stop button and adding Even Listener to it
+let stopButton = document.getElementById("stop");
+
+function stopIt() {
+  clearTimeout(imgTimeOut);
+}
+
+stopButton.addEventListener("click", stopIt);
diff --git a/mandatory/3-slideshow/style.css b/mandatory/3-slideshow/style.css
@@ -1 +1,26 @@
 /** Write your CSS in here **/
+body {
+  background-color: cadetblue;
+}
+h2 {
+  background-color: lightskyblue;
+  text-align: center;
+}
+#images {
+  display: flex;
+  justify-content: center;
+}
+#images img {
+  border: 3px dashed red;
+  border-radius: 15px;
+}
+#buttons {
+  display: flex;
+  justify-content: center;
+}
+#buttons button {
+  background-color: purple;
+  color: white;
+  margin: 5px;
+  border-radius: 5px;
+}