repository·master·Indexed 19 days ago
https://github.com/pbutcher/flipdownA lightweight, performant, and responsive flip-style countdown clock library. It is dependency-free and supports custom themes, internationalization of rotor headings, and multiple instances per page. Version 0.3.2.
To create a custom theme, add a new stylesheet using the FlipDown theme template. Your CSS selectors must use the prefix .flipdown__theme- followed by your theme name.
Example: If you name your theme ocean, use .flipdown__theme-ocean in your CSS. You can then load it via the theme option in the constructor.
To use FlipDown, include the CSS and JS files in your <head>. Create a container element with the class flipdown. In your JavaScript, instantiate FlipDown with a Unix timestamp (in seconds) and call .start() to begin the countdown.
<!-- HTML -->
<div id="flipdown" class="flipdown"></div>
<!-- JavaScript -->
<script>
new FlipDown(1538137672).start();
</script>You can install FlipDown using npm or yarn to add the lightweight countdown clock to your project.
npm install flipdown
# or
yarn add flipdownFlipDown includes two built-in themes: dark (default) and light. You can switch themes by passing a theme string in the opts object during instantiation.
new FlipDown(1538137672, {
theme: "light",
}).start();You can customize the labels for the rotor groups (Days, Hours, Minutes, Seconds) by passing an array of strings to the headings property in the opts object. This is useful for internationalization (i18n).
Note: This only changes the display text; it does not change the logic of the rotors (e.g., passing 'Months' will not make the 'Days' rotor count months).
new FlipDown(1538137672, {
headings: ["Nap", "Óra", "Perc", "Másodperc"],
}).start();To host multiple countdowns simultaneously, provide the unique DOM element ID as the second argument to the FlipDown constructor.
<div id="registerBy" class="flipdown"></div>
<div id="eventStart" class="flipdown"></div>
<script>
new FlipDown(1588017373, "registerBy").start();
new FlipDown(1593561600, "eventStart").start();
</script>Creates a new FlipDown instance.
Parameters:
uts (number): The Unix timestamp to count down to (in seconds).[el] (string, optional): The DOM element ID to attach to. Defaults to "flipdown".[opts] (object, optional): Configuration settings. Supported keys:theme (string): The name of the theme to use.headings (Array<string>): Custom labels for the rotor groups.// Signature
new FlipDown(uts, [el], [opts])When initializing FlipDown, you can pass an optional configuration object to customize the appearance and labels.
Supported keys:
theme: A string determining the visual style. Defaults to 'dark'.headings: An array of 4 strings used as labels for the rotor groups (e.g., Days, Hours, Minutes, Seconds). The array must have exactly 4 elements to be applied.const opts = {
theme: 'dark',
headings: ['Days', 'Hours', 'Minutes', 'Seconds']
};
const flipdown = new FlipDown(timestamp, opts);The countdown does not begin automatically upon instantiation. You must call the .start() method to initialize the DOM elements and begin the 1-second interval timer. The method is chainable.
new FlipDown(timestamp, 'flipdown').start();To create a new countdown clock, instantiate the FlipDown class. You must provide a Unix timestamp (in seconds) representing the target end time. You can optionally specify the ID of the DOM element where the clock will be rendered, or pass an options object.
// Basic usage: target timestamp and element ID
const flipdown = new FlipDown(1617254400, 'my-element-id');
// Usage with options (element ID defaults to 'flipdown')
const flipdown = new FlipDown(1617254400, {
theme: 'light',
headings: ['Days', 'Hours', 'Mins', 'Secs']
});Registers a callback function that will be executed exactly once when the countdown reaches zero.
var flipdown = new FlipDown(1538137672)
.start()
.ifEnded(() => {
console.log("The countdown has ended!");
});Begins the FlipDown countdown animation.
flipdownInstance.start();