Epoch Time and Time Zone Converter¶
Specification¶
The full specification below is extracted from Chapter 9: Real-Time Clocks and Display Drivers for Clocks and Watches.
Type: microsim
**sim-id:** epoch-time-timezone-converter<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) a time zone offset and a daylight saving adjustment to convert a raw epoch timestamp into correct local wall-clock time.
Canvas: 700x360px, responsive -- recompute panel widths from `windowWidth` in `windowResized()`.
Layout: a left panel displaying a large scrubbable epoch-time number with a human-readable UTC date/time directly beneath it. A right panel shows the computed local date/time, updating live as controls change, alongside a small formula readout: "Local = UTC + Offset [+ 1hr DST]".
Controls: a `createSlider()` labeled "Epoch Time" spanning a one-year range (default set to the current date) that scrubs the displayed moment forward and backward; a `createSelect()` dropdown labeled "Time Zone Offset" with common whole and half-hour offsets from UTC-12 to UTC+14; a `createCheckbox()` labeled "Daylight Saving Time Active" (unchecked by default) that adds or removes exactly one hour from the computed local time when toggled.
Interaction: moving the Epoch Time slider live-updates both the UTC and local readouts simultaneously; toggling the Daylight Saving checkbox visibly shifts only the local-time readout by one hour with a brief highlight animation on the changed digits, making clear that DST affects the local conversion step only, never the underlying epoch or UTC value. Hovering the formula readout shows a tooltip restating the three-part conversion in plain language, matching the surrounding chapter text.
Implementation: p5.js, epoch-to-date conversion using JavaScript's built-in `Date` object for UTC computation, with the selected offset and DST checkbox applied as simple additional minute/hour adjustments before formatting the local-time string. Recompute all layout positions from `windowWidth` inside `windowResized()`.