Skip to content

Latest commit

 

History

History
91 lines (80 loc) · 2.83 KB

README.md

File metadata and controls

91 lines (80 loc) · 2.83 KB

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

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'
    }
});