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

Demo

NPM

NPM

Default Configuration Options

``javascript
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
`HTML

`
`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

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