"Monospaced" Counter

by MegaScience

HTML

<span id="counter">Init</span>

CSS

html, body {
  height: 100vmin;
  padding: 0;
  margin: 0;
}

body {
  display: grid;
  justify-content: center;
  font-family: Arial;
}

span {
  margin-top: auto;
  margin-bottom: auto;
  font-size: 50vh;
  font-variant-numeric: tabular-nums lining-nums;
  font-kerning: none;
  letter-spacing: 1vh;
}

JavaScript

const mod = (x, n) => (x % n + n) % n
const counter = document.getElementById('counter')
let c = 31

const decrement = () => {
	c = mod(--c, 31)
	counter.innerText = `0:${c.toString().padStart(2, '0')}`
}

setInterval(decrement, 1000)