Js-easy-clock NPM

Analog Clock Widget

An Analog Clock Plugin Widget

Getting Started

Download the file - https://github.com/harshit-sinha-developer/jq-clock/blob/master/dist/bundle.min.js
Include it in your scripts

<script src="dist/bundle.min.js"></script>

Using ES2015 modules along with webpack

npm install js-easy-clock --save

Import

import * as ClockWidget from "js-easy-clock";

Make a div in html

<div id="myClock"></div>

Pass the div to ClockWidget initialisation

const config = { 
    width: 500, 
    height: 500, 
    radius: 200, 
    watchFace: 'FACE_3' 
}
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'), config);

Usage

Configuration

Pass configurations to the widget while initialization

const config = { width:  500, height:  500, radius:  200, watchFace:  'FACE_3' };
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'), config);

Alternatively configuration can also be done using configure function

const config = { width:  500, height:  500, radius:  200, watchFace:  'FACE_3' };
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'));
clock.configure(config);

Suported Properties

Watch Faces

The watch can be configured using the config property - faceConfg Sample Face Config -

const faceConfig = {
    "isFrameGradient": true,
    "frameGradientColorList": ['#333', '#FFFFFF', '#333'],
    "hingeColor": '#333',
    "handColor": "#333"
}
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'), { width:  500, height:  500, radius:  200, faceConfig: faceConfig });

Additionally there are some predefined watch faces as which can be used using property - watchFace

const config = {
    width: 500,
    height: 500,
    radius: 200,
    watchFace: 'FACE_3' // supported values ['FACE_0', 'FACE_1', 'FACE_2', 'FACE_3', 'FACE_4']
}
let clock = new ClockWidget.ClockApp(document.getElementById('myClock'), config);