Web Clocks
Web components showing an analogue clock and a digital clock known from Svelte examples.
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.
