https://github.com/prantlf/web-clocks

Web components showing an analogue clock and a digital clock known from Svelte examples.
https://github.com/prantlf/web-clocks

analogue analogue-clock clock digital digital-clock svelte web-component webcomponent

Last synced: 17 days ago
JSON representation

Web components showing an analogue clock and a digital clock known from Svelte examples.

• Host: GitHub
• URL: https://github.com/prantlf/web-clocks
• Owner: prantlf
• License: mit
• Created: 2021-02-07T22:37:34.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-05-06T22:32:17.000Z (over 1 year ago)
• Last Synced: 2024-11-15T23:27:48.389Z (about 1 month ago)
• Topics: analogue, analogue-clock, clock, digital, digital-clock, svelte, web-component, webcomponent
• Language: JavaScript
• Homepage: https://prantlf.github.io/web-clocks/
• Size: 5.25 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Analogue and Digital Clocks as Web Components

[![Latest version](https://img.shields.io/npm/v/web-clocks)

 ![Dependency status](https://img.shields.io/librariesio/release/npm/web-clocks)

](https://www.npmjs.com/package/web-clocks)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/web-clocks)

[Web components] showing an analogue clock known from [a Svelte example] and a digital clock similar to [another Svelte example].

![Example](./example.png)

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:

```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

  // Load both clocks and use their classes

  import { AnaClock, DigiClock } from '../dist/index.mjs'

  ...

```

```html

  // Load either analogue or digital clock and use their classes

  import AnaClock from '../dist/ana-clock.mjs'

  import DigiClock from '../dist/digi-clock.mjs'

  ...

```

```js

// 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.

[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/