Elemento live timer
Abbiamo già un elemento <time-formatted> per mostrare un orario formattato.
Create un elemento <live-timer> per mostrare l’orario corrente con queste specifiche:
- Internamente dovrebbe usare <time-formatted>, senza duplicarne la funzionalità.
- Un tick (aggiornamento) ogni secondo.
- Per ogni tick, deve essere generato un evento personalizzato chiamato tick, con la data corrente dentro event.detail (guardare il capitolo Dispatching di eventi personalizzati).
Uso:
<live-timer id="elem"></live-timer>
<script>
elem.addEventListener('tick', event => console.log(event.detail));
</script>
Demo:
Nota bene:
- Quando rimuoviamo l’elemento dal documento, eseguiamo il clear di setInterval per il timer. È importante, altrimenti continuerà a ticchettare anche se non più necessario. Inoltre il browser avendo ancora un riferimento ad esso, non sarà in grado di pulire la sua memoria.
- Deve essere possibile accedere alla data corrente tramite la proprietà elem.date. Tutti i metodi della classe e le relative proprietà devono anche essere metodi e proprietà dell’elemento.