Skip to content

Commit a4608f8

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #450 from NoorAshna/countDown
Count down
2 parents 1ccdbda + 9410346 commit a4608f8

File tree

5 files changed

+112
-0
lines changed

5 files changed

+112
-0
lines changed

‎Count-Down-To-New-Year/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
DESCRIPTIONo
2+
3+
This mini project is a count down to new year with attractive UI.
4+
It displays the remaining Days, Hours, Minutes and Seconds to new year.
5+
It also works when new year starts.
6+
7+
SCREENSHOT
8+
9+
![CountDownToNewYear](https://user-images.githubusercontent.com/55310660/216793223-cbc7613c-7647-44c8-a802-a74302aa1031.jpg)

‎Count-Down-To-New-Year/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>countdown</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<h1>CountDown To New Year</h1>
13+
<div class="countdown-c">
14+
<div class="count days-c">
15+
<p class="big" id="days">0</p>
16+
<span>Days</span>
17+
</div>
18+
<div class="count hours-c">
19+
<p class="big" id="hours">0</p>
20+
<span>Hours</span>
21+
</div>
22+
<div class="count minutes-c">
23+
<p class="big" id="minutes">0</p>
24+
<span>Minutes</span>
25+
</div>
26+
<div class="count seconds-c">
27+
<p class="big" id="seconds">0</p>
28+
<span>Seconds</span>
29+
</div>
30+
</div>
31+
32+
<script src="script.js"></script>
33+
</body>
34+
35+
</html>

‎Count-Down-To-New-Year/script.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const dayEl = document.getElementById("days")
2+
const hourEl = document.getElementById("hours");
3+
const minuteEl = document.getElementById("minutes");
4+
const secondEl = document.getElementById("seconds");
5+
const d = 1
6+
const m = "jan"
7+
var y = 2024
8+
9+
function countdown() {
10+
const newYear = d + m + y;
11+
const newYearDate = new Date(newYear);
12+
const currentDate = new Date();
13+
const totalSeconds = (newYearDate - currentDate) / 1000;
14+
const days = Math.floor(totalSeconds / 3600 / 24);
15+
const hours = Math.floor(totalSeconds / 3600) % 24;
16+
const minutes = Math.floor(totalSeconds / 60) % 60;
17+
const seconds = Math.floor(totalSeconds) % 60;
18+
19+
dayEl.innerHTML = formateTime(days);
20+
hourEl.innerHTML = formateTime(hours);
21+
minuteEl.innerHTML = formateTime(minutes);
22+
secondEl.innerHTML = formateTime(seconds);
23+
24+
if(days === 0 && hours === 0 && minutes === 0 && seconds === 0){
25+
y+=1;
26+
}
27+
28+
}
29+
function formateTime(time){
30+
return time < 10 ? `0${time}` : time;}
31+
32+
countdown();
33+
setInterval(countdown, 1000);

‎Count-Down-To-New-Year/snow.jpg‎

3.04 MB
Loading

‎Count-Down-To-New-Year/style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
2+
*{box-sizing : border-box;}
3+
body{
4+
background-image: url('./snow.jpg');
5+
background-size: cover;
6+
background-position: center center;
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
font-family: 'Orbitron', sans-serif;
11+
min-height: 100vh;
12+
margin: 0;
13+
}
14+
h1{
15+
margin-top: 7rem;
16+
font-weight: normal;
17+
font-size: 3rem;
18+
}
19+
.countdown-c{
20+
display: flex;
21+
flex-wrap: wrap;
22+
23+
}
24+
.big{
25+
font-weight: bold;
26+
font-size: 3rem;
27+
line-height: 1;
28+
margin: 0 2rem;
29+
}
30+
.count{
31+
text-align: center;
32+
}
33+
.count span{
34+
font-size: 1.3rem;
35+
}

0 commit comments

Comments
 (0)