Skip to content

TypeScript library that instantiates a simple countdown clock

License

Notifications You must be signed in to change notification settings

bjf5201/ticktock

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5a885ec · Nov 6, 2024

History

23 Commits
Oct 18, 2024
Oct 16, 2024
Oct 18, 2024
Oct 16, 2024
Oct 9, 2024
Nov 6, 2024
Oct 18, 2024
Oct 18, 2024
Nov 6, 2024
Oct 18, 2024
Oct 16, 2024
Oct 16, 2024

Repository files navigation

ticktock

ticktock is a little yet customizable countdown made with TypeScript using zero dependencies.

Features

  • Jest powered-tests
  • ~2.2kb (~1kb once gzipped)
  • Zero-dependencies

Examples

// Instanciating a new countdown clock with all defaults
new Clock();

// Instanciating a custom countdown clock
var countdownClock = new Clock({
    name: 'Christmas Clock',
    selector: '#timer', #default selector is #clock
    startMessage: "Will on December first at midnight!",
    endMessage: "Happy New Years!",
    msgPattern: "{days} days, {hours} hours, {minutes} minutes, and {seconds} seconds before New Years!",
    startDate: new Date('2024/12/01 12:00'),
    endDate: new Date('Jan 1, 2025 12:00:00')
});

You can also play around with the code at CodePen.

Options

You can pass the constructor number of options, including:

selector

The selector you want to inject the Clock into. It should be a valid string for document.querySelector().

Default: #clock

startMessage

The message to display before reaching dateStart.

Default: "Countdown will begin on {startDate}"

endMessage

The message to display once reaching dateEnd.

Default: "Countdown ended on {endDate}"

msgPattern

The message to display during the countdown where values between braces get replaced by actual numeric values. Possible patterns:

  • {years}
  • {months}
  • {weeks}
  • {days}
  • {hours}
  • {minutes}
  • {seconds}

Default: "{days} days, {hours} hours, {minutes} minutes and {seconds} seconds left."

startDate

The date to start the countdown to. Should be a valid instance of class Date. Documentation here at MDN.

Default: new Date() (now)

endDate

The date to end the countdown to. Should be a valid instance of class Date. Documentation here at MDN.

Default: new Date(new Date().getTime() + (24 * 60 * 60 * 1000)) (tomorrow)

onStart

The function to be called whenever the countdown starts.

Default: null

onEnd

The function to be called whenever the countdown stops.

Default: null

leadingZeros

Defines whether or not leading zeros are displayed when numbers are between 0 and 9.

Default: null

initialize

Defines whether or not the countdown should be initialized when instancied. If set to false, you can manually launch it with .initialize().

Default: true

jQuery events

The script doesn't require jQuery at all meanwhile it fires two events on your element if you happen to have jQuery loaded: countdownStart and countdownEnd. You can use them this way:

new Countdown({
    selector: '#alarm'
})

$('#alarm').on('countdownStart', function() {
    // do something
});

About

TypeScript library that instantiates a simple countdown clock

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published