From ce0e2bf9bcb880999cda97b1662629317b6b58b1 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Mon, 13 Jun 2022 20:53:17 -0700
Subject: [PATCH] Added Dynamic Timer

---
 css/general.css |  6 +++---
 index.html      |  3 ++-
 js/timer.js     | 29 +++++++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 js/timer.js

diff --git a/css/general.css b/css/general.css
index a119f19..73f110e 100644
--- a/css/general.css
+++ b/css/general.css
@@ -164,8 +164,8 @@ nav li a:focus::after{
   animation-timing-function: linear;
 }
 
-#timer-text {
-  color: gray;
+#timer {
+  color: rgb(184, 184, 184);
   animation: blinking 2s infinite;
 }
 
@@ -174,7 +174,7 @@ nav li a:focus::after{
     opacity: 1;
   }
   50% {
-    opacity: 0.5;
+    opacity: 0.7;
   }
   100% {
     opacity: 1;
diff --git a/index.html b/index.html
index 19ead99..d21755e 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@
                 <li><a onclick="uncheck('check')" href="#team">Team</a></li>
             </ul>
             <div id="banner">
-                <p id="banner-text">Next event:<br>Opening Ceremony, <span id="timer-text">2mo</span></p>
+                <p id="banner-text">Next event:<br>Opening Ceremony, <span id="timer"></span></p>
             </div>
         </div>
     </nav>
@@ -678,6 +678,7 @@
 <!-- JavaScript Refs -->
 <script src="js/scroll_nav.js"></script>
 <script src="js/scroll_element.js"></script>
+<script src="js/timer.js"></script>
 <script src="js/data_checkbox.js"></script>
 <script src="js/map.js"></script>
 </body>
diff --git a/js/timer.js b/js/timer.js
new file mode 100644
index 0000000..71c23d8
--- /dev/null
+++ b/js/timer.js
@@ -0,0 +1,29 @@
+// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
+// Set the date we're counting down to
+var countDownDate = new Date("Aug 12, 2022 16:00:00").getTime();
+
+// Update the count down every 1 second
+var x = setInterval(function() {
+
+  // Get today's date and time
+  var now = new Date().getTime();
+
+  // Find the distance between now and the count down date
+  var distance = countDownDate - now;
+
+  // Time calculations for days, hours, minutes and seconds
+  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+  // Display the result in the element with id="demo"
+  document.getElementById("timer").innerHTML = days + "d " + hours + "h";
+  // + minutes + "m " + seconds + "s ";
+
+  // If the count down is finished, write some text
+  if (distance < 0) {
+    clearInterval(x);
+    document.getElementById("timer").innerHTML = "NOW";
+  }
+}, 1000);
\ No newline at end of file