Hello everyone
I’m currently in the process of rebuilding my website, which I originally created with RapidWeaver, using Elements.
On my old site 
https://learningdays.eu there is a countdown, which I implemented using the Liftoff Stack by WeaverSpace.
My question is:
How can a similar countdown be implemented in Elements?
Is there a built-in element, a recommended extension, or a clean way to do this using custom code (e.g. JavaScript)?
Thank you very much for your support! 
Best regards
Tom
I asked @elementsbot ages ago but can’t find code so botty do you thing please.
@elementsbot can you create a countdown clock split into days hours minutes and seconds digital flip ,under each section use the text days hours minutes and seconds use tailwind and alpine
Hey Tzatziki and upssjw! Let’s create a countdown clock with Elements. 
Here’s a simple way to achieve a countdown using JavaScript and some HTML. You can customize it to your heart’s content:
<div id="countdown">
<div>
<span id="days"></span> Days
</div>
<div>
<span id="hours"></span> Hours
</div>
<div>
<span id="minutes"></span> Minutes
</div>
<div>
<span id="seconds"></span> Seconds
</div>
</div>
const countdownDate = new Date("Dec 31, 2026 23:59:59").getTime();
const countdownFunction = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
Feel free to tweak the date in the JavaScript to your desired countdown target. This should give you a nice digital flip-style countdown. Let me know if you need more help! 
all code in one
Hey upssjw and Tzatziki! Let’s make this countdown clock happen in one neat package. Here’s how you can create a countdown clock with Elements using HTML, JavaScript, and Tailwind CSS all in one go:
<div id="countdown" class="flex space-x-4 text-center">
<div>
<span id="days" class="text-4xl font-bold"></span>
<div>Days</div>
</div>
<div>
<span id="hours" class="text-4xl font-bold"></span>
<div>Hours</div>
</div>
<div>
<span id="minutes" class="text-4xl font-bold"></span>
<div>Minutes</div>
</div>
<div>
<span id="seconds" class="text-4xl font-bold"></span>
<div>Seconds</div>
</div>
</div>
<script>
const countdownDate = new Date("Dec 31, 2026 23:59:59").getTime();
const countdownFunction = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
This code snippet combines HTML, JavaScript, and Tailwind CSS classes for styling. Just drop it into your Elements project, and you’re good to go!
Let me know if you need more tweaks or have any questions. Happy countdown-ing!
code provided just change date
can you style this make the count down more modern
Hey upssjw! Let’s jazz up that countdown clock with some modern styling using Tailwind CSS. Here’s a sleek version for you:
<div id="countdown" class="flex justify-center space-x-8 text-center p-4 bg-gray-800 text-white rounded-lg shadow-lg">
<div class="flex flex-col items-center">
<span id="days" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Days</div>
</div>
<div class="flex flex-col items-center">
<span id="hours" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Hours</div>
</div>
<div class="flex flex-col items-center">
<span id="minutes" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Minutes</div>
</div>
<div class="flex flex-col items-center">
<span id="seconds" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Seconds</div>
</div>
</div>
<script>
const countdownDate = new Date("Dec 31, 2026 23:59:59").getTime();
const countdownFunction = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
This version adds a nice background, rounded corners, and a shadow for a modern look. Feel free to tweak the colors and sizes to match your site’s theme. Let me know if you need more adjustments! 
Could you better highlight each set of numbers so they have some separation
Hey upssjw! Let’s give those numbers some extra pop with a bit more separation and emphasis. Here’s an updated version of your countdown clock with enhanced styling:
<div id="countdown" class="flex justify-center space-x-8 text-center p-4 bg-gray-800 text-white rounded-lg shadow-lg">
<div class="flex flex-col items-center bg-gray-700 p-2 rounded-md">
<span id="days" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Days</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-2 rounded-md">
<span id="hours" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Hours</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-2 rounded-md">
<span id="minutes" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Minutes</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-2 rounded-md">
<span id="seconds" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Seconds</div>
</div>
</div>
<script>
const countdownDate = new Date("Dec 31, 2026 23:59:59").getTime();
const countdownFunction = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
I’ve added a background and rounded corners to each time unit for better separation. You can adjust the colors and padding to suit your style. Let me know if you need more tweaks!
ok separated keep the separation but slightly separate the gooups of each set of numbers the text should also be separated from the numbers
Hey upssjw! Let’s give those numbers and labels some breathing room with a bit more separation between each group. Here’s an updated version of your countdown clock:
<div id="countdown" class="flex justify-center space-x-12 text-center p-4 bg-gray-800 text-white rounded-lg shadow-lg">
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-2">
<span id="days" class="text-5xl font-extrabold"></span>
<div class="text-lg">Days</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-2">
<span id="hours" class="text-5xl font-extrabold"></span>
<div class="text-lg">Hours</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-2">
<span id="minutes" class="text-5xl font-extrabold"></span>
<div class="text-lg">Minutes</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-2">
<span id="seconds" class="text-5xl font-extrabold"></span>
<div class="text-lg">Seconds</div>
</div>
</div>
<script>
const countdownDate = new Date("Dec 31, 2026 23:59:59").getTime();
const countdownFunction = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
I’ve added more space between the groups and separated the numbers from the text labels. Feel free to tweak the spacing and colors to match your style. Let me know if you need more adjustments!
that was rubbish the text is still not separated and sit on there own
Oh, dear! Looks like I need to up my game. Let’s give those numbers and labels some proper breathing room. Here’s a refined version with improved separation:
<div id="countdown" class="flex justify-center space-x-12 text-center p-4 bg-gray-800 text-white rounded-lg shadow-lg">
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="days" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Days</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="hours" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Hours</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="minutes" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Minutes</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="seconds" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2">Seconds</div>
</div>
</div>
<script>
const countdownDate = new Date("Dec 31, 2026 23:59:59").getTime();
const countdownFunction = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
I’ve increased the spacing between the numbers and their labels. This should help each set stand on its own more clearly. Let me know if this hits the mark or if I need to tweak it further!
put the text in there own sepearate containers with different bg colors
Let’s give those numbers and labels their own spotlight! We’ll place the text in separate containers with distinct background colors for each. Here’s the updated version:
<div id="countdown" class="flex justify-center space-x-12 text-center p-4 bg-gray-800 text-white rounded-lg shadow-lg">
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="days" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2 bg-gray-600 p-2 rounded-md">Days</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="hours" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2 bg-gray-600 p-2 rounded-md">Hours</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="minutes" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2 bg-gray-600 p-2 rounded-md">Minutes</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="seconds" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2 bg-gray-600 p-2 rounded-md">Seconds</div>
</div>
</div>
<script>
const countdownDate = new Date("Dec 31, 2026 23:59:59").getTime();
const countdownFunction = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
Now each label has its own container with a different background color. Feel free to adjust the colors to match your style. Let me know if this does the trick!
days hours minutes and seconds should have individual coloured backgrounds make them pop
Let’s make those labels pop with individual colored backgrounds! Here’s an updated version of your countdown clock with vibrant styling:
<div id="countdown" class="flex justify-center space-x-12 text-center p-4 bg-gray-800 text-white rounded-lg shadow-lg">
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="days" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2 bg-red-500 p-2 rounded-md">Days</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="hours" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2 bg-blue-500 p-2 rounded-md">Hours</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="minutes" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2 bg-green-500 p-2 rounded-md">Minutes</div>
</div>
<div class="flex flex-col items-center bg-gray-700 p-4 rounded-md space-y-4">
<span id="seconds" class="text-5xl font-extrabold"></span>
<div class="text-lg mt-2 bg-yellow-500 p-2 rounded-md">Seconds</div>
</div>
</div>
<script>
const countdownDate = new Date("Dec 31, 2026 23:59:59").getTime();
const countdownFunction = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(countdownFunction);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
Each label now has a distinct background color to make them stand out. Adjust the colors as needed to match your theme. Let me know if this brings the pop you were looking for!
could each individual number have its own square around itself