DEV Community

artydev
artydev

Posted on

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

Top comments (0)