{"id":20794124,"url":"https://github.com/bladeski/countdown-timer","last_synced_at":"2026-05-06T19:35:14.611Z","repository":{"id":63040931,"uuid":"564756395","full_name":"bladeski/countdown-timer","owner":"bladeski","description":"This is a small app that serves as a customisable countdown timer","archived":false,"fork":false,"pushed_at":"2023-10-19T12:08:48.000Z","size":960,"stargazers_count":2,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-18T11:16:13.715Z","etag":null,"topics":["accessible","countdown","javascript","lightweight","parceljs","static-site","timer","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/bladeski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null}},"created_at":"2022-11-11T12:29:30.000Z","updated_at":"2023-08-02T13:53:18.000Z","dependencies_parsed_at":"2023-02-19T06:15:59.958Z","dependency_job_id":null,"html_url":"https://github.com/bladeski/countdown-timer","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bladeski%2Fcountdown-timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bladeski%2Fcountdown-timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bladeski%2Fcountdown-timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bladeski%2Fcountdown-timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bladeski","download_url":"https://codeload.github.com/bladeski/countdown-timer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243137220,"owners_count":20242185,"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":["accessible","countdown","javascript","lightweight","parceljs","static-site","timer","typescript"],"created_at":"2024-11-17T16:13:36.070Z","updated_at":"2026-05-06T19:35:14.580Z","avatar_url":"https://github.com/bladeski.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Countdown Timer\n\n## About\n\nThis is a lightweight, accessible and customisable countdown timer web component built with TypeScript and packaged with ParcelJS.\n\nA [demo is available here](https://bladeski.github.io/countdown-timer-example/)\n\n## Getting Started\n\nTo get started, install this into your project using:\n\n`npm install @bladeski/countdown-timer`\n\nor\n\n`yarn add @bladeski/countdown-timer`.\n\nOnce installed, simply import into your project using `import '@bladeski/countdown-timer'`, then add the following tag into your HTML `\u003ccountdown-component\u003e\u003c/countdown-component\u003e`.\n\nTo access the component methods, events, etc. simply find it in the DOM as below:\n\n```js\n  const countdownComponent = document.querySelector('countdown-component');\n  countdownComponent.setCountdownLength([0,0,30]);\n  countdownComponent.startCountdown();\n```\n\n### TypeScript\n\nWhen using TypeScript, use the `CountdownComponent` cast to the correct type using:\n\n```ts\nconst countdownComponent = document.querySelector('countdown-component') as CountdownComponent;\n```\n\n## API\n\n### Data-Attributes\n\n#### data-base-font-size\n\nPass this data attribute into the web component with a number value to set the base font size.\n\n### Properties\n\n#### timeLeft\n\nThis will return the time left on the timer.\n\n```ts\n  timeLeft: [hoursLeft: number, minutesLeft: number, secondsLeft: number]\n```\n\n### Methods\n\n#### setCountdownLength\n\nSets the length of the countdown timer.\n\n``` ts\n  setCountdownLength(countdownLength: number[], hideZeroedUnits = false);\n```\n\n#### startCountdown\n\nStarts the countdown.\n\n``` ts\n  startCountdown();\n```\n\n#### stopCountdown\n\nStops/pauses the countdown.\n\n``` ts\n  stopCountdown();\n```\n\n#### reset\n\nResets the countdown timer.\n\n``` ts\n  reset();\n```\n\n#### focus\n\nOverrides the default focus method and focusses the start/stop button.\n\n``` ts\n  focus();\n```\n\n### Events\n\n#### Countdown Start\n\nTriggered when the countdown has started.\n\nExample\n\n``` ts\n  countdownComponent.addEventListener('countdownStart', () =\u003e console.log('Countdown Started'));\n```\n\n#### Countdown Stop\n\nTriggered when the countdown has stopped.\n\nExample\n\n``` ts\n  countdownComponent.addEventListener('countdownStop', () =\u003e console.log('Countdown Stopped'));\n```\n\n#### Countdown End\n\nTriggered when the countdown has reached 00:00:00.\n\nExample\n\n``` ts\n  countdownComponent.addEventListener('countdownEnd', () =\u003e console.log('Countdown Ended'));\n```\n\n#### Countdown Reset\n\nTriggered when the countdown has been reset.\n\nExample\n\n``` ts\n  countdownComponent.addEventListener('countdownReset', () =\u003e console.log('Countdown Reset'));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbladeski%2Fcountdown-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbladeski%2Fcountdown-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbladeski%2Fcountdown-timer/lists"}