How to create super simple countdown for your Black Friday deal with Vanilla JS and Tailwind CSS.

↳The markup.

Which it ca be anything you want but you need a an element to display the numbers. In this case is on a <span> tag.

<p class="text-zinc-500">
   Black week is here. Get a 40% discount Use code <strong class="text-orange-600 font-bold uppercase">
   LEXINGTON40
   </strong> at checkout.
   <strong class="text-orange-600 font-bold uppercase">
   Only
   <span id="countdown-days"></span> days left
   </strong>
</p>

This is how it looks. In case you can't find it.

 <span id="countdown-days"></span>

↳ Let's write the super simple JS code.

The script calculates the days remaining until a target date (December 2, 2024) and updates the countdown display. It runs once when the page loads and then refreshes every hour. The Math.max function ensures the countdown never shows negative numbers, and the result is displayed in the #⁠countdown-days span element.

document.addEventListener("DOMContentLoaded", () => {
    const targetDate = new Date(2024, 11, 2);
    const countdownElement = document.getElementById("countdown-days");
    const updateCountdown = () => {
        const diff = targetDate - new Date();
        countdownElement.textContent = Math.max(0, Math.floor(diff / (1000 * 60 * 60 * 24)));
    };
    updateCountdown();
    setInterval(updateCountdown, 3600000); // Update every hour
});

That's it, no big deal.