Merge pull request #8 from bhuvnaik/timer

timer

index.html

@@ -50,6 +50,13 @@
     </div>
     <div class="logo-overlay">
       <img src="img/logo2.png" alt="Logo">
+      <span id="timer"></span>
+      <style>
+        span{
+          font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+          font-size: xx-large;
+        }
+      </style>
     </div> 
     <div class="black-bg">
       <div class="text-image-container">

src/script.js

@@ -27,6 +27,25 @@ function toggleDropdown() {
 
     // Event listener to check the screen orientation on page load
     checkOrientation();
+    timerElement = document.querySelector("#timer");
+    rhapsodyDate = new Date(2023, 9, 13, 17, 0, 0)
+    setInterval(() => {
+      diff = (rhapsodyDate - Date.now()).valueOf();
+      day_in_ms = 24 * 60 * 60 * 1000
+
+      days = Math.floor(diff / day_in_ms)
+      diff -= days * day_in_ms
+
+      hours = Math.floor(diff / (60 * 60 * 1000))
+      diff -= hours * (60 * 60 * 1000)
+
+      minutes = Math.floor(diff / (60 * 1000))
+      diff -= minutes * (60 * 1000)
+
+      seconds = Math.floor(diff / 1000)
+
+      timer.innerHTML = `${days} Days, ${hours} Hours, ${minutes} Mins, ${seconds} secs`
+    }, 1000);
 
     // Event listener to check the screen orientation on screen resize
     window.addEventListener('resize', checkOrientation);

src/styles.css

@@ -308,4 +308,6 @@ html,body {
   }
 }
 
-
+#timer {
+  color: #ffffff
+  }