CodeYourFuture · uzma000 · Oct 21, 2021
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,37 @@
-function setAlarm() {}
+function setAlarm() {
+  let alarm = document.getElementById("alarmSet");
+  let remainingTime = document.getElementById("timeRemaining");
+
+  let startTime = alarm.value;
+
+  let time = startTime * 60;
+
+  let timeRepeat = setInterval(countDown, 1000);
+
+  function countDown() {
+    let min = Math.floor(time / 60);
+    let sec = time % 60;
+    remainingTime.innerText = `Time Remaining: 0${min}:${sec}`;
+    if (time === 0) {
+      remainingTime.innerText = `Time Remaining: 00:00`;
+      clearInterval(timeRepeat);
+      playAlarm();
+
+      let colors = ["blue", "yellow", "green"];
+
+      let index = 0;
+      function showColors() {
+        index = (index + 1) % colors.length;
+        document.querySelector(".centre").style.backgroundColor = colors[index];
+
+        setTimeout(showColors, 1000);
+      }
+      showColors();
+    } else if (time > 0) {
+      time--;
+    }
+  }
+}
 
 // DO NOT EDIT BELOW HERE
 
@@ -23,3 +56,5 @@ function pauseAlarm() {
 }
 
 window.onload = setup;
+
+//new Date(2 * 1000).toISOString().substr(14, 5);
diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -12,6 +12,11 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+
+    <div id="container">
+      <button id="button">Generate new quote!</btn>
+      <p id="newQuote">Press button for new 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,3 +1,11 @@
+let btn = document.getElementById("button");
+let newQuote = document.getElementById("newQuote");
+
+btn.addEventListener("click", () => {
+  let randomQuote = pickFromArray(quotes);
+  newQuote.innerHTML = `${randomQuote.quote} <br> Author: <em> ${randomQuote.author}</em>`;
+});
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at

diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,27 @@
 /** Write your CSS in here **/
+body {
+  background-color: grey;
+}
+
+#newQuote {
+  color: white;
+  font-size: 20px;
+  margin: 6px auto;
+}
+
+#container {
+  background-color: indigo;
+  text-align: center;
+  height: 325px;
+  width: 850px;
+  margin: 150px auto;
+}
+#button {
+  background-color: green;
+  color: white;
+  font-size: 20px;
+  /*height: 35px;
+
+  margin: 5px auto;
+  /*border-radius: 5px;*/
+}
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -12,6 +12,19 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+
+    <h2>Image Slider</h2>
+    <div id="container">
+      <div id="images"></div>
+
+      <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,98 @@
 // Write your code here
+let imagesDiv = document.getElementById("images");
+let image = document.createElement("img");
+image.setAttribute("id", "imageSlide");
+image.style.width = "500px";
+image.style.height = "600px";
+imagesDiv.appendChild(image);
+
+let imageLinks = [
+  "https://images.unsplash.com/photo-1605392320697-45dc80e24bc4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80",
+  "https://images.unsplash.com/photo-1614712549550-6a1c0f488f4f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80",
+  "https://images.unsplash.com/photo-1633701394188-c11a1e6a4e26?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=426&q=80",
+  "https://images.unsplash.com/photo-1633450750940-4eabe49f4722?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80",
+  "https://images.unsplash.com/photo-1629382880588-23253ef2a562?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=327&q=80",
+];
+// Setting random links
+function setLinks() {
+  image.src = imageLinks[Math.floor(Math.random() * imageLinks.length)];
+}
+
+window.onload = setLinks;
+
+//for forward button
+let forwardButton = document.getElementById("forward");
+
+function forward() {
+  let currentImg = document.getElementById("imageSlide");
+  let currentImgIndex = imageLinks.indexOf(currentImg.src);
+  if (currentImgIndex == 4) {
+    currentImg.src = imageLinks[0];
+  } else {
+    currentImg.src = imageLinks[currentImgIndex + 1];
+  }
+}
+
+forwardButton.addEventListener("click", forward);
+
+//for backward button
+let backwardButton = document.getElementById("backward");
+
+function backward() {
+  let currentImg = document.getElementById("imageSlide");
+  let currentImgIndex = imageLinks.indexOf(currentImg.src);
+  if (currentImgIndex == 0) {
+    currentImg.src == imageLinks[0];
+  } else {
+    currentImg.src = imageLinks[currentImgIndex - 1];
+  }
+}
+
+backwardButton.addEventListener("click", backward);
+
+//for Auto Forward button
+let autoForwardButton = document.getElementById("autoForward");
+
+function autoForward() {
+  let currentImg = document.getElementById("imageSlide");
+  let currentImgIndex = imageLinks.indexOf(currentImg.src);
+  showImages();
+  function showImages() {
+    currentImgIndex++;
+    if (currentImgIndex > imageLinks.length - 1) {
+      currentImgIndex = 0;
+    }
+    currentImg.src = imageLinks[currentImgIndex];
+    imgTimeOut = setTimeout(showImages, 1000);
+  }
+}
+
+autoForwardButton.addEventListener("click", autoForward);
+
+// for Auto Backward button
+let autoBackwardButton = document.getElementById("autoBackward");
+
+function autoBackward() {
+  let currentImg = document.getElementById("imageSlide");
+  let currentImgIndex = imageLinks.indexOf(currentImg.src);
+  showImages();
+  function showImages() {
+    currentImgIndex--;
+    if (currentImgIndex < 0) {
+      currentImgIndex = imageLinks.length - 1;
+    }
+    currentImg.src = imageLinks[currentImgIndex];
+    imgTimeOut = setTimeout(showImages, 1000);
+  }
+}
+
+autoBackwardButton.addEventListener("click", autoBackward);
+
+//Stop button
+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,24 @@
 /** Write your CSS in here **/
+
+body {
+  background-color: rgb(65, 62, 62);
+}
+h2 {
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+#buttons {
+  display: flex;
+  justify-content: center;
+}
+#buttons button {
+  background-color: black;
+  color: white;
+  margin: 5px;
+  border-radius: 5px;
+}
+#images {
+  display: flex;
+  justify-content: center;
+}