CodeYourFuture · Johng117 · Oct 15, 2021 · Oct 21, 2021
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,17 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}\\mandatory\\3-slideshow\\slideshow.js"
+        }
+    ]
+}
diff --git a/mandatory/1-alarmclock/alarmclock.js b/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,48 @@
-function setAlarm() {}
+function setAlarm() {
+  // this gets a value from the inputted number then resets the input box
+  let timeValue = document.getElementsByTagName("input")[0].value;
+  document.getElementsByTagName("input")[0].value = "";
+  // this function formats the digits of the alarm
+  function twoDigs(num) {
+    return (num < 10 ? "0" : "") + num;
+  }
+  let colours = ["red", "orange", "green", "blue", "purple"];
+  function colourChanger() {
+    let colour = colours[Math.floor(Math.random() * 5)];
+    document.body.style.background = colour;
+  }
+
+  // this function sets and decreases the 'time remaining' value
+  function countDown() {
+    let remaining = document.getElementById("timeRemaining");
+    let seconds = timeValue % 60;
+    let minutes = (timeValue - seconds) / 60;
+    if (timeValue >= 0) {
+      remaining.innerHTML = `Time Remaining: ${twoDigs(minutes)}:${twoDigs(
+        seconds
+      )}`;
+    }
+    if (timeValue === 0) {
+      setInterval(colourChanger, 1000)
+      playAlarm();
+    }
+    timeValue -= 1;
+  }
+  let intervalId;
+  function stopStart() {
+    if (!intervalId) {
+      intervalId = setInterval(countDown, 1000);
+      document.getElementById("pause").addEventListener("click", () => {
+        clearInterval(intervalId);
+        intervalId = null;
+      });
+      document.getElementById("continue").addEventListener("click", () => {
+        intervalId = setInterval(countDown, 1000);
+      });
+    }
+  }
+  stopStart();
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/mandatory/1-alarmclock/index.html b/mandatory/1-alarmclock/index.html
@@ -22,6 +22,8 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <div>
         <button id="set" type="button">Set Alarm</button>
         <button id="stop" type="button">Stop Alarm</button>
+        <button id="pause" type="button">Pause</button>
+        <button id="continue" type="button">Continue</button>
       </div>
     </div>
     <script src="alarmclock.js"></script>

diff --git a/mandatory/2-quotegenerator/index.html b/mandatory/2-quotegenerator/index.html
@@ -10,8 +10,21 @@
     />
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body>
-    <!-- Write your HTML in here -->
+    <div id="quote-box">
+      <p id="quote-text">This is a quote!</p>
+      <p id="quoter">Says I</p>
+      <div class="button-container">
+        <button id="change-button">New Quote</button>
+      </div>
+    </div>
+    <div class="toggle-container">
+    <h6>Autoquote</h6>
+    <label for="switch" class="toggle">
+      <input type="checkbox" name="autoplay" id="switch" class="checkbox" />
+        <div class="toggle-content"></div>
+    </label>
+    <h6>Off On</h6>
+    </div>
     <script src="quotes.js"></script>
   </body>
 </html>
diff --git a/mandatory/2-quotegenerator/quotes.js b/mandatory/2-quotegenerator/quotes.js
@@ -20,6 +20,40 @@
 function pickFromArray(choices) {
   return choices[Math.floor(Math.random() * choices.length)];
 }
+// created a function that gets a quote from the quotes array and changes innerHTML to that quote     
+function quoteGen() {
+  let quote = document.getElementById("quote-text").innerHTML;
+  let wisePerson = document.getElementById("quoter").innerHTML;
+  let quoteObject = pickFromArray(quotes);
+  quote = quoteObject.quote;
+  wisePerson = quoteObject.author;
+  document.getElementById("quote-text").innerHTML = `"${quote}"`;
+  document.getElementById("quoter").innerHTML = `- ${wisePerson}`;
+}
+// this function calls the quoteGen function when the window loads
+window.onload = function () {
+  quoteGen();
+};
+// added a click event to the button
+const clicker = document.getElementById("change-button");
+clicker.addEventListener("click", quoteGen);
+
+// created a function that calls the quoteGen function at timed intervals when the slider is "on"
+// and stops it when the slider(checkbox) is "off"
+let isOn =null;
+function autoQuote() {
+  let isChecked = document.getElementById("switch").checked;
+  if (isChecked) {
+    isOn=setInterval(quoteGen, 3000);
+  } 
+  if(!isChecked)
+    clearInterval(isOn)
+}
+
+let auto = document.getElementById("switch");
+auto.addEventListener("click", autoQuote);
+
+
 
 // A list of quotes you can use in your app.
 // Feel free to edit them, and to add your own favourites.

diff --git a/mandatory/2-quotegenerator/style.css b/mandatory/2-quotegenerator/style.css
@@ -1 +1,113 @@
 /** Write your CSS in here **/
+body {
+  background-color: seagreen;
+  display: flex;
+  justify-content: center;
+  padding-top: 12rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#quote-box {
+  height: 22rem;
+  width: 80%;
+  background-color: snow;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  box-shadow: 1rem 1rem 2rem;
+  border-radius: 1rem;
+}
+
+#quote-text {
+  margin-top: 5rem;
+  font-size: 1.4rem;
+  width: 90%;
+  text-align: center;
+  color: seagreen;
+}
+
+#quoter {
+  color:seagreen;
+  width: 90%;
+  font-size: 1.1rem;
+  text-align: right;
+  padding-right: 3rem;
+  margin-top: 1rem;
+}
+
+.button-container {
+  width: 90%;
+  text-align: right;
+  padding-right: 3rem;
+}
+
+button {
+  color: snow;
+  background-color: seagreen;
+  border: none;
+  height: 2.4rem;
+  width: 6rem;
+  margin-top: 1rem;
+  border-radius: .2rem;
+}
+
+.toggle-container{
+  display: flex;
+  flex-direction: column;
+  width: 80%;
+  align-items: end;
+  padding-right: 10px;
+}
+
+h6 {
+  font-size: 0.8;
+  color: snow;
+  padding-top: 0.5rem;
+  margin: 0;
+}
+
+.toggle {
+  width: 40px;
+  height: 20px;
+  border-radius: 10px;
+  display:inline-block;
+  cursor: pointer;
+}
+
+.checkbox {
+  display: none;
+}
+
+.toggle-content {
+  position: relative;
+  width: 40px;
+  height: 20px;
+  border-radius: 10px;
+  background: #dddddd;
+  transition: background 0.2s;
+  border: 1px solid snow;
+  margin-top: .8rem;
+}
+
+.checkbox:checked ~ .toggle-content{
+  background: seagreen;
+}
+
+.toggle-content::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background: snow;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  transition: transform 0.2s;
+}
+
+.checkbox:checked ~ .toggle-content::after{
+  transform: translateX(20px);
+}
diff --git a/mandatory/3-slideshow/index.html b/mandatory/3-slideshow/index.html
@@ -11,7 +11,23 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+    <div id="button-container">
+      <button id="auto-back">AUTO-BACK</button>
+      <button id="back">BACK</button>
+      <button id="stop">STOP</button>
+      <button id="forward">FORWARD</button>
+      <button id="auto-forward">AUTO-FORWARD</button>
+      <br />
+    </div>
+    <div id="image-container">
+      <img
+        id="image"
+        src="https://upload.wikimedia.org/wikipedia/commons/8/85/Aankomst_FC_Liverpool_op_Schiphol%2C_voorop_Jan_St._John_achter_hem_Yeats%2C_Bestanddeelnr_919-8533.jpg"
+        alt="random pics"
+      />
+    </div>
+
+    <p>Photos sourced at Unsplash and Wikimedia.</p>
     <script src="slideshow.js"></script>
   </body>
 </html>
diff --git a/mandatory/3-slideshow/slideshow.js b/mandatory/3-slideshow/slideshow.js
@@ -1 +1,64 @@
 // Write your code here
+const pics = [
+  "https://upload.wikimedia.org/wikipedia/commons/8/85/Aankomst_FC_Liverpool_op_Schiphol%2C_voorop_Jan_St._John_achter_hem_Yeats%2C_Bestanddeelnr_919-8533.jpg",
+  "https://upload.wikimedia.org/wikipedia/commons/6/66/Tommy_Smith_%281966%29.jpg",
+  "https://source.unsplash.com/hqKPgEVEc-8",
+  "https://source.unsplash.com/K-x7h4NXtAY",
+  "https://upload.wikimedia.org/wikipedia/commons/f/f4/Goldie_2003_crop.jpg",
+  "https://upload.wikimedia.org/wikipedia/commons/f/f3/Kenny_Dalglish_1980s_%28cropped%29.jpg",
+  "https://upload.wikimedia.org/wikipedia/commons/c/c1/Jimi_Hendrix_Experience_IMA_Auditorium_Flint_1968_poster.jpg",
+  "https://upload.wikimedia.org/wikipedia/commons/a/a1/Saturn_and_Earth_%284078015533%29.jpg"
+];
+// a function to move to the next image in the array
+function slideForward() {
+  let currentImage = document.getElementById("image").src;
+  if (pics.indexOf(currentImage) < pics.length-1) {
+    currentImage = pics[pics.indexOf(currentImage) + 1];
+    document.getElementById("image").src = currentImage;
+  } else {
+    document.getElementById("image").src = pics[0];
+  }
+}
+//  a function to move to the previous image in the array
+function slideBack() {
+  let currentImage = document.getElementById("image").src;
+  if (pics.indexOf(currentImage) < 1) {
+    document.getElementById("image").src = pics[pics.length-1];
+  } else {
+    currentImage = pics[pics.indexOf(currentImage) - 1];
+    document.getElementById("image").src = currentImage;
+  }
+}
+
+let goForward = null;
+let goBackward = null;
+// function that moves forward through the array at a timed interval
+function autoFwd() {
+  clearInterval(goBackward);
+  clearInterval(goForward);
+  goForward = setInterval(slideForward, 1500);
+  goBackward = null;
+}
+// function that moves backward through the array at a timed interval
+function autoBack() {
+  clearInterval(goForward);
+  clearInterval(goBackward);
+  goBackward = setInterval(slideBack, 1500);
+  goForward = null;
+}
+// a function to stop the autoplay functions
+function stopPlay() {
+  clearInterval(goBackward);
+  clearInterval(goForward);
+}
+// assignment of eventListener functions
+const fwdBtn = document.getElementById("forward");
+const backBtn = document.getElementById("back");
+const autoFwdBtn = document.getElementById("auto-forward");
+const autoBackBtn = document.getElementById("auto-back");
+const stopBtn = document.getElementById("stop");
+fwdBtn.addEventListener("click", slideForward, false);
+backBtn.addEventListener("click", slideBack, false);
+autoFwdBtn.addEventListener("click", autoFwd, false);
+autoBackBtn.addEventListener("click", autoBack, false);
+stopBtn.addEventListener("click", stopPlay, false);