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/[email protected]/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	true
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

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Lint and test your code using npm test.

License

Copyright (c) 2021-2023 Ferdinand Prantl

Licensed under the MIT license.