customizable-analog-clock

Customizable Analog Clock

Total CSS and JS Analog Clock with Maximum Customization with Neumorphic Designed Watchface. Including Emojis for Clock Indicators.

Demo

Demo

NPM

NPM

Default Configuration Options

const config = {
    htmlElement: '', //required
    showDate : false,
    showDigitalClock : false,
    showIndicators : false,
    clockIndicators : [],
    styleOptions : {
        fontSize: '30px',
        fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
        clockBackgroundColor: '#091921',
        clockBackgroundImage: '',
        clockBorderColor: '#132833',
        clockCenterBorderColor: '#fa9f22',
        clockCenterBackgroundColor: '#091921',
        clockSecondHandColor: '#fa9f22',
        clockMinuteHandColor: '#ffffff',
        clockHourHandColor: '#ffffff',
        clockIndicatorColor: '#607d8b',
        clockIndicatorIconColor: '#03a9f4',
        clockIndicatorMainColor: '#03a9f4',
        dateColor: '#c9c9c9',
        dateBackgroundColor: '#13222a',
        digitalClockColor: '#c9c9c9',
        digitalClockBackrground: '#13222a'
    }
}

Example Usage

Analog Clock is appended to the element so first please define empty DIV with fixed Height and Width

npm i --save customizable-analog-clock

1. TS Usage

<div id="my-clock" style="width: 200px; height: 200px;"></div>

import { AnalogClock } from 'customizable-analog-clock'

const clock = new AnalogClock({
    htmlElement : 'my-clock',
    showDate: true,
    showDigitalClock: true,
    showIndicators: true,
    clockIndicators : ['😄', '🙂', '🥪' , '🦜', '🐊', '💻', '🐅', '🐼', '🐘', '🚴‍♂️', '🏂', '🧑']
    styleOptions : {
        fontSize: '35px',
        fontFamily: 'Roboto'
    }
});

1. Core JS Usage (ES5)

<div id="my-clock" style="width: 200px; height: 200px;"></div>
<script>var exports = {};</script>
<script src="path/to/analog-clock.min.js"></script>

const clock = new AnalogClock({
    htmlElement : 'my-clock',
    showDate: true,
    showDigitalClock: true,
    showIndicators: true,
    clockIndicators : ['😄', '🙂', '🥪' , '🦜', '🐊', '💻', '🐅', '🐼', '🐘', '🚴‍♂️', '🏂', '🧑']
    styleOptions : {
        fontSize: '35px',
        fontFamily: 'Roboto'
    }
});