first commit

devsujay19 · web-flow · commit 43144a28248c · 2023-05-30T21:06:54.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Count-Down Timer</title>
+  </head>
+  <body>
+    <h1>Count-Down Timer</h1>
+    <div class="container">
+      <input type="datetime-local" id="datetime-input" required />
+      <button id="start-button">Start</button>
+      <div id="timer"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,28 @@
+const datetimeInput = document.getElementById('datetime-input');
+const startButton = document.getElementById('start-button');
+const timerDisplay = document.getElementById('timer');
+
+function startCountdown() {
+  const selectedDatetime = new Date(datetimeInput.value).getTime();
+
+  const countdownInterval = setInterval(() => {
+    const now = new Date().getTime();
+    const distance = selectedDatetime - now;
+
+    if (distance < 0) {
+      clearInterval(countdownInterval);
+      timerDisplay.textContent = 'Countdown Over!';
+    } else {
+      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(
+        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+      timerDisplay.textContent = `${days}d ${hours}h ${minutes}m ${seconds}s`;
+    }
+  }, 1000);
+}
+
+startButton.addEventListener('click', startCountdown);
diff --git a/style.css b/style.css
@@ -0,0 +1,30 @@
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  background-color: cyan;
+  text-shadow: 3px 3px 5px lime;
+}
+
+h1 {
+  margin-top: 200px;
+  font-size: 50px;
+  text-shadow: 3px 3px 5px lime;
+}
+.container {
+  margin-top: 50px;
+}
+
+input,
+button {
+  padding: 10px;
+  font-size: 30px;
+  background-color: white;
+  border: none;
+  border-radius: 10px;
+  box-shadow: 3px 3px 5px lime;
+}
+
+#timer {
+  font-size: 30px;
+  margin-top: 200px;
+}
