CodeYourFuture · selinahussain · Aug 3, 2020 · Aug 3, 2020
diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js
@@ -1,4 +1,31 @@
-function setAlarm() {}
+function setAlarm() {
+  let inputValue = document.getElementById("alarmSet").value;
+  let remainingTime = document.getElementById("timeRemaining");
+
+  let min = Math.floor(inputValue / 60);
+  let sec = inputValue % 60;
+
+  let bgClock = document.querySelector(".centre");
+  let colorForBg = ["blue", "red", "green", "pink"];
+
+  let interval = setInterval(() => {
+    remainingTime.textContent = `Time Remaining: ${min}:${sec}`;
+    if (sec === 0) {
+      sec = 60;
+      min--;
+    }
+    sec--;
+
+    if (min < 0) {
+      playAlarm();
+      clearInterval(interval);
+      setInterval(() => {
+        bgClock.style.backgroundColor =
+          colorForBg[Math.floor(Math.random() * colorForBg.length)];
+      }, 500);
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Week-3/Homework/mandatory/1-alarmclock/index.html b/Week-3/Homework/mandatory/1-alarmclock/index.html
@@ -9,7 +9,7 @@
       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
       crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="style.css" /> 
   </head>
 
   <body>
@@ -25,4 +25,4 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       </div>
     </div>
   </body>
-</html>
+</html>
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"
@@ -13,5 +13,25 @@
   </head>
   <body>
     <!-- Write your HTML in here -->
+    <div class="container info">
+      <div class="row d-flex justify-content-center align-items-center">
+        <blockquote class="blocks text-center">
+          <h2 class="quote">
+            Minim nisi occaecat magna esse quis in aliqua sunt laborum sint
+            laboris.
+          </h2>
+          <p class="author">Author</p>
+          <button
+            type="button"
+            type="submit"
+            value="next"
+            class="btn btn-primary mt-1"
+          >
+            New Quote
+          </button>
+        </blockquote>
+      </div>
+    </div>
+    <script defer 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
@@ -1,3 +1,22 @@
+let mainBody = document.querySelector("body");
+let quoteInfo = document.querySelector("h2");
+let authorOfQuote = document.querySelector("p");
+let newQuoteBtn = document.querySelector(".btn");
+
+//let colours = ["f4ab3c", "#f43c76", "#3cf4ba", "#3c76f4", "#f45e3c"];
+
+newQuoteBtn.addEventListener("click", function () {
+  let randomQuote = Math.floor(Math.random() * quotes.length);
+  quoteInfo.textContent = quotes[randomQuote].quote;
+  authorOfQuote.textContent = quotes[randomQuote].author;
+
+  //let randomColour = Math.floor(Math.random() * colours.length);
+
+  // mainbody.style.backgroundColor = randomColour;
+  // authorOfQuote.style.color = randomColour;
+  // newQuoteBtn.style.backgroundColor = randomColour;
+});
+
 // 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,31 @@
 /** Write your CSS in here **/
+body {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background-color: #f4ab3c;
+}
+
+.info {
+  background-color: white;
+  height: 400px;
+  margin-top: 5em;
+  margin-bottom: 5em;
+  width: 60%;
+  text-align: center;
+}
+
+h2 {
+  padding-top: 2.5em;
+  color: #f4ab3c;
+}
+
+p {
+  padding-top: 2.5em;
+  color: #f4ab3c;
+}
+
+.btn {
+  background-color: #f4ab3c;
+  color: white;
+}