Custom Countdown with Javascript

 

Features:

video background

Date picker with Date()

Calculate the time 

setInterval() for update time

Select only future date or today

Local storage when refresh page

CODE Github

There are other type of countdown demo:

First one is with jQurey and also fixed time setting.Second one is Javascript too, but type in the countdown time directly.  

countdown clock with jQuery

Countdown using JavaScript

HTML

video insert

overlay is the white background with opacity

input container is the default input section with a form. 

After submit the input, the countdown shows up.

When the time reach the 0, which means current time is equal to picked time. The info comes out. And it also can start the new countdown to the default section.

CSS

basic set up the font from Google fonts

background video and overlay centered and covered.

container is the while background section which will show three different div. And all the stuff centered.

Inside the container, the form with two input parts.

Button is aligned and changing background brightness when hovering. 

The countdown section should be list in a line.

The complete section is a animated title.

For responsive screen setting.

JAVASCRIPT

Select DOM and global setting

distance is the countdown time with second unit.

The countdown time will show on the countdown section updated everysecond.

When the distance meats 0, it should jump to complete section.

We can not select the previous time since it's the countdown demo.

set the attribute to dateElement.

save the countdown data in the Localstorage,and tranform them from objects to strings.

When no data saved in the local storage, it's required to select a date.

When complete the countdown and reset,it should be returned to default inputciontainer section,stop the interval, and clear the local storage data.

When there is data in the local storage, grab the data from it and transform them into objects so can be assigned to elements.

Add eventlinstener to three buttons.

And run the restorePrivousCountdown() to check whether data inside.