I'm currently developing a web-based clock intended for use on an embedded device. The concept involves displaying a full-screen clock with large digits, followed by the current temperature in Fahrenheit and Celsius, as well as a city name or code beneath it. The clock's time and temperatures will be regularly updated, while the clock itself will cycle through different cities every 5 seconds.
My main challenge lies in setting the font sizes correctly. My approach is to start with a smaller font size and then adjust it iteratively until the text fills 90% of the width. This requires some mathematical calculations due to the integer nature of the offsetWidth property.
The structure includes group divisions, with separate sections for time and temperature, each set to occupy 100% of the width. The font sizes are then adjusted based on the offsetWidth of these elements relative to their parent division.
Initially, the clock's offsetWidth with a 10-point font indicates 48 when the target is 1259. Using the correct arithmetic, the font size is adjusted to around 236. However, upon inspecting the temperature section, its offsetWidth incorrectly shows as 1259 without any adjustments needed, even though it should be closer to 150.
Another issue arises where the clock sizing works initially but seems to revert back to the incorrect size after a short period, similar to the temperature section. I've checked for any issues with resetting the font sizes but remain puzzled by this behavior.
I've shared the source files (test.html and test.js) in the hope that someone can pinpoint where I might have overlooked something. Any guidance would be greatly appreciated.
test.html
<!DOCTYPE html>
<html lang='en' style="height:100%; width:100%; margin:0; padding:0">
<head>
<title>Full Screen Clock</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content ='width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no, viewport-fit=cover' >
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Ampron Clock">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
/* Customizable font and colors */
html {
font-family: 'Courier' ;
background:#000000;
color: #91ff0f ;
}
</style>
</head>
<body style="display:flex; height:100%; width:100%; margin:0; padding:0; justify-content:center; align-items:center">
<div style='height:100%; width: 100%; margin: 0 auto'>
<div id='clockDiv' style='height:60%; width:100%; margin: 0 auto'>
<span id="clocktext" style="font-kerning:none; text-align:center"></span>
</div>
<div id='tempDiv' style='width:100%; margin: 0 auto'>
<span id="temptext" style="font-kerning:none; text-align:center"></span>
</div>
</div>
<script src='test.js'></script>
</body>
</html>
test.js
redacted for brevity