draft

8-web-components/2-custom-elements/1-live-timer/task.md

@@ -0,0 +1,23 @@
+
+# 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]