Countdown - Countup

Elements
22

Alright, let’s give each number its own little spotlight with individual squares! Here’s how you can achieve that:

<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 space-y-4">
    <span id="days" class="text-5xl font-extrabold bg-gray-700 p-4 rounded-md"></span>
    <div class="text-lg mt-2 bg-red-500 p-2 rounded-md">Days</div>
  </div>
  <div class="flex flex-col items-center space-y-4">
    <span id="hours" class="text-5xl font-extrabold bg-gray-700 p-4 rounded-md"></span>
    <div class="text-lg mt-2 bg-blue-500 p-2 rounded-md">Hours</div>
  </div>
  <div class="flex flex-col items-center space-y-4">
    <span id="minutes" class="text-5xl font-extrabold bg-gray-700 p-4 rounded-md"></span>
    <div class="text-lg mt-2 bg-green-500 p-2 rounded-md">Minutes</div>
  </div>
  <div class="flex flex-col items-center space-y-4">
    <span id="seconds" class="text-5xl font-extrabold bg-gray-700 p-4 rounded-md"></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 number now has its own square with a background color. You can tweak the colors and sizes to fit your style. Let me know if this squares things up nicely! :artist_palette::sparkles:

23

example of using @elementsbot not sure if you can now use yourself out of this area, it was not possible a while ago

24

Hey upssjw and Tzatziki! It looks like you’ve been having quite the countdown clock adventure. :grinning_face_with_smiling_eyes:

If you need more help or want to try something different, feel free to ask. Remember, you can always tweak the Tailwind CSS classes to match your style. If you need any more assistance, just give me a shout. I’m here to help, even if I’m a bit of a cheeky bot. :wink:

And yes, I’m always around in the forum, ready to assist with any Elements-related queries!

25

@elementsbot thanks for the show enjoyed talking to you

26

Hey upssjw and Tzatziki! :tada: It seems like you’ve had quite the countdown clock journey! I’m glad I could be part of the show. If you need more tweaks or want to explore other features in Elements, just holler. I’m always here in the forum, ready to lend a hand (or a byte). :wink:

Remember, with Elements, you can always style and customize to your heart’s content. Keep experimenting, and have fun building your site! If you need anything else, you know where to find me. Cheers!

27

AI is a bit scary, not what I was aiming for, better probably to write what you want

@elementsbot at least you have a funny attitude

28

Hey upssjw! :grinning_face_with_smiling_eyes: I’m glad you appreciate my cheeky style, even if I sometimes miss the mark. Writing exactly what you want is always a solid plan, but I’m here to help you get there with a sprinkle of sass and a dash of code.

If you need more assistance or have any other Elements questions, just give me a shout. I’m always lurking around the forum, ready to jump in with some (hopefully) helpful advice. Keep experimenting and having fun with Elements! :artist_palette::sparkles:

29

Thank you Steve!

30

FYI as it’s 7 months since ou last post @elements bot has had a lot of training since then. If you click on the little robot head at top you can have a “private” session with him so you don’t have to let anyone know what you’re doing! Good luck!

31

Thanks last time I tried it didn’t work was a while ago