Customizable Analog Clock

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

emoji numbers date

Demo

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

TS Usage
```
<div id="my-clock" style="width: 200px; height: 200px;"></div>
```
`javascript 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' } });


2. Core JS Usage (ES5)
```HTML
<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'
    }
});

Package detail