CodeYourFuture · iggajewski · Jul 31, 2020 · Jul 31, 2020 · Aug 1, 2020
diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,65 @@
-function setAlarm() {}
+function printTime(time) {
+  var timerEl = document.getElementById("timeRemaining");
+
+  if (time < 600  &&  time % 60 >= 10) {
+    timerEl.innerHTML = `Time Remaining: 0${Math.floor(time / 60)}:${time % 60}`;
+  }
+  else if (time < 600  &&  time % 60 < 10) {
+    timerEl.innerHTML = `Time Remaining: 0${Math.floor(time / 60)}:0${time % 60}`;
+  }
+  else if (time % 60 >= 10) {
+    timerEl.innerHTML = `Time Remaining: ${Math.floor(time / 60)}:${time % 60}`;
+  }
+  else {
+    timerEl.innerHTML = `Time Remaining: ${Math.floor(time / 60)}:0${time % 60}`;
+  }
+}
+
+function flashingBackground() {
+  let redBackground = false;
+
+  let flashingBackground = setInterval(function() {
+    if(!redBackground) {
+      document.body.style.backgroundColor = `#ff5555`;
+      redBackground = true;
+    }
+    else {
+      document.body.style.backgroundColor = "white";
+      redBackground = false;
+    }
+
+    document.getElementById("stop").addEventListener("click", () => {
+      document.body.style.backgroundColor = "white";
+      clearInterval(flashingBackground);
+    });
+  }, 250);
+}
+
+
+var clockIsRunning = false;
+
+function setAlarm() {
+  if(clockIsRunning) {
+    return
+  }
+  clockIsRunning = true;
+
+  let time = document.getElementById("alarmSet").value;
+  printTime(time);
+
+  var countdown = setInterval(function() {
+    printTime(--time);
+
+    if(time === 0) {
+      playAlarm();
+      flashingBackground()
+      clockIsRunning = false;
+      clearInterval(countdown);
+    }
+  }, 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
@@ -11,7 +11,21 @@
     />
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <!-- Write your HTML in here -->
+    <div id="generator">
+      <h1 id="quote-content">Click The button to generate a quote</h2>
+      <h2 id="author"><i>version 1.0</i></h2>
+      <div id="actions">
+        <div id="auto-switch">
+          <p>Toggle automatic generation:</p>
+          <label class="switch">
+            <input type="checkbox" id="auto-generation">
+            <span class="slider"></span>
+          </label>
+        </div>
+        <button id="get-new" type="button">New quote</button>
+      </div>
+    </div>
   </body>
-</html>
+</html>
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js
@@ -1,3 +1,29 @@
+function generateQuote() {
+  let q = pickFromArray(quotes);
+  document.getElementById("quote-content").innerHTML = `“${q.quote}”`;
+  document.getElementById("author").innerHTML = `- <i>${q.author}</i>`;
+}
+
+function setup() {
+  document.getElementById("get-new").addEventListener("click", generateQuote);
+
+  var toggleSwitch = document.getElementById("auto-generation");
+
+  toggleSwitch.addEventListener("change", function() {
+    if(this.checked) {     
+      document.querySelector("#auto-switch > p").innerHTML = "auto-play: on";
+      setTimeout(generateQuote, 2000);
+      autoGeneration = setInterval(generateQuote, 60000);
+    } 
+    else {
+      document.querySelector("#auto-switch > p").innerHTML = "auto-play: off";
+      clearInterval(autoGeneration);
+    }
+});
+}
+
+window.onload = setup;
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at

diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css
@@ -1 +1,107 @@
 /** Write your CSS in here **/
+body {
+    display:flex;
+    justify-content: center;
+    background-color: #f3a83b;
+}
+
+#generator {
+    margin-top: 150px;
+    padding: 64px;
+    text-align: right;
+    background-color: white;
+    width: 40%;
+}
+
+#quote-content {
+    color: #f3a83b;
+    text-align: left;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+#author {
+    color: #f3a83b;
+    font-size: 24px;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    margin-top: 24px;
+    margin-bottom: 28px;
+}
+
+#actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#get-new {
+    text-align: right;
+    border: none;
+    background-color: #f3a83b;
+    padding: 12px 16px;
+    font-size: 24px;
+    color: white;
+}
+
+/*CSS for automatic generation switch*/
+
+#auto-switch {
+    color: #f3a83b;
+    font-size: 20px;
+    text-align: left;
+}
+
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+  }
+
+/* Hide default HTML checkbox */
+.switch input {
+opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  /* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    border-radius: 34px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    border-radius: 50%;
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #f3a83b;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #f3a83b;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1056251.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1056251.jpeg
diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1543793.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1543793.jpeg
diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1787414.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-1787414.jpeg
diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-236606.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-236606.jpeg
diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2558605.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2558605.jpeg
diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2643812.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2643812.jpeg
diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2870353.jpeg b/Week-3/Homework/mandatory/3-slideshow/images/pexels-photo-2870353.jpeg
diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html
@@ -12,6 +12,15 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <div id="main">
+      <img id="slide-image" src=# alt="slideshow image">
+      <div id="navigation">
+        <button id="auto-back" type="button">AUTO BACK</button>
+        <button id="back" type="button">BACK</button>
+        <button id="stop" type="button">STOP</button>
+        <button id="forward" type="button">FORWARD</button>
+        <button id="auto-forward" type="button">AUTO FORWARD</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,76 @@
-// Write your code here
+var image;
+var auto;
+var index = 0;
+var autoSwitchedOn = false;
+
+function moveBack() {
+    if(index <= 0) {
+        index = imageFilenames.length - 1;
+        image.src = "images/" + imageFilenames[index];
+    }
+    else {
+        image.src = "images/" + imageFilenames[--index];
+    }
+}
+
+function moveForward() {
+    if(index >= imageFilenames.length - 1) {
+        index = 0;
+        image.src = "images/" + imageFilenames[index];
+    }
+    else {
+        image.src = "images/" + imageFilenames[++index];
+    }
+}
+
+function autoMoveBack() {
+    if(autoSwitchedOn) {
+        return;
+    }
+    else {
+        autoSwitchedOn = true;
+        moveBack();
+        auto = setInterval(moveBack, 5000);
+    }
+}
+
+function autoMoveForward() {
+    if(autoSwitchedOn) {
+        return;
+    }
+    else {
+        autoSwitchedOn = true;
+        moveForward();
+        auto = setInterval(moveForward, 5000);
+    }
+}
+
+function stopAutoMovement() {
+    autoSwitchedOn = false;
+    clearInterval(auto);
+}
+
+function setup() {
+    image =  document.getElementById("slide-image");
+    image.src = "images/" + imageFilenames[index];   
+
+    document.getElementById("back").addEventListener("click", moveBack);
+    document.getElementById("forward").addEventListener("click", moveForward);
+    document.getElementById("auto-back").addEventListener("click", autoMoveBack);
+    document.getElementById("auto-forward").addEventListener("click",  autoMoveForward);
+    document.getElementById("stop").addEventListener("click", stopAutoMovement);
+}
+
+window.onload = setup;
+
+/* IMAGE DATABASE: */
+
+var imageFilenames = [
+    "pexels-photo-236606.jpeg",
+    "pexels-photo-1056251.jpeg",
+    "pexels-photo-1543793.jpeg",
+    "pexels-photo-1787414.jpeg",
+    "pexels-photo-2558605.jpeg",
+    "pexels-photo-2643812.jpeg",
+    "pexels-photo-2870353.jpeg"
+];
diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css
@@ -1 +1,55 @@
 /** Write your CSS in here **/
+#main {
+    display:flex;
+    flex-direction:column;
+    align-items: center;
+    margin-top: 128px;
+
+}
+
+#navigation {
+    display:flex;
+    max-width: 809px;
+    height: 52px;
+    margin-top: 24px;
+}
+
+#navigation button {
+    width: 96px;
+    padding: 0px 16px;
+    border-radius: 8px;
+    font-size: 12px;
+    color: white;
+    background-color: #1C2030;
+    border: none;
+    text-align: center;
+}
+
+#navigation button:nth-of-type(1) {
+    border-radius: 32px 8px 8px 32px;
+}
+
+#navigation button:nth-of-type(2) {
+    margin-left: 6px;
+}
+
+#navigation button:nth-of-type(3) {
+    width: 64px;
+    margin-left: 6px;
+    margin-right: 6px;
+
+}
+#navigation button:nth-of-type(4) {
+    margin-right: 6px;
+
+}
+
+#navigation button:nth-of-type(5) {
+    border-radius: 8px 32px 32px 8px;
+}
+
+#slide-image {
+    width: 100%;
+    max-height: 500px;
+    max-width: 809px;
+}