SimpleClock.hta

<!doctype html>
<html>
<head>
<!--
Simple Clock, March 2022.
https://www.reddit.com/user/jcunews1
https://pastebin.com/u/jcunews
https://greasyfork.org/en/users/85671-jcunews
-->
<meta charset=utf-8 />
<meta http-equiv="x-ua-compatible" content="IE=9" />
<title>Simple Clock</title>
<style>
/*
To change the font, change the `font-family` style.
Do not change the `font-size` style, since it is used for auto font size.
*/
html,body{margin:0;overflow:hidden;background:#555;color:#aaa;font-size:20px;font-family:'Lucida Console',monospace}
#clock{display:table-cell;vertical-align:middle;width:100vw;height:100vh;text-align:center}
#temp{display:inline-block;position:absolute;top:-200vw}
</style>
</head>
<body>
<div id=clock></div>
<div id=temp style="font-size:20px">00:00:00</div>
<script>
fs = 20;
(onresize = function() {
  if (temp.offsetWidth < innerWidth) {
    for (i = fs; temp.offsetWidth <= innerWidth; i++) {
      temp.style.fontSize = i + "px";
    }
    temp.style.fontSize = (fs = (i - 2)) + "px";
  } else if (temp.offsetWidth > innerWidth) {
    for (i = fs; temp.offsetWidth >= innerWidth; i--) {
      temp.style.fontSize = i + "px";
    }
    temp.style.fontSize = (fs = (i + 1)) + "px";
  }
  clock.style.fontSize = fs + "px";
})();
setInterval(function() {
  d = new Date;
  clock.textContent = ("0" + d.getHours()).substr(-2) + ":" +
    ("0" + d.getMinutes()).substr(-2) + ":" +
    ("0" + d.getSeconds()).substr(-2);
}, 100);
</script>
</body>
</html>