chrisburnell/event-countdown
1
0
Fork 0
mirror of https://github.com/chrisburnell/event-countdown.git synced 2026-01-08 18:13:23 +00:00
Code Issues Projects Releases Packages Wiki Activity
A Web Component to display an event countdown. https://chrisburnell.com/event-countdown/
17 commits 1 branch 12 tags 65 KiB
Find a file
Exact
Chris Burnell d0213cb506
 chore: update .editorconfig
2024-08-06 14:04:29 +08:00
.github add FUNDING.yml 2024-08-05 19:02:55 +08:00
.editorconfig chore: update .editorconfig 2024-08-06 14:04:29 +08:00
.npmignore chore: code clean up 2024-08-06 13:59:54 +08:00
.prettierignore chore: code clean up 2024-08-06 13:59:54 +08:00
.prettierrc chore: code clean up 2024-08-06 13:59:54 +08:00
demo.html feat: add more configuration options 2024-05-20 21:13:53 +08:00
event-countdown.js chore: code clean up 2024-08-06 13:59:54 +08:00
LICENSE initital commit 2024-04-08 01:51:32 +08:00
package.json add FUNDING.yml 2024-08-05 19:02:55 +08:00
README.md feat: add more configuration options 2024-05-20 21:13:53 +08:00

README.md

event-countdown

A Web Component to display an event countdown.

Demo | Further reading

Usage

General usage example

<script type="module" src="event-countdown.js"></script>

<event-countdown name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

With end point

<script type="module" src="event-countdown.js"></script>

<event-countdown name="My event">My event ends on <time end datetime="2024-04-09T23:59:59-12:00">9 April 2024 23:59:59 UTC-12</time>.</event-countdown>

Both start and end points

<script type="module" src="event-countdown.js"></script>

<event-countdown name="My event" start="2024-04-09T00:00:00+14:00" end="2024-04-09T23:59:59-12:00">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time> and ends on <time end datetime="2024-04-09T23:59:59-12:00">9 April 2024 23:59:59 UTC-12</time>.</event-countdown>

Annual events

<script type="module" src="event-countdown.js"></script>

<!-- Roll over to next year if event has passed -->
<event-countdown annual="true" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

Update frequency

<script type="module" src="event-countdown.js"></script>

<!-- Updates every 1 second -->
<event-countdown update="1" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

<!-- Disable updates -->
<event-countdown update="false" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

Specific division

<script type="module" src="event-countdown.js"></script>

<!-- Always format using seconds -->
<event-countdown division="second" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

Maximum division

<script type="module" src="event-countdown.js"></script>

<!-- Format using seconds up to minutes -->
<event-countdown max-division="minute" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

Numeric format

<script type="module" src="event-countdown.js"></script>

<!-- Automatically choose when to use numbers vs. words in formatting -->
<event-countdown format-numeric="auto" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

<!-- Always use numbers in time formatting -->
<event-countdown format-numeric="always" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

Style format

<script type="module" src="event-countdown.js"></script>

<!-- Long formatting (e.g. 1 second) -->
<event-countdown format-style="long" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

<!-- Short formatting (e.g. 1 sec.) -->
<event-countdown format-style="short" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

<!-- Narrow formatting (e.g. 1s) -->
<event-countdown format-style="narrow" name="My event">My event starts on <time start datetime="2024-04-09T00:00:00+14:00">9 April 2024 00:00:00 UTC+14</time>.</event-countdown>

Installation

You have a few options (choose one of these):

  1. Install via npm: npm install @chrisburnell/event-countdown
  2. Download the source manually from GitHub into your project.
  3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="event-countdown.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@chrisburnell/event-countdown/event-countdown.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@chrisburnell/event-countdown"
></script>

Credit

With thanks to the following people: