Skip to content

Commit 8e31f1b

Browse files
solygambassolygambas
committed
add new year countdown
1 parent 6c211a4 commit 8e31f1b

File tree

3 files changed

+160
-0
lines changed

3 files changed

+160
-0
lines changed

‎76-new year countdown/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>New Year Countdown</title>
8+
</head>
9+
<body>
10+
<div id="year" class="year"></div>
11+
<h1>New Year Countdown</h1>
12+
<div id="countdown" class="countdown">
13+
<div class="time">
14+
<h2 id="days">00</h2>
15+
<p><small>days</small></p>
16+
</div>
17+
<div class="time">
18+
<h2 id="hours">00</h2>
19+
<p><small>hours</small></p>
20+
</div>
21+
<div class="time">
22+
<h2 id="minutes">00</h2>
23+
<p><small>minutes</small></p>
24+
</div>
25+
<div class="time">
26+
<h2 id="seconds">00</h2>
27+
<p><small>seconds</small></p>
28+
</div>
29+
</div>
30+
<img
31+
src="https://github.com/bradtraversy/vanillawebprojects/blob/master/new-year-countdown/img/spinner.gif?raw=true"
32+
alt="Loading..."
33+
id="loading"
34+
class="loading"
35+
/>
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎76-new year countdown/script.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const days = document.getElementById("days");
2+
const hours = document.getElementById("hours");
3+
const minutes = document.getElementById("minutes");
4+
const seconds = document.getElementById("seconds");
5+
const countdown = document.getElementById("countdown");
6+
const year = document.getElementById("year");
7+
const loading = document.getElementById("loading");
8+
9+
const nextYear = new Date().getFullYear() + 1;
10+
const newYearTime = new Date(`January 01 ${nextYear} 00:00:00`);
11+
12+
function updateCountdown() {
13+
const currentTime = new Date();
14+
const difference = newYearTime - currentTime;
15+
const currentDays = Math.floor(difference / 1000 / 60 / 60 / 24);
16+
const currentHours = Math.floor(difference / 1000 / 60 / 60) % 24;
17+
const currentMinutes = Math.floor(difference / 1000 / 60) % 60;
18+
const currentSeconds = Math.floor(difference / 1000) % 60;
19+
days.innerText = currentDays;
20+
hours.innerText = currentHours < 10 ? "0" + currentHours : currentHours;
21+
minutes.innerText =
22+
currentMinutes < 10 ? "0" + currentMinutes : currentMinutes;
23+
seconds.innerText =
24+
currentSeconds < 10 ? "0" + currentSeconds : currentSeconds;
25+
}
26+
27+
setTimeout(() => {
28+
loading.remove();
29+
countdown.style.display = "flex";
30+
}, 1000);
31+
32+
setInterval(updateCountdown, 1000);
33+
34+
year.innerText = nextYear;

‎76-new year countdown/style.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: url('https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
9+
color: rgba(255,255,255,0.87);
10+
font-family: "PT Sans Narrow", sans-serif;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
text-align: center;
16+
height: 100vh;
17+
overflow: hidden;
18+
margin: 0;
19+
}
20+
21+
body::after {
22+
content: '';
23+
background-color: rgba(0,0,0,0.5);
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
height: 100%;
29+
}
30+
31+
body * {
32+
z-index: 1;
33+
}
34+
35+
h1 {
36+
font-size: 2.75rem;
37+
margin: -140px 0 40px;
38+
}
39+
40+
.year {
41+
font-size: 12.5rem;
42+
z-index: -1;
43+
opacity: 0.2;
44+
position: absolute;
45+
top: 1.25rem;
46+
left: 50%;
47+
transform: translateX(-50%);
48+
}
49+
50+
.countdown {
51+
display: none;
52+
transform: scale(2);
53+
}
54+
55+
.time {
56+
display: flex;
57+
flex-direction: column;
58+
align-items: center;
59+
justify-content: center;
60+
margin: 0.25rem;
61+
}
62+
63+
.time h2 {
64+
font-size: 0.75rem;
65+
margin: 0;
66+
}
67+
68+
.time p {
69+
font-size: 0.75rem;
70+
margin: 0;
71+
padding: 0;
72+
}
73+
74+
@media (min-width: 640px) {
75+
h1 {
76+
font-size: 3.75rem;
77+
}
78+
.time {
79+
margin: 1rem;
80+
}
81+
.time h2 {
82+
font-size: 1.5rem;
83+
margin: 0 0 5px;
84+
}
85+
.time p {
86+
font-size: 1rem;
87+
}
88+
}

0 commit comments

Comments
 (0)