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.