Create a 90-second timer with Van.js

author(s): Tao Xin

by Константин Дралюк

HTML

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

JavaScript

const {pre} = van.tags

const sleep = ms => new Promise(r => setTimeout(r, ms))

const fmt = s => [s / 3600, s / 60 % 60, s % 60]
  .map(n => String(Math.floor(n)).padStart(2, "0")).join(":")

const Timer = ({seconds}) => {
  const left = van.state(seconds)
  ;(async () => {
    for (; left.val > 0; --left.val) await sleep(1000)
    await sleep(0)        // let 00:00:00 paint before blocking
    alert(1)
  })()
  return pre(() => fmt(left.val))
}

van.add(document.body, Timer({seconds: 90}))