web-clocks v1.0.0

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@1.0.0/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

Methods

Events

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.