Added Dynamic Timer

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;

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>

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);