Web components showing an analogue clock and a digital clock known from Svelte examples.
npm install web-clocks
[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].
1: Place the ana-clock or digi-clock web component with or without attributes to a page. For example:
`html`
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.
`html`
`html`
`html`
`html`
`js`
// Include either analogue or digital clock in your application bundle
import { AnaClock, DigiClock } from 'web-clocks'
| 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 |
| Name | Description |
|-------------|-------------------------------------------------------------|
| stop() | stops the clock |restart()
| | sets the clock to the current time and starts ticking again |
| Name | Triggered | Details |
|--------|------------------------------------------|-----------------|
| tick | when the second or the minute hand moves | current Date |
In lieu of a formal styleguide, take care to maintain the existing coding style. Lint and test your code using npm test`.
Copyright (c) 2021-2023 Ferdinand Prantl
Licensed under the MIT license.
[a Svelte example]: https://svelte.dev/repl/clock?version=3.30.1
[another Svelte example]: https://svelte.dev/repl/a15e5bf484bf4eddafe68996d4235187?version=3.18.2
[Web components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
[on-line demo]: https://prantlf.github.io/web-clocks/
[storybook]: https://prantlf.github.io/web-clocks/storybook/