/flipdown

⏰ A lightweight and performant flip styled countdown clock (Refined version)

Primary LanguageJavaScriptMIT LicenseMIT

This project was forked from https://github.com/PButcher/flipdown and extended. The original project was created by PButcher.

FlipDown.js Jake's edition 2024

⏰ A lightweight and performant flip styled countdown clock.

GitHub Project

Remade by TypeScript and LESS CSS for extensions which are listed in the feature list.

Features

  • 💡 Lightweight - No jQuery! <11KB minified bundle

  • ⚡ Performant - Animations powered by CSS transitions

  • 📱 Responsive - Works great on screens of all sizes

  • 🎨 Themeable - Choose from built-in themes, or add your own

  • 🌍 i18n - Customisable headings for your language

  • more Responsive - restructured using CSS Flexbox so the size fits and stretches along the drawing container.

  • more digits on Days rotor. Grouping digits in one rotor.

  • auto hide preceding zeros.

  • on/off heading labels and locations selectable.

Respecting the original edition of FlipDown, usage of Javascript class and HTML structure are preserved as much as possible.

Example

Example live at: https://jakejp.github.io/flipdown/example/

Get started

1. Include the CSS and JS in <head> and include the following line in your HTML.

<link rel="stylesheet" type="text/css" href="css/flipdown/flipdown.css">
<script type="text/javascript" src="js/flipdown/flipdown.js"></script>
<div id="flipdown" class="flipdown"></div>

2. insert a bit of Javascript. FlipDown takes a Date or unix timestamp (in seconds) to countdown to as an argument. 2nd argument specifies the container element which is usually <div id="flipdown"></div>.

new FlipDown(1538137672).start();
new FlipDown(new Date(2024, 12,25), "flipdown" ).start();

When element ID in arugments is ommited, id='flipdown' is assumed.

See a full example here.

Multiple Instances

To use multiple instances of FlipDown on the same page, specify a DOM element ID as the second argument in FlipDown's constructor:

new FlipDown(1588017373, "registerBy").start();
new FlipDown(1593561600, "eventStart").start();
<div id="registerBy" class="flipdown"></div>
<div id="eventStart" class="flipdown"></div>

Themes

FlipDown comes with 5 themes as predfined:

  • dark [default]
  • light
  • green
  • yellow
  • red

To set the theme, you can supply the theme property in the opt object in the constructor with the theme name as a string.

For example, to instantiate FlipDown using the light theme instead:

new FlipDown(1538137672, {
  theme: "light",
}).start();

colors and other styles can be customized as described in the next section.

Custom stylings

1. class attribute of FlipDown element

flipdown is a must to set.

responsive is an option to make the containing element stretchable using Flexbox's flex-grow.

<div class='flipdown responsible'></div>

2. style attribute of FlipDown element

Some styling can be done with style attribute on the flipdown element.

  • color font-family font-size defines font of text elements.
  • --flip-color defines theme color of flips (direct option besides theme).
  • --corner-radius for corners of flips.
  • --flip-speed to define the flip speed. Default is 0.5s
  <div class="flipdown" style="color: black; --flip-color: red; --corner-radius: 1em; --flip-speed: 0.2s; "></div>

3. Option arguments in new FlipDown(... { options })

headings and headingsAt

specifies heading visibility or text. Pass 4 element array to customize day, hour, min, sec part of heading labels. false to hide.

headingAt can be one of top , bottom, left or right to specify where the heading label should sit.

Suggested use is for i18n. Usage as follows:

new FlipDown(1538137672, {
  headings: ["Nap", "Óra", "Perc", "Másodperc"],
  headingsAt: 'bottom'
}).start();

Note that headings will default to English if not provided: ["Days", "Hours", "Minutes", "Seconds"] and headingsAt top

new FlipDown(1538137672, { headings: false }).start();
rotor

1 to group digits for each D H M S instead of assigning a rotor to each number.

tick

tick specifies a callback function, which is called every time FlipDown flips.

ended

ended is called when FlipDown reaches the end of countdown. (Same time as IfEnded )

new FlipDown(1538137672, {
  headings: ['D', 'H', 'M', 'S'],
  headingsAt: 'right',
  rotor: 1,
  tick: function(){

  },
  ended: function(){

  }
}).start();

4. Further styling options ( more direct )

Some of sub elements in FlipDown can be stylized by using actual CSS selectors.

  • .flipdown .delimiter to customize the delimiter text which is usually : between digit groups.
  • .flipdown .rotor-group-heading to customize the heading labels which are usually Days Hours...
  • .flipdown .digit to select text element in each rotor element for adjusting font or padding.
  .flipdown .digit {
    padding: 0.6em;
  }

Heading text can be styled with .flipdown .rotor-group-heading selector.

  .flipdown .rotor-group-heading {
    font-size: 0.6em;
  }

API

FlipDown(uts, [el], [opts])

Create a new FlipDown instance.

Parameters

uts

Type: number

The unix timestamp to count down to (in seconds).

[el]

Optional
Type: string (default: flipdown)

The DOM element ID to attach this FlipDown instance to. Defaults to flipdown.

[opts]

Optional
Type: object (default: {})

Optionally specify additional configuration settings. Currently supported settings include:

FlipDown.start()

Start the countdown.

FlipDown.ifEnded(callback)

Call a function once the countdown has ended.

Parameters

callback

Type: function

Function to execute once the countdown has ended.

Example

var flipdown = new FlipDown(1538137672)

  // Start the countdown
  .start()

  // Do something when the countdown ends
  .ifEnded(() => {
    console.log("The countdown has ended!");
  });

How to build js and css

Build configuration is not included in the project. But the original code is just 2 files:

  • flipdown.ts - TypeScript source code should be compiled in .js then .min.js by minifier
  • flipdown.less - LESS CSS file should be compiled in .css and .min.css by minifier

Acknowledgements

Special thanks to the original project.

  • @PButcker for the orignal project which my project is based on.

Thanks to the following people for their suggestions/fixes:

  • @chuckbergeron for his help with making FlipDown responsive.
  • @vasiliki-b for spotting and fixing the Safari backface-visibility issue.
  • @joeinnes for adding i18n to rotor group headings.