DEV Community

artydev
artydev

Posted on

2 2

A Chrono Component

A simple component using Mithril and wicked-elements

You can test it here Chrono

<div class="my-chrono"></div>
<div class="my-chrono"></div>

Enter fullscreen mode Exit fullscreen mode
import {define} from 'wicked-elements';

let Chrono = function () {
  let count = 0;  
  let disabled = false;
  let timer;
  let start = () => {timer = setInterval(() => { count += 1; disabled = true; m.redraw()}) }
  let stop = () => {clearInterval(timer); disabled = false; m.redraw()};
  let reset = () => {stop(); count = 0} 
  let disable = (status) => status
  let view = () => [
    m("h1", count),
    m("button", {onclick : start, disabled : disabled}, "start"),
    m("button", {onclick : stop}, "stop"),
    m("button", {onclick : reset}, "reset")
  ]
  return  { view }
}

function renderComp(target, component) {
   m.mount(target, component)
}

define(".my-chrono", {
   init() {
     renderComp(this.element, Chrono)
   } 
})

Enter fullscreen mode Exit fullscreen mode

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay