Skip to content

Commit edbe1c4

Browse files
SilentCoderHereSilentCoderHere
committed
countdown website
1 parent bc76922 commit edbe1c4

3 files changed

Lines changed: 510 additions & 0 deletions

File tree

‎countdown/index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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+
<title>Countdown</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9+
</head>
10+
<body>
11+
<div class="floating-dots" id="floatingDots"></div>
12+
13+
<div class="container">
14+
<div class="header">
15+
<h1 class="title">Countdown Timer</h1>
16+
<div class="target-date">
17+
<i class="fas fa-calendar-day"></i>
18+
<span>March 9, 2026</span>
19+
</div>
20+
</div>
21+
22+
<div class="countdown-container">
23+
<div class="time-unit">
24+
<div class="time-value" id="days">00</div>
25+
<div class="time-label">Days</div>
26+
</div>
27+
28+
<div class="separator">:</div>
29+
30+
<div class="time-unit">
31+
<div class="time-value" id="hours">00</div>
32+
<div class="time-label">Hours</div>
33+
</div>
34+
35+
<div class="separator">:</div>
36+
37+
<div class="time-unit">
38+
<div class="time-value" id="minutes">00</div>
39+
<div class="time-label">Minutes</div>
40+
</div>
41+
42+
<div class="separator">:</div>
43+
44+
<div class="time-unit">
45+
<div class="time-value" id="seconds">00</div>
46+
<div class="time-label">Seconds</div>
47+
</div>
48+
</div>
49+
50+
<div class="completed" id="completedMessage">
51+
<i class="fas fa-trophy"></i> Time's Up!
52+
</div>
53+
54+
<div class="footer">
55+
<p>Life is a joke.</p>
56+
</div>
57+
</div>
58+
59+
<script src="script.js"></script>
60+
</body>
61+
</html>

‎countdown/script.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
const targetDate = new Date('March 9, 2026 00:00:00').getTime();
2+
const daysElement = document.getElementById('days');
3+
const hoursElement = document.getElementById('hours');
4+
const minutesElement = document.getElementById('minutes');
5+
const secondsElement = document.getElementById('seconds');
6+
const completedMessage = document.getElementById('completedMessage');
7+
const floatingDots = document.getElementById('floatingDots');
8+
9+
function createFloatingDots() {
10+
const dotCount = 40;
11+
12+
for (let i = 0; i < dotCount; i++) {
13+
const dot = document.createElement('div');
14+
dot.classList.add('dot');
15+
16+
dot.style.left = `${Math.random() * 100}%`;
17+
dot.style.top = `${Math.random() * 100}%`;
18+
19+
const delay = Math.random() * 20;
20+
const duration = 15 + Math.random() * 20;
21+
dot.style.animationDelay = `${delay}s`;
22+
dot.style.animationDuration = `${duration}s`;
23+
24+
const size = 2 + Math.random() * 4;
25+
dot.style.width = `${size}px`;
26+
dot.style.height = `${size}px`;
27+
28+
floatingDots.appendChild(dot);
29+
}
30+
}
31+
32+
function createSparkle(x, y) {
33+
const sparkle = document.createElement('div');
34+
sparkle.classList.add('sparkle');
35+
sparkle.style.left = `${x}px`;
36+
sparkle.style.top = `${y}px`;
37+
38+
const size = 5 + Math.random() * 10;
39+
sparkle.style.width = `${size}px`;
40+
sparkle.style.height = `${size}px`;
41+
42+
const color = Math.random() > 0.5 ? '#FFD700' : '#FFA500';
43+
sparkle.style.background = color;
44+
45+
document.body.appendChild(sparkle);
46+
47+
setTimeout(() => {
48+
sparkle.remove();
49+
}, 1000);
50+
}
51+
52+
function formatNumber(num) {
53+
return num < 10 ? `0${num}` : num;
54+
}
55+
56+
function updateCountdown() {
57+
const now = new Date().getTime();
58+
const distance = targetDate - now;
59+
60+
if (distance < 0) {
61+
clearInterval(countdownInterval);
62+
daysElement.textContent = "00";
63+
hoursElement.textContent = "00";
64+
minutesElement.textContent = "00";
65+
secondsElement.textContent = "00";
66+
completedMessage.style.display = "block";
67+
document.querySelector('.countdown-container').style.display = "none";
68+
return;
69+
}
70+
71+
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
72+
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
73+
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
74+
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
75+
76+
if (daysElement.textContent !== formatNumber(days)) {
77+
daysElement.classList.add('pulse');
78+
setTimeout(() => daysElement.classList.remove('pulse'), 500);
79+
daysElement.textContent = formatNumber(days);
80+
}
81+
82+
if (hoursElement.textContent !== formatNumber(hours)) {
83+
hoursElement.classList.add('pulse');
84+
setTimeout(() => hoursElement.classList.remove('pulse'), 500);
85+
hoursElement.textContent = formatNumber(hours);
86+
}
87+
88+
if (minutesElement.textContent !== formatNumber(minutes)) {
89+
minutesElement.classList.add('pulse');
90+
setTimeout(() => minutesElement.classList.remove('pulse'), 500);
91+
minutesElement.textContent = formatNumber(minutes);
92+
}
93+
94+
secondsElement.classList.add('pulse');
95+
setTimeout(() => secondsElement.classList.remove('pulse'), 500);
96+
secondsElement.textContent = formatNumber(seconds);
97+
98+
if (seconds % 5 === 0) {
99+
const rect = secondsElement.getBoundingClientRect();
100+
createSparkle(
101+
rect.left + rect.width / 2 + (Math.random() * 40 - 20),
102+
rect.top + rect.height / 2 + (Math.random() * 40 - 20)
103+
);
104+
}
105+
}
106+
107+
createFloatingDots();
108+
109+
updateCountdown();
110+
const countdownInterval = setInterval(updateCountdown, 1000);
111+
112+
const timeUnits = document.querySelectorAll('.time-unit');
113+
timeUnits.forEach(unit => {
114+
unit.addEventListener('mouseenter', function(e) {
115+
const rect = this.getBoundingClientRect();
116+
for (let i = 0; i < 5; i++) {
117+
setTimeout(() => {
118+
createSparkle(
119+
rect.left + Math.random() * rect.width,
120+
rect.top + Math.random() * rect.height
121+
);
122+
}, i * 100);
123+
}
124+
});
125+
126+
unit.addEventListener('mouseleave', function() {
127+
this.style.transform = 'translateY(0) scale(1)';
128+
});
129+
130+
unit.addEventListener('touchstart', function(e) {
131+
this.style.transform = 'translateY(-10px) scale(1.05)';
132+
this.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.4)';
133+
134+
const rect = this.getBoundingClientRect();
135+
const touch = e.touches[0];
136+
createSparkle(
137+
touch.clientX - rect.left,
138+
touch.clientY - rect.top
139+
);
140+
});
141+
142+
unit.addEventListener('touchend', function() {
143+
this.style.transform = 'translateY(0) scale(1)';
144+
this.style.boxShadow = '0 15px 35px rgba(0, 0, 0, 0.3)';
145+
});
146+
});
147+
148+
document.addEventListener('mousemove', (e) => {
149+
if (Math.random() > 0.98) {
150+
createSparkle(e.clientX, e.clientY);
151+
}
152+
});
153+
154+
document.addEventListener('click', (e) => {
155+
createSparkle(e.clientX, e.clientY);
156+
});

0 commit comments

Comments
 (0)