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.
<script type="module" src="https://unpkg.com/web-clocks@1.0.0/dist/index.mjs"></script>
<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">
import { AnaClock, DigiClock } from '../dist/index.mjs'
...
</script>
<script type="module">
import AnaClock from '../dist/ana-clock.mjs'
import DigiClock from '../dist/digi-clock.mjs'
...
</script>
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.