JSFiddle - React, Tailwind, and code Playground

author(s): Tao Xin

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.8.nomodule.min.js"></script>

JavaScript

const {button, div, input} = van.tags

const CheckboxCounter = () => {
  const checked = van.state(false), numChecked = van.state(0)
  van.derive(() => {
    if (checked.val) ++numChecked.val
  })

  return div(
    input({type: "checkbox", checked, onclick: e => checked.val = e.target.checked}),
    " Checked ", numChecked, " times. ",
    button({onclick: () => numChecked.val = 0}, "Reset"),
  )
}

van.add(document.body, CheckboxCounter())