It’s day 2 and I’m already stumped! Actually, I have plenty of ideas for sites I’d like to build, but it’s getting late and they’re all too complicated. I need something simple, doesn’t require updates to the PubStudio editor, but is still genuinely useful or interesting - no cop outs!

To get some inspiration I took a look at my browser history, and all the open tabs on my laptop and phone. Is there anything I use on a daily basis that could be more convenient, or at least more aesthetically pleasing? No luck with the browser history, but I noticed I always have at least one tab open for weather and time in another location/timezone.

Dealing with weather APIs seems like a hassle and it would be tough to do better than just searching “weather in X” on Google. But maybe I can do something with time - I live in Taipei, and occasionally interact with people in Vietnam, Japan, the US (east and west coast), and Switzerland. It would be nice to have a simple page that can add/remove clocks and persist when the browser is closed.

Before proceeding, I’ll do a little research to see what already exists. A cursory search shows worldtimebuddy, which does cover my requirements, but there’s a lot of extra stuff I don’t need and the layout doesn’t adjust for mobile. Another one high up on the search results is timeanddate.com, the clocks look nice and basic features are covered, but I’d like a cleaner interface and for seconds to be off by default. At this point, I have a good idea of what I want to build, so I can define my requirements.

It’s possible that I’ve bitten off more than I can chew and will need some extra time to implement this, but I think it’s worth the effort!

It took quite a bit longer than a day to finally get through all the “must have” features. The main issue was that I wanted a way to hide components by default, in order to display an input form after clicking an icon to add a new clock. It would have been possible to work around this with CSS opacity or display, but the render already has a built-in way to hide/show components in the DOM, and I wanted to take advantage of that. In order to do so, it was necessary to implement a new section in the component edit menu.

The result is that it’s much easier to skip rendering a component when the page loads! For example:

I’d like to come back to this one when I have a moment, in order to implement some of the nice-to-haves. In particular, the method of adding new clocks requires the user to know the exact timestamp name, which is inconvenient.

Finally, I’d like to add an optional analog clock display for some visual flare. I’ll store the clock face image below for safekeeping.