A Web Component to display an event countdown.
<script type="module" src="relative-time.js"></script>
<relative-time><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
<script type="module" src="relative-time.js"></script>
<!-- Updates every 1 second -->
<relative-time update="1"><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
<!-- Disable updates -->
<relative-time update="false"><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
<script type="module" src="relative-time.js"></script>
<relative-time division="second"><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
<script type="module" src="relative-time.js"></script>
<relative-time max-divions="minute"><time datetime="2024-04-09T00:00:00+14:00">9 April 2024</time></relative-time>
You have a few options (choose one of these):
- Install via npm:
npm install @chrisburnell/relative-time
- Download the source manually from GitHub into your project.
- Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
Make sure you include the <script>
in your project (choose one of these):
<!-- Host yourself -->
<script type="module" src="relative-time.js"></script>
<!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://www.unpkg.com/@chrisburnell/relative-time/relative-time.js"
></script>
<!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://esm.sh/@chrisburnell/relative-time"
></script>
With thanks to the following people:
- David Darnes for creating this Web Component repo template