◐ Shell
reader mode source ↗
Skip to content
Merged

Custom elements #511

Show file tree
Hide file tree
Changes from all commits
File filter
Conversations
Jump to
Diff view
Apply and reload
Show whitespace
Diff view
Apply and reload
6 changes: 3 additions & 3 deletions 8-web-components/2-custom-elements/1-live-timer/solution.md
View file Edit file Delete file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

Please note:
1. We clear `setInterval` timer when the element is removed from the document. That's important, otherwise it continues ticking even if not needed any more. And the browser can't clear the memory from this element and referenced by it.
2. We can access current date as `elem.date` property. All class methods and properties are naturally element methods and properties.
16 changes: 8 additions & 8 deletions 8-web-components/2-custom-elements/1-live-timer/task.md
View file Edit file Delete file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@

# 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>
Expand All @@ -18,6 +18,6 @@ Usage:
</script>
```

Demo:

[iframe src="solution" height=40]
Loading
Toggle all file notes Toggle all file annotations