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();
let clockTxt = 'Not Started';
let statusTxt = 'Running...';

c.configure({ 
    target: Duration.of(30, 'seconds')
});
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();

c.configure({ target: Duration.of(365, 'days'), interval: Duration.of(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: Duration.of(5, 'minutes'), interval: Duration.of(100, 'milliseconds') });

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();