Demo 1: Default Countdown (New Year 2027)

Standard countdown with days, hours, minutes, and seconds.

<div data-tradecalcs-countdown
     data-target="2027-01-01T00:00:00"
     data-labels="Days,Hours,Minutes,Seconds"
     data-complete="Happy New Year 2027!">
</div>

Demo 2: Sale Countdown (24 Hours)

Countdown for a limited-time sale or promotion.

<div data-tradecalcs-countdown
     data-target="2026-05-21T10:17:00"
     data-labels="Days,Hours,Mins,Secs"
     data-complete="Sale Ended!">
</div>

Demo 3: Compact Style

Smaller countdown for sidebars or tight spaces.

<div data-tradecalcs-countdown
     data-compact="true"
     data-target="2026-06-01T00:00:00"
     data-labels="D,H,M,S">
</div>

Demo 4: Custom Theme (Purple)

Customized colors using CSS variables.

<div data-tradecalcs-countdown
     data-target="2026-07-04T00:00:00"
     style="--tc-countdown-bg: #faf5ff;
            --tc-countdown-border: #9333ea;
            --tc-countdown-value-color: #7e22ce;">
</div>

Configuration Options

Data Attributes

data-target (required) — Target date/time in ISO format (e.g., "2027-01-01T00:00:00")
data-labels (optional) — Comma-separated labels for time units (default: "Days,Hours,Minutes,Seconds")
data-complete (optional) — Message to show when countdown completes (default: "Time's up!")
data-hide-complete (optional) — Set to "false" to show completion message instead of hiding (default: "true")
data-compact (optional) — Set to "true" for compact style
data-minimal (optional) — Set to "true" for minimal style (no background/border)

CSS Custom Properties

--tc-countdown-bg — Background color
--tc-countdown-border — Border color
--tc-countdown-value-color — Number color
--tc-countdown-label-color — Label color
--tc-countdown-complete-color — Completion message color
--tc-countdown-radius — Border radius
--tc-countdown-padding — Container padding
--tc-countdown-gap — Gap between time units
--tc-countdown-value-size — Number font size
--tc-countdown-label-size — Label font size

JavaScript API

// Initialize all countdowns manually
TradeCalcsCountdown.init();

// Initialize specific countdown
const element = document.querySelector('[data-tradecalcs-countdown]');
TradeCalcsCountdown.initElement(element);

// Stop a countdown
TradeCalcsCountdown.stop(element);
TradeCalcsCountdown.stop('countdown-id');

// Listen for completion
element.addEventListener('tc-countdown-complete', function(e) {
  console.log('Countdown completed!', e.detail);
});

Features

✅ Pure vanilla JavaScript — no dependencies
✅ Lightweight — ~3KB total (JS + CSS)
✅ Auto-initialization — works immediately after loading
✅ Mobile responsive — adapts to any screen size
✅ Accessible — ARIA labels for screen readers
✅ Keyboard navigation — fully keyboard accessible
✅ Dark mode support — respects prefers-color-scheme
✅ Reduced motion support — respects prefers-reduced-motion
✅ Customizable — CSS variables for easy theming
✅ Multiple instances — unlimited countdowns per page
✅ Event system — completion callbacks
✅ Self-hosted — own it forever, no recurring fees

Use Cases

Sales & Promotions — Limited-time offers, flash sales, discount deadlines
Events — Conference countdown, webinar reminder, launch dates
Product Launches — Build anticipation for new releases
Construction Projects — Project completion countdown, permit deadlines
Seasonal — Holiday countdowns, New Year, special dates
Booking Deadlines — Last chance to book, registration closing

Browser Support

Works in all modern browsers:

✅ Chrome/Edge (Chromium) — Full support
✅ Safari — Full support
✅ Firefox — Full support
✅ Mobile Safari (iOS) — Full support
✅ Chrome Mobile (Android) — Full support

Countdown Timer Widget Demo