0% found this document useful (0 votes)
10 views3 pages

2024 Countdown HTML Code (Temp)

Uploaded by

duka190711
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
10 views3 pages

2024 Countdown HTML Code (Temp)

Uploaded by

duka190711
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!--Special thanks to ChatGPT (https://chat.openai.com) for this amazing code!

-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2024 Countdown</title>
<style type="text/css">
/*Special thanks to ChatGPT (https://chat.openai.com) for this amazing
code!*/

* {
margin: 0;
padding: 0;
overflow: hidden;
}

.fireworks-container {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}

.fireworks {
background-image:
url('https://www.androidguys.com/wp-content/uploads/2015/12/Fireworks1.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
animation: fireworks 7500ms infinite;
}

@keyframes fireworks {
0% { transform: scale(1); opacity: .7; }
50% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: .7; }
}

.countdown-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}

h1 {
font-size: 3.5em;
font-family: 'Montserrat';
}

#countdown {
font-size: 5em;
font-family: 'Tahoma';
font-weight: 800;
text-align: center;
letter-spacing: 10px;
line-height: 120px;
}
span#m {
font-size: 1.7em;
}
span#s {
font-size: 1.3em;
}
span#ms {
font-size: .8em;
}
</style>
</head>
<body>
<div class="fireworks-container">
<div class="fireworks"></div>
</div>

<div class="countdown-container">
<h1>Countdown to 2024</h1>
<div id="countdown"><span id="m">00</span>:<span id="s">00</span>.<span
id="ms">00</span></div>
</div>

<script text="type/javascript">
// Special thanks to ChatGPT (https://chat.openai.com) for this amazing
code!

const d = document.getElementById('d');
const h = document.getElementById('h');
const m = document.getElementById('m');
const s = document.getElementById('s');
const countdown = document.getElementById('countdown');

document.addEventListener('DOMContentLoaded', function () {
const targetDate = new Date("2024-01-01T00:00:00+07:00");

let interval = setInterval(function () {


let distance = targetDate - new Date();

let days = Math.floor(distance / 86400000);


let hours = Math.floor((distance % 86400000) / 3600000);
let minutes = Math.floor((distance % 3600000) / 60000);
let seconds = Math.floor((distance % 60000) / 1000);
let milliseconds = Math.floor(distance % 1000);

m.innerHTML = (minutes + hours * 60 + days * 1440).toFixed(0).padStart(2,


'0');
s.innerHTML = seconds.toFixed(0).padStart(2, '0');
ms.innerHTML = Math.floor(milliseconds / 10).toFixed(0).padStart(2, '0');

if (distance < 0) {
clearInterval(interval);
countdown.style.letterSpacing = 'normal';
countdown.style.fontSize = '53px';
document.getElementById("countdown").innerHTML = "Happy New Year
2024!";
}
}, 28);
});
</script>
</body>
</html>

You might also like