Custom clock element

A custom clock web component to use in projects needing an analog clock.

Element has been implemented using pure vanilla Javascript.

Installation

To use the custom clock component in your code:

From your project folder, install the component from npm.

npm install @silent-human/custom-clock

Import the component.

In an HTML page:

<script src="./node_modules/@silent-human/custom-clock/custom-clock.js"></script>

Add the component to your application or component:

<custom-clock></custom-clock>

Note: Delete screenshot-examples folder in the node_modules, once installed, to reduce the size of the module. The screenshot-examples folder is just a reference to the examples pictures (below) for the README file.

API

Default attributes values:

dark => false,
hands-color => '{"hour":"#1a1919", "minute":"slateblue", "second":"slateblue"}',
numbers-color => "#1a1919",
bg-color => "#e7e7e7",
bg-image => null,
date => false,
date-color => null,
date-style => null,
size => 400,
square => false,
clock-style => "number"

Possible attributes values:

dark,
hands-color=>
  '{
    "hour":"#1a1919", 
    "minute":"slateblue", 
    "second":"rgb(0,0,0)"
    }',
numbers-color => "#1a1919", "red" or "rgb(0,0,0)",
bg-color => "#1a1919", "red" or "rgb(0,0,0)",
bg-image => "option-1" to "option-5" or "image string URL => http://imageURL",
date,
date-color => "#1a1919", "red" or "rgb(0,0,0)",
date-style => "outline",
size => "600" Number between 300 to 800 in pixels,
square,
clock-style => "number","line","dot" or "square"

Usage example:

<custom-clock
  dark
  hands-color='{"minute":"#c80000", "second":"#c80000"}'
  numbers-color="yellow"
  bg-image="option-1"
  date
  date-color="yellow"
  date-style="outline"
  size="450"
  square
  clock-style="dot"
>
</custom-clock>

Feedback

The element provides some feedback/warning message in the console, when for example, some attributes are assigned without values.

Screenshots of custom-clock examples covering most/all attributes