Clock Emoji

Closest clock face emoji to the current time.

by khamer

HTML

<time></time>

CSS

html, body, time {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

time {
  font-size: 75vmin;
  line-height: 1;
}

JavaScript

(function() {
  const faces = '🕛🕧🕐🕜🕑🕝🕒🕞🕓🕟🕔🕠🕕🕡🕖🕢🕗🕣🕘🕤🕙🕥🕚🕦';

  const time = document.querySelector('time');

  const update = function() {
    let d = new Date();

    let face = faces.substr(
    	Math.round(d.getHours() + d.getMinutes()/60) * 2,
      2
    );

    time.innerHTML = face;
  };

  update();
  setInterval(update, 60000);
})();