Total CSS and JS Analog Clock with Maximum Customization. Including Emojis for Clock Indicators
npm install customizable-analog-clock
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'
}
});
``