Update index.html

amadratitus · Nov 8, 2023 · 923aba4 · 923aba4
1 parent 28d1469
commit 923aba4
Showing 1 changed file with 63 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -6,12 +6,73 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+  <style>
+    * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: black;
+}
+
+.container.counter {
+  color: white;
+  text-align: center;
+}
+
+.counter h1 {
+  font-weight: normal;
+}
+
+.counter li {
+  display: inline-block;
+  font-size: 1em;
+  list-style-type: none;
+  padding: 1em;
+  text-transform: uppercase;
+}
+
+.counter li span {
+  display: block;
+  font-size: 4.5rem;
+}
+  </style>
 </head>
 <body class="bg-light">
+
 <div class="container-fluid align-item-center justify-content-center">
-  <div class="row">
+ <div class="container counter">
+  <h1 id="head">Days Remaining</h1>
+  <ul>
+    <li><span id="days"></span>days</li>
+    <li><span id="hours"></span>Hours</li>
+    <li><span id="minutes"></span>Minutes</li>
+    <li><span id="seconds"></span>Seconds</li>
+  </ul>
 </div>
+
+</div>
+
+<script>
+  const second = 1000,
+      minute = second * 60,
+      hour = minute * 60,
+      day = hour * 24;
+
+let countDown = new Date('October 13, 2023 00:00:00').getTime(),
+    x = setInterval(function() {
+
+      let now = new Date().getTime(),
+          distance = countDown - now;
 
-
+      document.getElementById('days').innerText = Math.floor(distance / (day)),
+        document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
+        document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
+        document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
+
+    }, second)
+</script>
 </body>
 </html>