23 lines
604 B
Markdown
23 lines
604 B
Markdown
|
|
# Live timer element
|
|
|
|
We already have `<time-formatted>` element to show a nicely formatted time.
|
|
|
|
Create `<live-timer>` element to show the current time:
|
|
1. It should use `<time-formatted>` internally, not duplicate its functionality.
|
|
2. Ticks (updates) every second.
|
|
3. For every tick, a custom event named `tick` should be generated, with the current date in `event.detail` (see chapter <info:dispatch-events>).
|
|
|
|
Usage:
|
|
|
|
```html
|
|
<live-timer id="elem"></live-timer>
|
|
|
|
<script>
|
|
elem.addEventListener('tick', event => console.log(event.detail));
|
|
</script>
|
|
```
|
|
|
|
Demo:
|
|
|
|
[iframe src="solution" height=40]
|