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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

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

Okay