New JS Clock

Example 1: Basic System Clock

Display the current system time:

import { createClock } from 'new-js-clock';

const clock = createClock(document.getElementById('clock'));

// The clock automatically starts and syncs with system time
// Display: "14:30:25" (updates every second)

Example 2: High Precision Clock

Show centiseconds for higher precision:

const clock = createClock(
  document.getElementById('precision-clock'),
  undefined,
  { showCenti: true }
);

// Display: "14:30:25:83" (updates every 10ms)

Example 3: Countdown Timer

Create a countdown with a callback:

const countdown = createClock(
  document.getElementById('timer'),
  '00:05:00',  // 5 minutes
  {
    countdown: true,
    callback: () => {
      alert('Time is up!');
      // Or play a sound, redirect, etc.
    }
  }
);

// Control the countdown
countdown.stopClock();   // Pause
countdown.startClock();  // Resume
countdown.toggleClock(); // Toggle

Example 4: Custom Start Time

Start from a specific time and count up:

const custom = createClock(
  document.getElementById('custom'),
  '10:30:45'  // Start at this time
);

// Counts up from 10:30:45
// Will roll over at 23:59:59 to 00:00:00

Example 5: Multiple Independent Clocks

Create multiple clocks that work independently:

// Clock 1: System time
const clock1 = createClock(document.getElementById('clock1'));

// Clock 2: Countdown from 10 minutes
const clock2 = createClock(
  document.getElementById('clock2'),
  '00:10:00',
  { countdown: true }
);

// Clock 3: Custom time with centiseconds
const clock3 = createClock(
  document.getElementById('clock3'),
  '05:00:00',
  { showCenti: true }
);

// Each clock operates independently!
clock1.stopClock();  // Only stops clock1
clock2.stopClock();  // Only stops clock2

Example 6: 12-Hour Clock with AM/PM

Display time in 12-hour format with AM/PM indicator:

const clock12h = createClock(
  document.getElementById('clock12h'),
  undefined,  // Uses system time
  { use12Hour: true }
);

// Display examples:
// "02:30:45 PM" for 14:30:45
// "12:00:00 AM" for midnight
// "12:00:00 PM" for noon

const clock12h: ClockInstance = createClock(
  document.getElementById('clock12h')!,
  undefined,  // Uses system time
  { use12Hour: true }
);

// Works with all other options:
const clock12hWithCenti: ClockInstance = createClock(
  document.getElementById('clock12h-centi')!,
  undefined,
  {
    use12Hour: true,
    showCenti: true
  }
);
// Display: "02:30:45:50 PM"

Example 7: Multiple Timezone Dashboard

Display times from different timezones - choose between DST-aware (recommended) or static offset:

// Using IANA timezone names (DST-aware)
// New York - automatically adjusts for DST
const nyClock = createClock(
  document.getElementById('ny-time'),
  undefined,
  { timezone: 'America/New_York' }
);

// London - automatically adjusts for BST
const londonClock = createClock(
  document.getElementById('london-time'),
  undefined,
  { timezone: 'Europe/London' }
);

// Tokyo - no DST, but still works
const tokyoClock = createClock(
  document.getElementById('tokyo-time'),
  undefined,
  { timezone: 'Asia/Tokyo' }
);

// Sydney - Southern Hemisphere DST
const sydneyClock = createClock(
  document.getElementById('sydney-time'),
  undefined,
  { timezone: 'Australia/Sydney' }
);

// Combine with 12-hour format
const ny12hClock = createClock(
  document.getElementById('ny-12h'),
  undefined,
  {
    timezone: 'America/New_York',
    use12Hour: true
  }
);

// Using static offset (does NOT handle DST)
// New York (EST): UTC-5 - stays at -5 even during EDT
const nyClock = createClock(
  document.getElementById('ny-time'),
  undefined,
  { timezoneOffset: -5 }
);

// London (GMT): UTC+0
const londonClock = createClock(
  document.getElementById('london-time'),
  undefined,
  { timezoneOffset: 0 }
);

// Tokyo (JST): UTC+9
const tokyoClock = createClock(
  document.getElementById('tokyo-time'),
  undefined,
  { timezoneOffset: 9 }
);

// Mumbai (IST): UTC+5:30
const mumbaiClock = createClock(
  document.getElementById('mumbai-time'),
  undefined,
  { timezoneOffset: 5.5 }
);

Example 8: Pomodoro Timer

A practical example - Pomodoro technique timer:

let pomodoroCount = 0;

const pomodoro = createClock(
  document.getElementById('pomodoro'),
  '00:25:00',
  {
    countdown: true,
    callback: () => {
      pomodoroCount++;
      alert(`Pomodoro ${pomodoroCount} completed! Take a 5-minute break.`);

      // Reset for next pomodoro
      pomodoro.destroy();
      pomodoro = createClock(
        document.getElementById('pomodoro'),
        '00:25:00',
        {
          countdown: true,
          callback: () => alert('Next pomodoro done!')
        }
      );
    }
  }
);

Example 8: Kitchen Timer with Minutes Only

Hide hours for a simple minute:second display:

const kitchenTimer = createClock(
  document.getElementById('kitchen'),
  '00:03:00',
  {
    countdown: true,
    showHour: false,  // Hides hours
    callback: () => {
      document.getElementById('kitchen').style.background = '#ffebee';
      alert('Dinner is ready!');
    }
  }
);

// Display: "03:00" instead of "00:03:00"

Example 9: Stopwatch with Lap Times

Create a simple stopwatch with lap functionality:

const stopwatch = createClock(
  document.getElementById('stopwatch'),
  '00:00:00',
  { showCenti: true }
);

const laps = [];

function recordLap() {
  const lapTime = stopwatch.getTime();
  laps.push(lapTime);
  console.log(`Lap ${laps.length}: ${lapTime}`);
}

function resetStopwatch() {
  stopwatch.reset();  // Uses the new reset() method!
  laps.length = 0;
}

Example 10: Reusable Countdown with reset()

Create a countdown that can be easily restarted without recreating:

const countdown = createClock(
  document.getElementById('countdown'),
  '00:05:00',
  {
    countdown: true,
    callback: () => {
      alert('Time is up!');
    }
  }
);

// User can pause/resume
countdown.stopClock();
countdown.startClock();

// Reset to original time and restart - no need to destroy/recreate!
countdown.reset();

// This is much cleaner than the old way:
// countdown.destroy();
// countdown = createClock(element, '00:05:00', {...});

Example 11: Dynamic Time with setTime()

Change the displayed time dynamically without destroying the clock:

const clock = createClock(
  document.getElementById('clock'),
  '10:00:00'
);

// Later, change to a different time
clock.setTime('15:30:00');

// Works with centiseconds too
const precision = createClock(
  document.getElementById('precision'),
  '00:00:00:00',
  { showCenti: true }
);

clock.setTime('01:23:45:67');

// Perfect for setting a countdown time from user input
const userInput = document.getElementById('time-input').value;  // e.g., "00:10:00"
countdown.setTime(userInput);

Example 12: Pomodoro Timer with reset()

A practical Pomodoro timer using the new reset() method:

let pomodoroCount = 0;
const POMODORO_TIME = '00:25:00';
const BREAK_TIME = '00:05:00';
let isBreak = false;

const pomodoro = createClock(
  document.getElementById('pomodoro'),
  POMODORO_TIME,
  {
    countdown: true,
    callback: () => {
      if (!isBreak) {
        pomodoroCount++;
        alert(`Pomodoro ${pomodoroCount} completed! Take a 5-minute break.`);
        isBreak = true;
        pomodoro.setTime(BREAK_TIME);
        pomodoro.startClock();
      } else {
        alert('Break over! Starting next pomodoro.');
        isBreak = false;
        pomodoro.setTime(POMODORO_TIME);
        pomodoro.startClock();
      }
    }
  }
);

// Skip break button - just reset and continue
function skipBreak() {
  isBreak = false;
  pomodoro.setTime(POMODORO_TIME);
}

// Reset current pomodoro
function resetPomodoro() {
  pomodoro.reset();  // Easy reset to initial time!
}

Example 13: Stopwatch

Create a stopwatch that counts up from 00:00:00:

const stopwatch = createClock(
  document.getElementById('stopwatch'),
  undefined,
  { stopwatch: true }
);

// Display starts at "00:00:00" and counts up
// Stopwatch runs indefinitely (doesn't stop at midnight)

// Control like any other clock
stopwatch.stopClock();   // Pause
stopwatch.startClock();  // Resume
stopwatch.toggleClock(); // Toggle

// Reset back to 00:00:00
stopwatch.reset();

Example 14: Stopwatch with Lap Times

Record lap times during a stopwatch run:

const stopwatch = createClock(
  document.getElementById('stopwatch'),
  undefined,
  {
    stopwatch: true,
    lap: true,           // Enable lap mode
    lapWord: 'Split'     // Custom word (default: "Split" in splits mode, otherwise "Lap")
  }
);

// Record a lap - returns the lap time string
const lap1 = stopwatch.lap();  // "Split 1: 00:00:15"
const lap2 = stopwatch.lap();  // "Split 2: 00:00:32"
const lap3 = stopwatch.lap();  // "Split 3: 00:00:45"

// Get all laps as an array
const allLaps = stopwatch.getLaps();
// ["Split 1: 00:00:15", "Split 2: 00:00:32", "Split 3: 00:00:45"]

// Clear laps without stopping the stopwatch
stopwatch.clearLaps();

// Reset also clears laps
stopwatch.reset();

Example 15: Stopwatch with Centiseconds

High-precision stopwatch for accurate timing:

const precisionStopwatch = createClock(
  document.getElementById('precision-stopwatch'),
  undefined,
  {
    stopwatch: true,
    showCenti: true   // Show centiseconds
  }
);

// Display: "00:00:15:23" (hours:minutes:seconds:centiseconds)

Example 16: Race Timer with Custom Lap Word

Customize the lap word for different use cases:

// No word at all (just number and time)
const timer1 = createClock(
  document.getElementById('timer1'),
  undefined,
  { stopwatch: true, lap: true, lapWord: '' }
);
// Lap: "1: 00:01:23"

// Custom word for different sports
const raceTimer = createClock(
  document.getElementById('race'),
  undefined,
  { stopwatch: true, lap: true, lapWord: 'Checkpoint' }
);
// Lap: "Checkpoint 1: 00:05:30"