World Clock

Overview

A multi-timezone clock that shows the current hour, minute, and second in a wall of city cards, with each card turning green during that zone's business hours. It starts with your local zone plus UTC, New York, London, Kolkata, and Tokyo, and you can add or remove zones from a fixed list of 22.

How It Works

Add a timezone from the dropdown — the list covers the Americas, Europe, Africa, the Middle East, Asia, and Oceania — and remove any card with the X button that appears on hover. Every card updates once per second and shows the time in 24-hour format plus the weekday and date. Cards display in green with a 'work hours' tag while the local time is between 09:00 and 17:00, making it easy to see at a glance who is reachable.

Step-by-Step Usage Guide

1. Add the zones you care about from the dropdown.
2. Glance at green cards to see where it is currently work hours.
3. Remove zones you no longer need with the hover X.
4. Re-check after DST transitions; the clock adjusts automatically.

Technical Specifications & Standards

All timekeeping goes through Intl.DateTimeFormat with IANA zone names, which means daylight-saving transitions are handled by the browser's own timezone database rather than by hardcoded offsets — the right way, since DST rules change and differ per zone. The work-hours test parses just the hour from a formatted string and flags 9:00 up to (but not including) 17:00, so a 17:00-17:59 card is not highlighted even though many offices would still call that work hours; the legend states the range exactly. Seconds tick via a one-second interval that is cleaned up on unmount. An honest limitation: your zone selection is component state only — it is not persisted to localStorage — so a refresh returns the clock to the default six zones rather than your customised set. If a zone name in the list were ever invalid on some platform, the formatter throws and the card shows 'invalid zone' instead of a wrong time, which is the failure mode you want from a clock.

Targeted Use Cases

• Keeping distributed-team timezones visible on a second monitor.
• Checking whether it is polite to call a client in another region right now.
• Comparing several cities while planning travel or a launch timing.
• Teaching how the same moment reads as different dates across the date line.

Notes & Gotchas

• Keep the list short — six to ten zones reads faster than a wall of clocks.
• Trust the green highlight for outreach windows, but remember it excludes 17:00-17:59.
• Rebuild your zone list after refreshes, since selections are not saved.
• Use it alongside the meeting planner when you need to pick an hour, not just see one.

Frequently Asked Questions