Retro Flipping Countdown Timer In JavaScript – flipdown.js

Category: Date & Time , Javascript | January 2, 2020

2 Comments

Demo Download

AUTHOR:	PButcher
VIEWS TOTAL:	6,340 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	January 2, 2020
LICENSE:	MIT

---

Preview:

Description:

flipdown.js is a lightweight, responsive, high-performance countdown plugin to create a retro-style flipping countdown clock that shows how many days/hours/minutes/seconds until an event you provide.

How to use it:

1. Add the stylesheet flipdown.css and JavaScript flipdown.js to the html file.

<link rel="stylesheet" href="css/flipdown/flipdown.css" />
<script src="js/flipdown/flipdown.js"></script>

2. Create a container element to place the countdown clock.

<div id="flipdown" class="flipdown"></div>

3. Initialize the plugin and specify the DateTime (Unix timestamp in seconds) the clock will countdown from.

var flipdown = new FlipDown(datetime);

4. Start the countdown clock.

flipdown.start();

5. Do something when the countdown ends.

flipdown.ifEnded(() => {
  console.log('The countdown has ended!');
});

6. Change the default theme.

var flipdown = new FlipDown(datetime, el, {
    theme: 'light' // or dark
});