{"id":15073819,"url":"https://github.com/kumdotdev/countdown-timer","last_synced_at":"2026-02-14T13:03:31.238Z","repository":{"id":148801082,"uuid":"619257805","full_name":"kumdotdev/countdown-timer","owner":"kumdotdev","description":"Vanilla JS one-file Web Component","archived":false,"fork":false,"pushed_at":"2025-03-25T06:09:18.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-23T09:08:58.258Z","etag":null,"topics":["javascript","vanillajs","webcomponent"],"latest_commit_sha":null,"homepage":"https://kumdotdev.github.io/countdown-timer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kumdotdev.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2023-03-26T18:11:25.000Z","updated_at":"2025-03-25T06:09:22.000Z","dependencies_parsed_at":"2025-06-25T04:44:10.183Z","dependency_job_id":"5ad0112c-16c1-4d1b-8307-01ccc498f6a4","html_url":"https://github.com/kumdotdev/countdown-timer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kumdotdev/countdown-timer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumdotdev%2Fcountdown-timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumdotdev%2Fcountdown-timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumdotdev%2Fcountdown-timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumdotdev%2Fcountdown-timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kumdotdev","download_url":"https://codeload.github.com/kumdotdev/countdown-timer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kumdotdev%2Fcountdown-timer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29444064,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T12:43:28.304Z","status":"ssl_error","status_checked_at":"2026-02-14T12:43:14.160Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","vanillajs","webcomponent"],"created_at":"2024-09-25T03:04:56.343Z","updated_at":"2026-02-14T13:03:31.207Z","avatar_url":"https://github.com/kumdotdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Countdown Timer Web Component\n\nVanilla JS one-file Web Component dependency free and framework agnostic. No build required. Use it as is.\n\n## Demo\n\n[Visit the demo page for usage examples.](https://kumdotdev.github.io/countdown-timer/)\n\n## Install\n\n```\nnpm i @kumdotdev/countdown-timer\n```\n\n## React/Next.js\n\n```jsx\n'use client';\nimport { useEffect } from 'react';\n\nexport const MyComponent = () =\u003e {\n  useEffect(() =\u003e {\n    import('@kumdotdev/countdown-timer/countdown-timer.js');\n    return () =\u003e {};\n  }, []);\n};\n\nreturn (\n  \u003c\u003e\n    \u003ccountdown-timer\n      date='2028-01-01T23:42:00.000+01:00'\n      alarm='86400'\n    \u003e\u003c/countdown-timer\u003e\n  \u003c/\u003e\n);\n```\n\n## Import\n\n### CDN\n\n```HTML\n\u003cscript async type=\"module\" src=\"https://unpkg.com/@kumdotdev/countdown-timer/countdown-timer.js\"\u003e\u003c/script\u003e\n```\n\n### Local install\n\n```HTML\n\u003cscript async type=\"module\" src=\"/node_modules/@kumdotdev/countdown-timer/countdown-timer.js\"\u003e\u003c/script\u003e\n```\n\n### Import as module\n\n```HTML\n\u003cscript type=\"module\"\u003e\n  import '/node_modules/@kumdotdev/countdown-timer/countdown-timer.js';\n  // ...\n\u003c/script\u003e\n```\n\n## Usage\n\n**Use ISO 8601 date format to provide the desired enddate!**\n\nThe shorter version `2024-01-01T23:42` should work also.\n\n```HTML\n\u003ccountdown-timer\n  date=\"2024-01-01T23:42:00.000+01:00\"\u003e\n\u003c/countdown-timer\u003e\n```\n\n## Language support\n\nEnglish, French and German provided. You can add more languages to `L10N` constant. Defaults to english language.\n\n## Attributes\n\n| Attribute | Description                                                       |\n| --------- | ----------------------------------------------------------------- |\n| alarm     | [Optional] Time left in seconds to begin with pulsating the timer |\n| date      | ISO 8601 date for desired countdown target date                   |\n\n## Styling\n\n| CSS-Variable              | Description or additional info                                                     | Default     |\n| ------------------------- | ---------------------------------------------------------------------------------- | ----------- |\n| --cdt-digit-font-size     | Size of the timer digits. Use `inherit` to inherit from parent element's font-size | 2rem        |\n| --cdt-digit-font-family   | On the demo page the counter used `monospace` family                               | inherit     |\n| --cdt-digit-font-weight   | Another useful values could be `400` (normal)                                      | 700         |\n| --cdt-digit-text-color    |                                                                                    | #fefefe     |\n| --cdt-digit-box-color     | You can set the box color to `transparent` to omit the colored digit box           | #111        |\n| --cdt-digit-box-min-width | You can set the box min width. Useful when not using monspace font.                | fit-content |\n| --cdt-label-font-size     | The font size of the label beneath the digits                                      | 0.75rem     |\n\n### Defaults\n\n```css\n:root {\n  --cdt-digit-font-size: 2rem;\n  --cdt-digit-font-family: inherit;\n  --cdt-digit-font-weight: 700;\n  --cdt-digit-text-color: #fefefe;\n  --cdt-digit-box-color: #111;\n  --cdt-digit-box-min-width: fit-content;\n  --cdt-label-font-size: 0.75rem;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkumdotdev%2Fcountdown-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkumdotdev%2Fcountdown-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkumdotdev%2Fcountdown-timer/lists"}