Merge pull request #27 from tajulafreen/Countdown_Timer

tajulafreen · web-flow · commit 3f4727b140bb · 2024-07-23T21:30:55.000+05:30
50Projects-HTML-CSS-JavaScript : Countdown Timer
diff --git a/README.md b/README.md
@@ -276,6 +276,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Countdown Timer</summary>
+<p>The Countdown Timer is an intuitive and visually appealing tool built using HTML, CSS, and JavaScript. This project allows users to set a countdown to a specific event or deadline, providing a real-time display of the remaining days, hours, minutes, and seconds. It's a great project for beginners to practice and enhance their web development skills.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/CountdownTimer/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/CountdownTimer">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
diff --git a/Source-Code/CountdownTimer/assets/eid.jpg b/Source-Code/CountdownTimer/assets/eid.jpg
diff --git a/Source-Code/CountdownTimer/index.html b/Source-Code/CountdownTimer/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Countdown Timer</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>EID CELEBRATIONS</h1>
+
+        <div class="container">
+            <div class="countdown days-c">
+                <p class="big-text" id="days">0</p>
+                <span>days</span>
+            </div>
+            <div class="countdown hours-c">
+                <p class="big-text" id="hours">0</p>
+                <span>hours</span>
+            </div>
+            <div class="countdown mins-c">
+                <p class="big-text" id="mins">0</p>
+                <span>mins</span>
+            </div>
+            <div class="countdown seconds-c">
+                <p class="big-text" id="seconds">0</p>
+                <span>seconds</span>
+            </div>
+        </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Source-Code/CountdownTimer/script.js b/Source-Code/CountdownTimer/script.js
@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const daysEl = document.getElementById('days');
+  const hoursEl = document.getElementById('hours');
+  const minsEl = document.getElementById('mins');
+  const secondsEl = document.getElementById('seconds');
+
+  const eid = '30 Mar 2025';
+  const formatTime = (time) => (time < 10 ? `0${time}` : time);
+  const countdown = () => {
+    const EidDate = new Date(eid);
+    const currentDate = new Date();
+
+    const totalSeconds = (EidDate - currentDate) / 1000;
+
+    const days = Math.floor(totalSeconds / 3600 / 24);
+    const hours = Math.floor(totalSeconds / 3600) % 24;
+    const mins = Math.floor(totalSeconds / 60) % 60;
+    const seconds = Math.floor(totalSeconds) % 60;
+
+    daysEl.innerHTML = days;
+    hoursEl.innerHTML = formatTime(hours);
+    minsEl.innerHTML = formatTime(mins);
+    secondsEl.innerHTML = formatTime(seconds);
+  };
+
+  // initial call
+  countdown();
+
+  setInterval(countdown, 1000);
+});
diff --git a/Source-Code/CountdownTimer/style.css b/Source-Code/CountdownTimer/style.css
@@ -0,0 +1,44 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-image: url(./assets/eid.jpg);
+  background-size: cover;
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  font-family: "Roboto", sans-serif;
+  margin-top: 4rem;
+  color: #c9cc6b;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10rem;
+  flex-wrap: wrap;
+}
+
+h1 {
+  font-size: 4rem;
+  margin-top: 1rem;
+  text-align: center;
+  flex-wrap: wrap;
+}
+
+.big-text {
+  font-weight: bold;
+  font-size: 8rem;
+  line-height: 0.5;
+  margin: 1rem 2rem;
+}
+
+.countdown {
+  text-align: center;
+}
+
+.countdown span {
+  font-size: 2rem;
+}
