timer

let sec = 60 * 20
const alertSec = 60
let timer
let alertTimer
const d = document.createElement('div')
const pad = (s) => `00${s}`.slice(-2)
const update = () => {
  d.innerText = `${pad(Math.floor(sec / 60))}:${pad(sec % 60)}`
}
const stop = () => {
  void [timer, alertTimer].forEach((t) => {
    clearInterval(t)
    t = undefined
  })
}
const toggleTimer = () => {
  if (timer) {
    stop()
    return
  }
  timer = setInterval(() => {
    sec -= 1
    if (sec < alertSec && !alertTimer) {
      alertTimer = setInterval(() => {
        d.style.color = '#' + (((1 << 24) * Math.random()) | 0).toString(16)
      }, 10)
    }
    if (sec <= 0) {
      stop()
    }
    update()
  }, 1000)
}

d.style.cssText = `
  position: fixed;
  font-size: 48px;
  right: 10px;
  top: 10px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 8px #000;
  z-index: 2147483647;
  cursor: pointer;
  font-family: 'Share Tech Mono', cursive;
`
d.addEventListener('click', toggleTimer)
$('body').append(d)
$('head').append(
  `<link href='https://fonts.googleapis.com/css?family=Share+Tech+Mono' rel='stylesheet' type='text/css'>`
)
update()