Skip to content

Instantly share code, notes, and snippets.

@marbaque
Last active February 14, 2024 22:51
Show Gist options
  • Save marbaque/0e94b5cbc1338ba6d072ba276715c431 to your computer and use it in GitHub Desktop.
Save marbaque/0e94b5cbc1338ba6d072ba276715c431 to your computer and use it in GitHub Desktop.
Countdown timer
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
#countdown {
display: flex;
justify-content: center;
margin: 0 auto;
}
#countdown>div {
background-color: #333;
padding: 1rem;
border-radius: 0.25rem;
margin: 0 2px;
color: #fff;
text-align: center;
font-size: 2rem;
}
#countdown>div>span {
display: block;
clear: both;
font-size: 0.5rem;
}
</style>
</head>
<body>
<div id="countdown"></div>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Nov 13, 2024 09:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("countdown").innerHTML = "<div>" + days + " <span>days</span></div>" + "<div>" + hours + " <span>hours</span></div> " + "<div>" + minutes + " <span>minutes</span></div> " + "<div>" + seconds + " <span>seconds</span></div>";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<div>00 <span>days</span></div>" + "<div>00 <span>hours</span></div> " + "<div>00 <span>minutes</span></div> " + "<div>00 <span>seconds</span></div>";
}
}, 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment