A progressively enhanced <count-down>
custom element that counts down to a specified date.
Demo.
Add the following to an HTML document:
<script type="module" src="path/to/countdown.js"></script>
Add the following to an HTML document:
<script type="module" src="https://unpkg.com/[email protected]/lib/countdown.js"></script>
Run npm i count-down-web-component
.
First create a <count-down>
element with default content for users of browsers that don't support web components:
<count-down>
<h2 slot="heading">Doors open in</h2>
<time>2019-06-01</time>
</count-down>
If the text content of the <time>
element isn't a valid string, a datetime
attribute must be added containing a valid string as its value.
Then add attributes to control the end date of the countdown and its layout breakpoints.
<count-down ends="2019-06-01" breakpoint1="25em" breakpoint2="50em">
<h2 slot="heading">Doors open in</h2>
<time>2019-06-01</time>
</count-down>
ends - The date, and optional time, the countdown will end at. Must be one of the following formats from https://html.spec.whatwg.org/multipage/text-level-semantics.html#datetime-value:
- valid date string
- valid local date and time string
- valid global date and time string
- Four or more ASCII digits, at least one of which is not U+0030 DIGIT ZERO (0)
breakpoint1 - The days, hours, minutes and seconds are displayed in a single column CSS grid. This attribute sets the min-width
media query where it goes to two columns.
breakpoint2 - This attribute sets the min-width
media query where the grid goes to four columns.
All attributes can be updated programatically, and the UI will update to reflect the changes.
const clock = document.querySelector('count-down');
clock.ends = '2022-05-10';
clock.breakpoint1 = '100rem';
clock.breakpoint2 = '800px';
The <count-down>
element can be styled using a universal, element, class, id or attribute selector as normal. Inherited properties will also work inside its shadow DOM e.g. font-family
and color
.
Two custom properties are available to set the font-size
of the numbers and their units:
--countdown-number-font-size
--countdown-unit-font-size
Don't forget styles for the default experience!
MIT License