@k4ys4r/wc-clock NPM

🕑 <wc-clock/> 🕑

It is a web component written in JavaScript/HTML/CSS and without any dependencies. wc-clock allows to display an Analog clock and be customized based on its HTML attributes and CSS variables.

Installation

# with npm
npm i @k4ys4r/wc-clock

#with yarn
yarn add @k4ys4r/wc-clock

Once installed, import it in your application:

import "@k4ys4r/wc-clock";

//To get access to the Class properties
import { ClockComponent } from "@k4ys4r/wc-clock";

Or, you can imported from CDN :

import "https://cdn.skypack.dev/@k4ys4r/wc-clock";

Or in html script:

<script type="module" src="https://cdn.skypack.dev/@k4ys4r/wc-clock"></script>

Usage

Make sure you've add wc-clock to your app through NPM. See Installation for more details.
Add wc-clock to your app and placed it at the top.
Then it can be used like below:

<wc-clock></wc-clock>

Usage of `<wc-clock/>` attributes

wc-clock has four attributes can be used to be customized:

<wc-clock hours-ticks minutes-ticks time-zone fixed-time></wc-clock>

hours-ticks is used to display the 12 hours ticks on the clock
minutes-ticks is used to display the 48 minutes ticks on the clock

time-zone is used to define the time zone (default value Europe/Paris). A valid value must be included in the supported time zone value:

Intl.supportedValuesOf("timeZone");
// that gives an array of strings :
/*"Africa/Abidjan"
"Africa/Accra"
"Africa/Addis_Ababa"
"Africa/Algiers"
"Africa/Asmera"
"Africa/Bamako"
"Africa/Bangui"
"Africa/Banjul"
...
...
*/

fixed-time is used to a fixed time without updating of clock hands. Its value format : format hh:mm:ss (default value is 10:10:30)

Dynamic creation of `wc-clock`

// import class component
import { ClockComponent } from "@k4ys4r/wc-clock";

// Create wc-clock element
let wcClock = document.createElement(ClockComponent.tagName);

// set of attributes
wcClock.setAttribute(ClockComponent.attributes["fixed-time"], "");
wcClock.setAttribute(ClockComponent.attributes["hours-labels"], [3, 6, 9, 12]);
wcClock.setAttribute(ClockComponent.attributes["hours-ticks"], "");
wcClock.setAttribute(ClockComponent.attributes["hours-ticks"], "");
wcClock.setAttribute(ClockComponent.attributes["minutes-ticks"], "");

// remove of attributes
wcClock.removeAttribute(ClockComponent.attributes["fixed-time"]);
wcClock.setAttribute(ClockComponent.attributes["minutes-ticks"], "");

CSS style

wc-clock has different CSS variables can be used to style some part of the web component. All variables and their default values are listed below:

<style>
  wc-clock {
    --hours-hand-color: #b9b9b9;
    --minutes-hand-color: #b9b9b9;
    --seconds-hand-color: #ff3434;
    --clock-background-color: #1a1a1aff;
    --clock-color: #fff;
    --clock-width: 10rem;
    --seconds-hand-width: 1;
    --seconds-hand-height: 4;
    --minutes-hand-width: 6;
    --minutes-hand-height: 4;
    --hours-hand-width: 6;
    --hours-hand-height: 3;
    --clock-font-size: 1rem;
    --clock-font: Arial, Helvetica, sans-serif;
    --clock-hours-ticks-color: #fff;
    --clock-minutes-ticks-color: #ffffff90;
    --clock-hours-ticks-height: 0.45rem;
    --clock-hours-ticks-width: 0.15rem;
    --clock-minutes-ticks-height: 0.23rem;
    --clock-minutes-ticks-width: 0.05rem;
  }
</style>