Fullscreen clock

by Kenneth Luplau-Brøgger

HTML

<h1></h1>

SCSS

body {
  background: black;
}

h1 {
  font-size: 20vw;
  font-family: "Orator std";
  font-weight: normal;
  color: #fff;
  opacity: 0.1;
  transform: translateY(calc(50vh - 22.5vw));
}

JavaScript 1.7

const h1 = document.querySelector("h1");

const pad = (value) => {
	return value < 10 ? "0" + value : value;
}

const setClock = () => {
	const date = new Date();
  
  h1.innerHTML = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
}

setClock();

setInterval(setClock, 1000);