I made this app as a way to better learn tailwind and css. This page also uses alpineJS for the select component and this sidebar.

The main challenge I encountered was how to best display the clock for various formats. Inspired by the android clock on the pixel homescreen, I found it best to combine flex and grid to stack when on narrow or mobile screens and then unstack to rows when on desktop.

To get the time, I used the built in JS Date() method and then extracted the hours, minutes, and seconds using .split.

After getting the hours, I formatted them to binary and ternary using basic ifelse loops to match values from greatest to least units positions. I found it easiest, although crude, to perform long division to get the binary and ternary values.