Minimal Digital Clock With Optional Timezone – clock-tz.js

Preview:

Description:

clock-tz.js is a super tiny JavaScript library to generate an easy-to-style digital clock showing the current local time and date.

It comes with an optional timezone setting which allows you to show current local time around the world.

How to use it:

1. Install & download the library.

# NPM
$ npm install clock-tz --save

2. Import the clock.min.js into the HTML document.

<script src="clock.js"></script>

3. Create date/month/year/hours/minutes/seconds slots for the clock.

<span id="date"></span>
<span id="month"></span>
<span id="year"></span>
<span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span>

4. Create a new clock instance.

const clock = new Clock();

5. Start the clock.

clock.start();

6. Determine the time offset added to UTC time.

const clock = new Clock({
      timeZoneOffset: -7.00
});

7. Customize the month names.

const clock = new Clock({
      monthNames: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
});

8. Apply your own CSS styles to the clock.

span {
  /* your styles here */
}

9. Override the default selectors.

const clock = new Clock({
      dateId: 'date',
      monthId: 'month',
      yearId: 'year',
      hoursId: 'hours',
      minutesId: 'minutes',
      secondsId: 'seconds'
});