Countdown with HTML and JS

Walter Nascimento
Walter Nascimento | EN
1 min readOct 2, 2020

Countdown with HTML and JS

[Clique aqui para ler em português]

How about knowing how much time is left for a specific date in a very simple way? how much time is left for your birthday or holiday, see below how fast this project is.

Code

First we will create the interface, we will do something simple, using only HTML.

HTML code

In the HTML structure, an input was created to receive the date, and when exiting the input, onblur is activated and calls the resetCountdown() function.

JS code

Here we have the countdown() function, which starts when we load the page, and after it we have the resetCountdown() function, which is activated as soon as we fill the date and the input loses focus.

ready as simple as that.

Demo

See the complete project working below.

Projeto no codepen

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

Video on youtube

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊See you! 😊😊

--

--