<p>
  <span id="timer">99</span>
</p>

<aside>
  <label>
    <span>Font colour:</span>
    <input id="fontColour" type="color" value="#000000" />
  </label>
  <label>
    <span>Background colour:</span>
    <input id="bgColour" type="color" value="#ffffff" />
  </label>
  <button type="button">Start</button>
</aside>
:root {
  --fontColour: #000000;
  --bgColour: #ffffff;
}

body {
  display: flex;
  height: 100vh;
}

p {
  margin: auto;
  font-size: 15em;
  background-color: var(--bgColour, white);
  color: var(--fontColour, black);
  display: flex;
  padding: 0 0.125em;
  height: 1em;
  width: 2ch;
  justify-content: center;
}

// Adjustment based on choice of typeface
span {
  display: block;
  margin-top: -0.1em;
}

// Just to show that font colour and background colour can be customised
aside {
  position: fixed;
  top: 0;
  right: 0;
  padding: 1em;
  text-align: right;
}

aside label {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-bottom: 0.5em;
}

button {
  font-size: 1.2em;
  font-family: inherit;
  padding: 0.5em;
  background-color: palegreen;
  cursor: pointer;
  border: 0;
  border-radius: 4px;
}
View Compiled
let end;
const now = Date.now;
const timer = document.getElementById("timer");
const duration = 9900;

document.querySelector("button").addEventListener("click", start, false);

function displayCountdown() {
  const count = parseInt((end - now()) / 100);
  timer.textContent =
    count > 0 ? (window.requestAnimationFrame(displayCountdown), count) : 0;
}

function start() {
  end = now() + duration;
  window.requestAnimationFrame(displayCountdown);
}

// Unrelated to actual timer, it's just a colour thing
let root = document.documentElement;
const fontColourInput = document.getElementById('fontColour');
const bgColorInput = document.getElementById('bgColour');

fontColourInput.addEventListener('input', updateFontColour, false);
bgColorInput.addEventListener('input', updateBgColour, false);

function updateFontColour(event) {
  root.style.setProperty('--fontColour', event.target.value);
}

function updateBgColour(event) {
  root.style.setProperty('--bgColour', event.target.value);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.