CodeYourFuture · GTabala · Jul 27, 2020 · Jul 28, 2020 · Jul 31, 2020 · Jul 31, 2020
diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,81 @@
-function setAlarm() {}
+let isPause = false;
+let onPause = false;
+let timeLeft = 0;
+let countDown;
+let onAlarm = false;
+
+function flashBack() {
+  let alarmColors = ["red", "white"];
+  let count = 0;
+  let isAlarm = setInterval(() => {
+    count++;
+    document.body.style.backgroundColor = alarmColors[count % 2];
+  }, 200);
+  document.getElementById("stop").addEventListener("click", () => {
+    document.body.style.backgroundColor = "white";
+    onAlarm = false;
+    return clearInterval(isAlarm);
+  });
+}
+
+function setAlarm() {
+  let alarmSet = document.getElementById("alarmSet");
+  if (!onAlarm) {
+    if (!isPause) {
+      timeLeft = Number(alarmSet.value);
+      if (timeLeft > 0) {
+        let setButton = document.getElementById("set");
+        setButton.textContent = "Pause";
+        isPause = true;
+        let timeRemaining = document.getElementById("timeRemaining");
+        countDown = setInterval(function () {
+          let minLeft = Math.floor(timeLeft / 60);
+          let secLeft = timeLeft % 60;
+          timeRemaining.textContent = `Time Remaining: ${("0" + minLeft).slice(
+            -2
+          )}:${("0" + secLeft).slice(-2)}`;
+          if (!timeLeft) {
+            playAlarm();
+            flashBack();
+            isPause = false;
+            onAlarm = true;
+            setButton.textContent = "Set Alarm";
+            return clearInterval(countDown);
+          }
+          timeLeft--;
+        }, 1000);
+      }
+    } else {
+      if (!onPause) {
+        let setButton = document.getElementById("set");
+        setButton.textContent = "Continue";
+        onPause = true;
+        return clearInterval(countDown);
+      } else {
+        let setButton = document.getElementById("set");
+        setButton.textContent = "Pause";
+        onPause = false;
+        let timeRemaining = document.getElementById("timeRemaining");
+        countDown = setInterval(function () {
+          let minLeft = Math.floor(timeLeft / 60);
+          let secLeft = timeLeft % 60;
+          timeRemaining.textContent = `Time Remaining: ${("0" + minLeft).slice(
+            -2
+          )}:${("0" + secLeft).slice(-2)}`;
+          if (!timeLeft) {
+            playAlarm();
+            flashBack();
+            isPause = false;
+            onAlarm = true;
+            setButton.textContent = "Set Alarm";
+            return clearInterval(countDown);
+          }
+          timeLeft--;
+        }, 1000);
+      }
+    }
+  }
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/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"
@@ -12,6 +12,10 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <!-- <div id="quoteHolder">
+      <p>efgsdf</p>
+      <p>dfdf</p>
+    </div> -->
+    <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
@@ -490,3 +490,44 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
+
+let colors = ["#70B7D6", "#9C70D6", "#D6CD70", "#D6707C", "#0D2958"];
+
+let div = document.createElement("div");
+div.style.backgroundColor = "white";
+div.style.margin = "auto";
+div.style.marginTop = "250px";
+div.style.width = "500px";
+div.style.hight = "500px";
+div.style.alignContent = "center";
+div.style.padding = "50px";
+
+let p = document.createElement("p");
+let p1 = document.createElement("p");
+p.style.fontWeight = "bold";
+p1.style.textAlign = "right";
+
+document.body.appendChild(div);
+
+let btn = document.createElement("button");
+btn.innerText = "New quote";
+//btn.style.";
+div.appendChild(p);
+div.appendChild(p1);
+div.appendChild(btn);
+
+
+
+function getQoute() {
+  let newQuote = pickFromArray(quotes);
+  let qouteColor = pickFromArray(colors);
+  let p = document.querySelectorAll("p");
+  p[0].innerText = newQuote.quote;
+  p[1].innerText = newQuote.author;
+  p[0].style.color = qouteColor;
+  p[1].style.color = qouteColor;
+  document.body.style.backgroundColor = qouteColor;
+}
+getQoute();
+
+btn.addEventListener("click", getQoute);
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css
@@ -1 +0,0 @@
-/** Write your CSS in here **/

diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html
@@ -2,7 +2,7 @@
 <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,6 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <script src="slideshow.js"></script>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/3-slideshow/pict/fireStation.jpg b/Week-3/Homework/mandatory/3-slideshow/pict/fireStation.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/pict/flower.jpg b/Week-3/Homework/mandatory/3-slideshow/pict/flower.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/pict/highroad.jpg b/Week-3/Homework/mandatory/3-slideshow/pict/highroad.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/pict/hotel.jpg b/Week-3/Homework/mandatory/3-slideshow/pict/hotel.jpg
diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js
@@ -1 +1,113 @@
-// Write your code here
+// Array of images.
+let imgs = [
+  { src: "pict/flower.jpg", alt: "flower" },
+  { src: "pict/fireStation.jpg", alt: "fire station" },
+  { src: "pict/hotel.jpg", alt: "hotel" },
+  { src: "pict/highroad.jpg", alt: "highroad" },
+];
+// Ctreate an element for displaying images
+let div = document.createElement("div");
+div.style.border = "solid green 15px";
+// Create image element
+document.body.appendChild(div);
+let img = document.createElement("img");
+
+// Set styles 
+img.style.height = "100%";
+img.style.width = "100%";
+div.style.width = "70%";
+
+div.appendChild(img);
+// Initialize counter and display first image
+var count = 0;
+img.src = imgs[count].src;
+img.alt = imgs[count].alt;
+
+// Create buttons
+let btnAutoBack = document.createElement("button");
+let btnBack = document.createElement("button");
+let btnStop = document.createElement("button");
+let btnForward = document.createElement("button");
+let btnAutoForward = document.createElement("button");
+// Create container for the buttons
+let btnHolder = document.createElement("div");
+document.body.appendChild(btnHolder);
+btnHolder.style.width = "70%";
+
+// Set styles for the buttons
+btnAutoBack.style.height = "50px";
+btnAutoBack.style.width = "20%";
+btnBack.style.height = "50px";
+btnBack.style.width = "20%";
+btnStop.style.height = "50px";
+btnStop.style.width = "20%";
+btnForward.style.width = "20%";
+btnForward.style.height = "50px";
+btnAutoForward.style.height = "50px";
+btnAutoForward.style.width = "20%";
+
+// Layout of the buttons
+document.body.style.display = "flex";
+document.body.style.flexWrap = "wrap";
+document.body.style.justifyContent = "center";
+
+// Set names of the buttons
+btnAutoBack.innerText = "Auto back";
+btnBack.innerText = "Back";
+btnStop.innerText = "Stop";
+btnForward.innerText = "Forward";
+btnAutoForward.innerText = "Auto forward";
+
+// Add the buttons to the container
+btnHolder.appendChild(btnAutoBack);
+btnHolder.appendChild(btnBack);
+btnHolder.appendChild(btnStop);
+btnHolder.appendChild(btnForward);
+btnHolder.appendChild(btnAutoForward);
+
+
+// Initialize auto mode
+let auto = false;
+// Definition of moving images function
+function moveImg(forward = true) {
+  if (forward) {
+    if (count < imgs.length - 1) {
+      count++;
+    } else {
+      count = 0;
+    }
+  } else {
+    if (!count) {
+      count = imgs.length;
+    }
+    count--;
+  }
+  img.src = imgs[count].src;
+  img.alt = imgs[count].alt;
+}
+
+// Add event listener to Back button
+btnBack.addEventListener("click", () => !auto ? moveImg(false): NaN);
+// Add event listener to Auto Forward button
+btnForward.addEventListener("click",() => !auto ? moveImg(): NaN);
+
+let interval;
+
+btnAutoForward.addEventListener("click", () => {
+  if(!auto)
+  {auto = true;
+  interval = setInterval(moveImg, 1000);}
+});
+
+btnAutoBack.addEventListener("click", () => {
+  if(!auto)
+  {auto = true;
+  interval = setInterval(() => moveImg(false), 1000);}
+});
+
+function stop(){
+  auto = false;
+  clearInterval(interval);
+}
+// Add event listener to Stop button
+btnStop.addEventListener("click", stop);
diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css
@@ -1 +0,0 @@
-/** Write your CSS in here **/