Github API Reference

// moondial timer

Moondial is a tiny stopwatch, chronometer, and countdown timer library with support for millisecond precision built in TypeScript. Through RxJs, moondial provides high precision event-based clocks with a simple API.

This page contains a few small live examples. See the API reference for a deeper look at the functionality of the library.

// basic timer

This stopwatch will run for 30 seconds.
{{ statusTxt }}
{{ clockTxt }}

import { Clock, ClockState, Clockify, Duration } from '../clockify.js';

const c = new Clock({ target: Duration.of(30, 'seconds') });
let clockTxt = 'Not Started';
let statusTxt = 'Running...';

c.events.subscribe('updated', (state:ClockState) => {            
    clockTxt = Clockify.duration(state.time); 
});
c.events.subscribe('finished', (state:ClockState) => {            
    clockTxt = Clockify.duration(state.time);
    statusTxt = "FINISHED!";
});

c.start();

// interactive stopwatch

This timer has the start(), stop(), and pause() methods tied to button click events.

{{ phaseTxt }} - {{ clockTxt }}

import { Clock, ClockState, Clockify, Duration } from '../clockify.js';

const c = new Clock();
let clockTxt = Clockify.duration(c.state.time, ['minutes', 'seconds', 'milliseconds']);
let phaseTxt = c.state.phase.toLocaleUpperCase();

// we can also configure the clock after it is constructed
c.configure({ interval: 100 }); // 100 milliseconds
c.events.subscribe('started', (state:ClockState) => {
    phaseTxt = state.phase.toLocaleUpperCase();
});
c.events.subscribe('paused', (state:ClockState) => {
    phaseTxt = state.phase.toLocaleUpperCase();
});
c.events.subscribe('stopped', (state:ClockState) => {
    phaseTxt = state.phase.toLocaleUpperCase();
});
c.events.subscribe('updated', (state:ClockState) => {
    clockTxt = Clockify.duration(state.time, ['minutes', 'seconds', 'milliseconds']);
});

function start() {
    c.start();
}
function pause() {
    c.pause();
}
function stop() {
    c.stop();
}

// countdown timer

This timer is configured as a countdown timer. It will count backwards from an initial time value down to zero. The target time can also be customized if you want the countdown to finish early.

{{ phaseTxt }} - {{ clockTxt }}

import { Clock, ClockState, Clockify, Duration } from '../clockify.js';

const c = new Clock();
let clockTxt = 'Not Started';
let phaseTxt = c.state.phase.toLocaleUpperCase();

c.configure({ mode: 'countdown', initial: { minutes: 5 }, interval: 100 });

c.events.subscribe('started', (state:ClockState) => {
    phaseTxt = state.phase.toLocaleUpperCase();
    clockTxt = Clockify.duration(state.time);
});
c.events.subscribe('paused', (state:ClockState) => {
    phaseTxt = state.phase.toLocaleUpperCase();
});
c.events.subscribe('stopped', (state:ClockState) => {
    phaseTxt = state.phase.toLocaleUpperCase();
});
c.events.subscribe('finished', (state:ClockState) => {
    phaseTxt = state.phase.toLocaleUpperCase();            
    clockTxt = Clockify.duration(state.time);
});
c.events.subscribe('updated', (state:ClockState) => {
    clockTxt = Clockify.duration(state.time);
});

function start() {
    c.start();
}
function pause() {
    c.pause();
}
function stop() {
    c.stop();
}

c.start();