How to create a countdown with Tailwind CSS and JavaScript

Let's recreate the countdown timer from the tutorial with Alpine.js but with vainilla JavaScript.
Read the article, See it live and get the code

Comments

[Ben Sinclair]

You mention Tailwind a couple of times but I can't see any code that uses it, or explanation of why you talk about it?

Also, and this is nit-picky, but... what happens when the countdown passes into daylight savings time?

[Fyodor]

what happens when the countdown passes into daylight savings time?

QA background PTSD detected 😉😅

[Michael Andreuzza]

We get a plate of seafood 🙂

[Michael Andreuzza]

Well, if you read the article a bit you could see I wrote this:

Classes are omited for brevity and clarity

before this HTML:

<div class="countdown-item ...">
 <div class="countdown-value ...">${value}</div>
 <div class="countdown-label ...">${label}</div>
</div>

I wanted to add only the custom classes, because you can style your clock as you want to.

Then at the very bottom you will see this line on the script:

`<div class="..."><div class="...">Countdown has ended!</div></div>`;

The Tailwind CSS classes are there.

Then if you want to to see the whole code, all you have to do is click the link I prove on this line:
See it live and get the code
This lines take you to a blog posts where you can choose to see it live or look at the code, and then if you click to see the code, it will take to the repo where you can see all Tailwind used.

[Eckehard]

Isn´t this overkill for such a simple task? You can do the same in some lines of Javascript, using the right framework.

See a quick example here

[Michael Andreuzza]

it can be yeah.