Build a SaaS Trial Countdown Timer in JavaScript

// trial-timer.js - Basic countdown timer
class TrialCountdownTimer {
  constructor(trialEndDate, containerSelector) {
    this.endDate = new Date(trialEndDate);
    this.container = document.querySelector(containerSelector);
    this.intervalId = null;
  }

  getTimeRemaining() {
    const now = new Date();
    const diff = this.endDate.getTime() - now.getTime();

    if (diff <= 0) {
      return { expired: true, days: 0, hours: 0, minutes: 0, seconds: 0 };
    }

    return {
      expired: false,
      days: Math.floor(diff / (1000 * 60 * 60 * 24)),
      hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((diff / (1000 * 60)) % 60),
      seconds: Math.floor((diff / 1000) % 60),
    };
  }

  render() {
    const time = this.getTimeRemaining();

    if (time.expired) {
      this.container.innerHTML = `
        <div class="trial-timer trial-timer--expired">
          <span>Trial Expired</span>
          <a href="/pricing" class="trial-timer__cta">Upgrade Now</a>
        </div>
      `;
      this.stop();
      return;
    }

    this.container.innerHTML = `
      <div class="trial-timer">
        <div class="trial-timer__label">Trial ends in</div>
        <div class="trial-timer__segments">
          <div class="trial-timer__segment">
            <span class="trial-timer__value">${time.days}</span>
            <span class="trial-timer__unit">days</span>
          </div>
          <div class="trial-timer__segment">
            <span class="trial-timer__value">${time.hours}</span>
            <span class="trial-timer__unit">hrs</span>
          </div>
          <div class="trial-timer__segment">
            <span class="trial-timer__value">${time.minutes}</span>
            <span class="trial-timer__unit">min</span>
          </div>
        </div>
        <a href="/pricing" class="trial-timer__cta">Upgrade</a>
      </div>
    `;
  }

  start() {
    this.render();
    this.intervalId = setInterval(() => this.render(), 1000);
  }

  stop() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  }
}

// Usage:
const timer = new TrialCountdownTimer(
  '2026-04-03T23:59:59Z', // UTC timestamp from server
  '#trial-timer'
);
timer.start();

// Add urgency levels to the timer class
getUrgencyLevel() {
  const time = this.getTimeRemaining();
  const totalHours = time.days * 24 + time.hours;

  if (time.expired) return 'expired';
  if (totalHours < 24) return 'critical';    // Red
  if (time.days < 3) return 'urgent';        // Orange
  if (time.days < 7) return 'warning';       // Yellow
  return 'relaxed';                          // Green
}

getUrgencyColor() {
  const colors = {
    relaxed: '#22c55e',   // Green
    warning: '#eab308',   // Yellow
    urgent: '#f97316',    // Orange
    critical: '#ef4444',  // Red
    expired: '#ef4444',   // Red
  };
  return colors[this.getUrgencyLevel()];
}

// Update render to use urgency
render() {
  const time = this.getTimeRemaining();
  const urgency = this.getUrgencyLevel();
  const color = this.getUrgencyColor();

  // Apply color to container
  this.container.style.borderColor = color;
  this.container.dataset.urgency = urgency;

  // Show different display based on urgency
  const showSeconds = urgency === 'critical';

  // ... rest of render logic
}

// Server time synchronization
class TimeSyncedTimer extends TrialCountdownTimer {
  constructor(trialEndDate, containerSelector) {
    super(trialEndDate, containerSelector);
    this.serverOffset = 0; // ms difference between server and client
  }

  async syncWithServer() {
    try {
      const before = Date.now();
      const response = await fetch('/api/time');
      const after = Date.now();
      const { serverTime } = await response.json();

      // Account for network latency
      const latency = (after - before) / 2;
      const serverNow = new Date(serverTime).getTime() + latency;
      this.serverOffset = serverNow - after;
    } catch (error) {
      // If sync fails, use client time (better than crashing)
      console.warn('Time sync failed, using client time');
    }
  }

  getTimeRemaining() {
    const now = Date.now() + this.serverOffset;
    const diff = this.endDate.getTime() - now;
    // ... same calculation as before
  }

  async start() {
    await this.syncWithServer();
    super.start();

    // Re-sync every 10 minutes
    setInterval(() => this.syncWithServer(), 10 * 60 * 1000);
  }
}

/* trial-timer.css - Responsive floating widget */
.trial-timer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--background);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: system-ui, sans-serif;
  transition: border-color 0.3s ease;
}

/* Responsive: Stack on mobile */
@media (max-width: 480px) {
  .trial-timer {
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 12px 12px 0 0;
    justify-content: center;
  }
}

/* Accessibility: Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .trial-timer { transition: none; }
  .trial-timer__value { animation: none; }
}

/* ARIA: Announce time changes to screen readers */
.trial-timer[role="timer"] {
  /* Screen reader will announce changes */
}

.trial-timer__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

// Accessible timer rendering
render() {
  const time = this.getTimeRemaining();
  const ariaLabel = time.expired
    ? 'Your trial has expired'
    : `Trial ends in ${time.days} days, ${time.hours} hours, ${time.minutes} minutes`;

  this.container.setAttribute('role', 'timer');
  this.container.setAttribute('aria-label', ariaLabel);
  this.container.setAttribute('aria-live', 'polite');
  // Only announce every 5 minutes to avoid screen reader spam
  // ...
}

// Dismissal with cooldown
dismiss() {
  const urgency = this.getUrgencyLevel();
  const cooldowns = {
    relaxed: 8 * 60 * 60 * 1000,   // 8 hours
    warning: 4 * 60 * 60 * 1000,   // 4 hours
    urgent: 1 * 60 * 60 * 1000,    // 1 hour
    critical: 30 * 60 * 1000,      // 30 minutes
  };

  const cooldown = cooldowns[urgency] || 4 * 60 * 60 * 1000;
  const showAgainAt = Date.now() + cooldown;

  localStorage.setItem('trial_timer_dismissed', showAgainAt.toString());
  this.container.classList.add('trial-timer--minimized');

  // Auto-restore after cooldown
  setTimeout(() => {
    localStorage.removeItem('trial_timer_dismissed');
    this.container.classList.remove('trial-timer--minimized');
  }, cooldown);
}

shouldShow() {
  const dismissedUntil = localStorage.getItem('trial_timer_dismissed');
  if (!dismissedUntil) return true;
  return Date.now() > parseInt(dismissedUntil, 10);
}

// TrialCountdown.tsx - React component
import { useState, useEffect, useCallback } from 'react';

interface TimeRemaining {
  expired: boolean;
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
}

export function TrialCountdown({ endDate }: { endDate: string }) {
  const [time, setTime] = useState<TimeRemaining | null>(null);

  const calculate = useCallback(() => {
    const diff = new Date(endDate).getTime() - Date.now();
    if (diff <= 0) {
      return { expired: true, days: 0, hours: 0, minutes: 0, seconds: 0 };
    }
    return {
      expired: false,
      days: Math.floor(diff / 86400000),
      hours: Math.floor((diff / 3600000) % 24),
      minutes: Math.floor((diff / 60000) % 60),
      seconds: Math.floor((diff / 1000) % 60),
    };
  }, [endDate]);

  useEffect(() => {
    setTime(calculate());
    const interval = setInterval(() => setTime(calculate()), 1000);
    return () => clearInterval(interval);
  }, [calculate]);

  if (!time) return null;

  const urgency = time.expired ? 'expired'
    : time.days * 24 + time.hours < 24 ? 'critical'
    : time.days < 3 ? 'urgent'
    : time.days < 7 ? 'warning'
    : 'relaxed';

  return (
    <div className={`trial-timer trial-timer--${urgency}`} role="timer">
      {time.expired ? (
        <span>Trial Expired - <a href="/pricing">Upgrade Now</a></span>
      ) : (
        <>
          <span>{time.days}d {time.hours}h {time.minutes}m</span>
          <a href="/pricing">Upgrade</a>
        </>
      )}
    </div>
  );
}