Merge pull request #450 from NoorAshna/countDown

Count down
Ayushparikh-code · Sep 17, 2024 · a4608f8 · a4608f8
2 parents 1ccdbda + 9410346
commit a4608f8
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 0 deletions.
diff --git a/Count-Down-To-New-Year/README.md b/Count-Down-To-New-Year/README.md
@@ -0,0 +1,9 @@
+DESCRIPTIONo 
+
+This mini project is a count down to new year with attractive UI. 
+It displays the remaining Days, Hours, Minutes and Seconds to new year. 
+It also works when new year starts.
+
+SCREENSHOT
+
+![CountDownToNewYear](https://user-images.githubusercontent.com/55310660/216793223-cbc7613c-7647-44c8-a802-a74302aa1031.jpg)
diff --git a/Count-Down-To-New-Year/index.html b/Count-Down-To-New-Year/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>countdown</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>CountDown To New Year</h1>
+    <div class="countdown-c">
+        <div class="count days-c">
+            <p class="big" id="days">0</p>
+            <span>Days</span>
+        </div>
+        <div class="count hours-c">
+            <p class="big" id="hours">0</p>
+            <span>Hours</span>
+        </div>
+        <div class="count minutes-c">
+            <p class="big" id="minutes">0</p>
+            <span>Minutes</span>
+        </div>
+        <div class="count seconds-c">
+            <p class="big" id="seconds">0</p>
+            <span>Seconds</span>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Count-Down-To-New-Year/script.js b/Count-Down-To-New-Year/script.js
@@ -0,0 +1,33 @@
+const dayEl = document.getElementById("days")
+const hourEl = document.getElementById("hours");
+const minuteEl = document.getElementById("minutes");
+const secondEl = document.getElementById("seconds");
+const d = 1
+const m = "jan"
+var y = 2024
+
+function countdown() {
+    const newYear = d + m + y;
+    const newYearDate = new Date(newYear);
+    const currentDate = new Date();
+    const totalSeconds = (newYearDate - currentDate) / 1000;
+    const days = Math.floor(totalSeconds / 3600 / 24);
+    const hours = Math.floor(totalSeconds / 3600) % 24;
+    const minutes = Math.floor(totalSeconds / 60) % 60;
+    const seconds = Math.floor(totalSeconds) % 60;
+
+    dayEl.innerHTML = formateTime(days);
+    hourEl.innerHTML = formateTime(hours);
+    minuteEl.innerHTML = formateTime(minutes);
+    secondEl.innerHTML = formateTime(seconds);
+
+    if(days === 0 && hours === 0 && minutes === 0 && seconds === 0){
+        y+=1;
+    }
+
+}
+function formateTime(time){
+    return time < 10 ? `0${time}` : time;}
+
+countdown();
+setInterval(countdown, 1000);
diff --git a/Count-Down-To-New-Year/snow.jpg b/Count-Down-To-New-Year/snow.jpg
diff --git a/Count-Down-To-New-Year/style.css b/Count-Down-To-New-Year/style.css
@@ -0,0 +1,35 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
+*{box-sizing : border-box;}
+body{
+    background-image: url('./snow.jpg');
+    background-size: cover;
+    background-position: center center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: 'Orbitron', sans-serif;
+    min-height: 100vh;
+    margin: 0;
+}
+h1{
+    margin-top: 7rem;
+    font-weight: normal;
+    font-size: 3rem;
+}
+.countdown-c{
+    display: flex;
+    flex-wrap: wrap;
+
+}
+.big{
+    font-weight: bold;
+    font-size: 3rem;
+    line-height: 1;
+    margin: 0 2rem;
+}
+.count{
+ text-align: center;
+}
+.count span{
+    font-size: 1.3rem;
+}