DNA

Just another components pattern.

Create a component

import { prop, define, BaseComponent } from '@dnajs/idom'; const round = Math.round; export class CountdownComponent extends BaseComponent { get properties() { return { value: prop.NUMBER, running: prop.BOOLEAN.attribute(), time: prop.NUMBER.default(10000), }; } get template() { return this.running ? round(this.value / 1000) : 'start'; } get events() { return { click: 'start', }; } start() { this.value = this.time; this.running = true; let interval = setInterval((startTime) => { this.value = startTime - Date.now(); if (this.value <= 0) { clearInterval(interval); this.running = false; } }, 40, this.time + Date.now()); } } define('dna-countdown', CountdownComponent); .dna-countdown { margin: 24px auto; width: 128px; height: 128px; line-height: 128px; text-align: center; text-transform: uppercase; border: solid 2px currentColor; border-radius: 4px; cursor: pointer; transition: border-radius 250ms; } .dna-countdown[running] { cursor: default; border-radius: 50%; animation: countdown 10000ms; } @keyframes countdown { 65%, 75%, 85%, 95% { transform: none; } 70%, 80%, 90% { transform: scale(1.1); } 0%, 20% { color: rgb(41, 190, 78); } 50% { color: rgb(255, 161, 0); } 80%, 100% { color: rgb(228, 63, 63); } }