{"id":13907117,"url":"https://github.com/PButcher/flipdown","last_synced_at":"2025-07-18T05:30:43.132Z","repository":{"id":40614126,"uuid":"97306908","full_name":"PButcher/flipdown","owner":"PButcher","description":"⏰ A lightweight and performant flip styled countdown clock","archived":false,"fork":false,"pushed_at":"2024-03-29T12:00:27.000Z","size":66,"stargazers_count":393,"open_issues_count":33,"forks_count":122,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-18T23:59:32.434Z","etag":null,"topics":["clock","countdown","flip","timer"],"latest_commit_sha":null,"homepage":"https://pbutcher.uk/flipdown/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PButcher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-15T09:50:28.000Z","updated_at":"2024-11-09T13:37:54.000Z","dependencies_parsed_at":"2024-06-18T15:38:34.254Z","dependency_job_id":null,"html_url":"https://github.com/PButcher/flipdown","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":0.07547169811320753,"last_synced_commit":"2c4b2e928fc8098e2d195023ab4d17478d2e20cd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PButcher%2Fflipdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PButcher%2Fflipdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PButcher%2Fflipdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PButcher%2Fflipdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PButcher","download_url":"https://codeload.github.com/PButcher/flipdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226353573,"owners_count":17611728,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clock","countdown","flip","timer"],"created_at":"2024-08-06T23:01:48.067Z","updated_at":"2024-11-25T15:31:16.969Z","avatar_url":"https://github.com/PButcher.png","language":"JavaScript","readme":"\u003cspan style=\"text-align:center;display:block;width:100%;\"\u003e\u003cimg src=\"http://i.imgur.com/UtbIc4S.png\" style=\"width:75%\" title=\"Example of FlipDown\" style=\"width: 500px;text-align:center\"\u003e\u003c/span\u003e\n\n# FlipDown\n\n⏰ A lightweight and performant flip styled countdown clock.\n\n![NPM Version](https://img.shields.io/npm/v/flipdown?style=flat-square)\n![NPM Downloads](https://img.shields.io/npm/dt/flipdown?style=flat-square)\n\n## Features\n\n- 💡 Lightweight - No jQuery! \u003c11KB minified bundle\n- ⚡ Performant - Animations powered by CSS transitions\n- 📱 Responsive - Works great on screens of all sizes\n- 🎨 Themeable - Choose from built-in themes, or add your own\n- 🌍 i18n - Customisable headings for your language\n\n## Example\n\nExample live at: https://pbutcher.uk/flipdown/\n\nRemix FlipDown on CodePen: https://codepen.io/PButcher/pen/dzvMzZ\n\n## Basic Usage\n\nTo get started, either clone this repo or install with `npm install flipdown` or `yarn add flipdown`.\n\nFor basic usage, FlipDown takes a unix timestamp (in seconds) as an argument.\n\n```javascript\nnew FlipDown(1538137672).start();\n```\n\nInclude the [CSS and JS](https://github.com/PButcher/flipdown/tree/master/dist) in `\u003chead\u003e` and include the following line in your HTML.\n\n```html\n\u003cdiv id=\"flipdown\" class=\"flipdown\"\u003e\u003c/div\u003e\n```\n\nSee a full example [here](https://github.com/PButcher/flipdown/tree/master/example).\n\n## Multiple Instances\n\nTo use multiple instances of FlipDown on the same page, specify a DOM element ID as the second argument in FlipDown's constructor:\n\n```javascript\nnew FlipDown(1588017373, \"registerBy\").start();\nnew FlipDown(1593561600, \"eventStart\").start();\n```\n\n```html\n\u003cdiv id=\"registerBy\" class=\"flipdown\"\u003e\u003c/div\u003e\n\u003cdiv id=\"eventStart\" class=\"flipdown\"\u003e\u003c/div\u003e\n```\n\n## Themes\n\nFlipDown comes with 2 themes as standard:\n\n- dark [default]\n- light\n\nTo change the theme, you can supply the `theme` property in the `opt` object in the constructor with the theme name as a string:\n\n```javascript\n{\n  theme: \"light\";\n}\n```\n\nFor example, to instantiate FlipDown using the light theme instead:\n\n```javascript\nnew FlipDown(1538137672, {\n  theme: \"light\",\n}).start();\n```\n\n### Custom Themes\n\nCustom themes can be added by adding a new stylesheet using the FlipDown [theme template](https://github.com/PButcher/flipdown/blob/master/src/flipdown.css#L3-L34).\n\nFlipDown themes must have the class name prefix of: `.flipdown__theme-` followed by the name of your theme. For example, the standard theme class names are:\n\n- `.flipdown__theme-dark`\n- `.flipdown__theme-light`\n\nYou can then load your theme by specifying the `theme` property in the `opt` object of the constructor (see [Themes](#Themes)).\n\n## Headings\n\nYou can add your own rotor group headings by passing an array as part of the `opt` object. Bear in mind this won't change the functionality of the rotors (eg: the 'days' rotor won't magically start counting months because you passed it 'Months' as a heading).\n\nSuggested use is for i18n. Usage as follows:\n\n```javascript\nnew FlipDown(1538137672, {\n  headings: [\"Nap\", \"Óra\", \"Perc\", \"Másodperc\"],\n}).start();\n```\n\nNote that headings will default to English if not provided: `[\"Days\", \"Hours\", \"Minutes\", \"Seconds\"]`\n\n## API\n\n### `FlipDown.prototype.constructor(uts, [el], [opts])`\n\nCreate a new FlipDown instance.\n\n#### Parameters\n\n##### `uts`\n\nType: _number_\n\nThe unix timestamp to count down to (in seconds).\n\n##### `[el]`\n\n**Optional**  \nType: _string_ (default: `flipdown`)\n\nThe DOM element ID to attach this FlipDown instance to. Defaults to `flipdown`.\n\n##### `[opts]`\n\n**Optional**  \nType: _object_ (default: `{}`)\n\nOptionally specify additional configuration settings. Currently supported settings include:\n\n- [`theme`](#Themes)\n- [`headings`](#Headings)\n\n### `FlipDown.prototype.start()`\n\nStart the countdown.\n\n### `FlipDown.prototype.ifEnded(callback)`\n\nCall a function once the countdown has ended.\n\n#### Parameters\n\n##### `callback`\n\nType: _function_\n\nFunction to execute once the countdown has ended.\n\n#### Example\n\n```javascript\nvar flipdown = new FlipDown(1538137672)\n\n  // Start the countdown\n  .start()\n\n  // Do something when the countdown ends\n  .ifEnded(() =\u003e {\n    console.log(\"The countdown has ended!\");\n  });\n```\n\n## Acknowledgements\n\nThanks to the following people for their suggestions/fixes:\n\n- [@chuckbergeron](https://github.com/chuckbergeron) for his help with making FlipDown responsive.\n- [@vasiliki-b](https://github.com/vasiliki-b) for spotting and fixing the Safari backface-visibility issue.\n- [@joeinnes](https://github.com/joeinnes) for adding i18n to rotor group headings.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPButcher%2Fflipdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPButcher%2Fflipdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPButcher%2Fflipdown/lists"}