Analogue and Digital Clocks as Web Components

Web components showing an analogue clock known from [a Svelte example] and a digital clock similar to another Svelte example.

See the on-line demo or the storybook.

Usage

1: Place the ana-clock or digi-clock web component with or without attributes to a page. For example:

<ana-clock></ana-clock>
<ana-clock secondhand=false></ana-clock>
<digi-clock></digi-clock>
<digi-clock seconds=false></digi-clock>

2: Include the implementation of the web component on your page, typically at the bottom of the body element. Choose the way that fits your scenario the base.

<!-- Load both clocks from the NPM CDN -->
<script type=module src=https://unpkg.com/web-clocks@0.0.1/dist//index.mjs></script>

<!-- Load either analogue or digital clock from a local installation -->
<script type=module src=node_modules/web-clocks/dist/ana-clock.mjs></script>
<script type=module src=node_modules/web-clocks/dist/digi-clock.mjs></script>

<script type=module>>
  // Load both clocks and use their classes
  import { AnaClock, DigiClock } from '../dist/index.mjs'
  ...
</script>

<script type=module>>
  // Load either analogue or digital clock and use their classes
  import AnaClock from '../dist/ana-clock.mjs'
  import DigiClock from '../dist/digi-clock.mjs'
  ...
</script>

// Include either analogue or digital clock in your application bundle
import { AnaClock, DigiClock } from 'web-clocks'

Attributes

Attribute	Description	Values	Default
markers	chooses the density of markers (analogue)	sixty | twelve | four | none	sixty
secondhand	disables the second hand (analogue)	boolean	false
seconds	disables the second part (digital)	boolean	false
offset	adds the offset in minutes to UTC	number of minutes	0

Methods

Name	Description
stop()	stops the clock
restart()	sets the clock to the current time and starts ticking again

Events

Name	Triggered	Details
tick	when the second or the minute hand moves	current Date