Here is a simple stopwatch, adapted from VanJS doc.
As you can see, nothing complicated, plain JS, no hooks, no bundling, all this under 1.2kB of library !!!
const {button,span, div, pre, h1} = van.tags
const elapsed = van.state("0.00")
const Stopwatch = () => {
let id;
const start = () => id = id || setInterval(() =>
elapsed.val = (Number(elapsed.val) + 0.01).toFixed(2), 10)
return span(
button({onclick: start}, "Start"),
button({onclick: () => (clearInterval(id), id = 0)}, "Stop"),
button({onclick: () =>
(clearInterval(id), id = 0, elapsed.val = "0.00")}, "Reset"),
)
}
const Screendisplay = () => h1(elapsed, " s")
van.add(app, div(
h1("A Simple Stopwatch"),
div ({class:"stopwatch"},
div({class:"content"},
Screendisplay(),
Stopwatch())
)
)
)
Top comments (2)
Thanks for sharing the example. Have you considered adding this example to your VanJS series: dev.to/artydev/series/23075?
Done :-)
Thank you Tao