CodeYourFuture · leroy-douglas · Aug 1, 2020 · Aug 1, 2020 · Aug 1, 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,110 @@
-function setAlarm() {}
+let countdownTimer = 0, timerPaused = false;
+let flashTimer = 0;
+let alarmed = false;
+let screenToggle = true;
+let minutes = 0, seconds = 0;
+
+const flashScreen = () => {
+  flashTimer = setInterval(() => {
+    let body = document.querySelector("body");
+    if (screenToggle) {
+      body.style.backgroundColor = 'red';
+    }
+    else {
+      body.style.backgroundColor = 'white';
+    }
+    screenToggle = !screenToggle;
+  }, 700);
+}
+const warningMsg = msg => {
+  let errorMsg = document.querySelector("#error-msg");
+  errorMsg.innerHTML = msg;
+  $("#errorModal").modal("show");
+}
+const startCountdown = () => {
+  countdownTimer = setInterval(() => {
+    let mm = "", ss = "";
+    let timer = document.querySelector("#timeRemaining");
+
+    if (seconds > 0) {
+      seconds--;
+    }
+    else {
+      if (minutes > 0) {
+        seconds = 59;
+        minutes--;
+      }
+      else {
+        clearInterval(countdownTimer);
+        countdownTimer = 0;
+        flashScreen();
+        playAlarm();
+        alarmed = true;
+      }
+    }
+    mm = "" + minutes;
+    ss = "" + seconds;
+    if (minutes < 10) { mm = "0" + minutes; }
+    if (seconds < 10) { ss = "0" + seconds; }
+    timer.textContent = `Time Remaining: ${mm}:${ss}`;
+  }, 1000);
+};
+
+const addStopEvtListener = () => {
+  let stop = document.querySelector("#stop");
+  stop.addEventListener('click', () => {
+    if (alarmed) {
+      pauseAlarm();
+      clearInterval(flashTimer);
+      let body = document.querySelector("body");
+      body.style.backgroundColor = 'white';
+      clearFlashTimer = 0;
+      alarmed = false;
+      timerPaused = false;
+    }
+  });
+}
+
+function setAlarm() {
+  if (countdownTimer) return;
+
+  if ((minutes === 0) && (seconds === 0) && (timerPaused === false)) {                                   // Can we reuse existing minutes or seconds
+    let countdown = document.querySelector("#alarmSet");
+    if (countdown.value === "" || parseInt(countdown.value) <= 0) {
+      warningMsg("Invalid time format.<br> Enter seconds [1 - 3599].");
+      return;
+    }
+
+    let value = parseInt(countdown.value, 10); // don't forget the second param
+    let hours = Math.floor(value / 3600);
+    if (hours) {
+      warningMsg("Invalid time format.<br> Too many seconds.");
+      let errorMsg = document.querySelector("#error-msg");
+      return;
+    }
+
+    minutes = Math.floor((value - (hours * 3600)) / 60);
+    seconds = value - (hours * 3600) - (minutes * 60);
+    addStopEvtListener();
+  }
+
+  let timer = document.querySelector("#timeRemaining");
+  let mm = "" + minutes, ss = "" + seconds;
+
+  if (minutes < 10) { mm = "0" + minutes; }
+  if (seconds < 10) { ss = "0" + seconds; }
+  timer.textContent = `Time Remaining: ${mm}:${ss}`;
+  startCountdown(minutes, seconds);
+}
+
+const pauseTimer = () => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
+    countdownTimer = 0;
+    timerPaused = true;
+  }
+};
+
 
 // DO NOT EDIT BELOW HERE
 
@@ -12,6 +118,10 @@ function setup() {
   document.getElementById("stop").addEventListener("click", () => {
     pauseAlarm();
   });
+
+  document.getElementById("pause").addEventListener("click", () => {
+    pauseTimer();
+  });
 }
 
 function playAlarm() {

diff --git a/Week-3/Homework/mandatory/1-alarmclock/index.html b/Week-3/Homework/mandatory/1-alarmclock/index.html
@@ -1,15 +1,34 @@
 <!DOCTYPE html>
-<html>
+<html> 
   <head>
     <title>Alarm Clock</title>
     <script src="alarmclock.js"></script>
+    <link 
+      rel="stylesheet" 
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
     <link
       rel="stylesheet"
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="style.css" />
+    <script 
+      src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
+      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
+      crossorigin="anonymous">
+    </script>
+    <script 
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
+      crossorigin="anonymous">
+    </script>
+    <script 
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 
+      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 
+      crossorigin="anonymous">
+    </script>
   </head>
 
   <body>
@@ -21,8 +40,27 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       </div>
       <div>
         <button id="set" type="button">Set Alarm</button>
+        <button id="pause" type="button">Pause Alarm</button>
         <button id="stop" type="button">Stop Alarm</button>
       </div>
     </div>
+    <!-- Modal HTML -->
+    <div id="errorModal" class="modal fade">
+      <div class="modal-dialog modal-confirm modal-sm">
+        <div class="modal-content">
+          <div class="modal-header">    <!-- modal header -->
+            <div class="icon-box">
+              <i class="tiny material-icons">cancel</i>
+            </div>
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+          </div>
+          <div class="modal-body text-center">  <!--  modal content -->
+            <!--<h4>Ooops!</h4>	-->
+            <p id="error-msg"></p>
+            <button class="btn btn-success" data-dismiss="modal">Try Again</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/Week-3/Homework/mandatory/1-alarmclock/style.css b/Week-3/Homework/mandatory/1-alarmclock/style.css
@@ -13,3 +13,79 @@
 h1 {
   text-align: center;
 }
+
+.modal-confirm {		
+		color: #434e65;
+		width: 525px;
+		margin: 30px auto;
+	}
+	.modal-confirm .modal-content {
+		padding: 20px;
+		font-size: 16px;
+		border-radius: 5px;
+		border: none;
+	}
+	.modal-confirm .modal-header {
+		background: #e85e6c;
+		border-bottom: none;   
+        position: relative;
+		text-align: center;
+		margin: -20px -20px 0;
+		border-radius: 5px 5px 0 0;
+		padding: 35px;
+	}
+	.modal-confirm h4 {
+		text-align: center;
+		font-size: 36px;
+		margin: 10px 0;
+	}
+	.modal-confirm .form-control, .modal-confirm .btn {
+		min-height: 40px;
+		border-radius: 3px; 
+	}
+	.modal-confirm .close {
+        position: absolute;
+		top: 15px;
+		right: 15px;
+		color: #fff;
+		text-shadow: none;
+		opacity: 0.5;
+	}
+	.modal-confirm .close:hover {
+		opacity: 0.8;
+	}
+	.modal-confirm .icon-box {
+		color: #fff;		
+		width: 95px;
+		height: 95px;
+		display: inline-block;
+		border-radius: 50%;
+		z-index: 9;
+		border: 5px solid #fff;
+		padding: 15px;
+		text-align: center;
+	}
+	.modal-confirm .icon-box i {
+		font-size: 58px;
+		margin: -2px 0 0 -2px;
+	}
+	.modal-confirm.modal-dialog {
+		margin-top: 80px;
+	}
+    .modal-confirm .btn {
+        color: #fff;
+        border-radius: 4px;
+		background: #eeb711;
+		text-decoration: none;
+		transition: all 0.4s;
+        line-height: normal;
+		border-radius: 30px;
+		margin-top: 10px;
+		padding: 6px 20px;
+		min-width: 150px;
+        border: none;
+    }
+	.modal-confirm .btn:hover, .modal-confirm .btn:focus {
+		background: #eda645;
+		outline: none;
+	}
diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html
@@ -2,16 +2,27 @@
 <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"
       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="style.css" />
+    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Barlow+Condensed:400,400i,700,700i" rel="stylesheet">
   </head>
   <body>
     <!-- Write your HTML in here -->
+
+      <div id="quote-container">
+        <button id="change-quote">Next Quote</button>
+        <div class="blockquote-wrapper">
+          <div class="blockquote">
+            <h1 id="text"></h1>
+            <h4 id="author"></h4>
+          </div>
+        </div>
+      </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
@@ -1,3 +1,20 @@
+let newQuote = document.querySelector("button");
+
+newQuote.addEventListener('click', function(){
+  selectQuote();
+});
+
+const selectQuote = () => {
+  let quote = pickFromArray(quotes);
+  let quoteText = document.querySelector("#text");
+  let author = document.querySelector("#author");
+
+  quoteText.textContent = quote.quote;
+  author.textContent = `\u2014${quote.author}`;
+}
+
+window.onload = selectQuote;
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at