Content

Countdown

Days, hours, minutes and seconds until a moment, or a timer that starts on the first visit.

Until a date

This demo counts to the first day of next year, in your time zone.

HTML

<div class="pw-countdown" data-pw-countdown data-to="2027-01-01T00:00:00" data-done="Happy new year"></div>

A timer per visitor

data-seconds starts when the visitor first sees it and is remembered in the browser. The button starts it again.

Your cart is held for

HTML

<span>Your cart is held for
  <span class="pw-countdown pw-countdown--plain" data-pw-countdown data-seconds="600" data-key="demo-cart" data-hide-days data-labels="d,h,m,s" data-done="0 minutes" id="demo-timer"></span>
</span>
<button class="pw-btn pw-btn--sm" id="demo-timer-again">Start again</button>

JavaScript

document.getElementById('demo-timer-again').addEventListener('click', function () {
  Partwise.get('#demo-timer', 'countdown').restart(600);
});

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-to`		The moment to count to, like `2027-01-01T00:00:00`. Add `Z` or `+01:00` to fix the time zone.
`data-seconds`		Instead of a date: seconds from the first visit.
`data-key`		Name under which the start of a per-visitor timer is remembered.
`data-labels`	`days,hours,minutes,seconds`	Your own words.
`data-hide-days`		No days box. Hours can go above 24.
`data-done`		Text when the time is up.

Classes

Class	What it does
`pw-countdown--plain`	Plain text without boxes, to use inside a sentence.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:done`	When it reaches zero.

From your script

var c = Partwise.get('#demo-timer', 'countdown');
c.left;            // milliseconds left
c.stop();
c.restart(600);    // seconds

Good to know

Screen readers get the time once a minute, not every second.
A per-visitor timer lives in the browser. A visitor can clear it, so do not use it for anything that must be enforced.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/30-carousel.css, js/30-carousel.js.