World Clock Time Zone Display
Build a vanilla JavaScript world clock web app that displays real-time clocks for multiple time zones with automatic dark mode support and time format toggle (12H/24H).
What This Skill Does
Creates a single-page web application that shows synchronized clocks for 6 different time zones using the Intl.DateTimeFormat API and timezone-aware Date objects. The app features automatic dark mode detection, day/night indicators for each location, and a global 12H/24H format toggle.
Implementation Steps
1. Set Up Project Structure
Create a static site with no build process:
`index.html` - single-page app with embedded dark mode detection script`script.js` - core clock logic using Intl.DateTimeFormat`styles.css` - CSS custom properties for theming with prefers-color-scheme`assets/` - favicon package and OpenGraph images2. Implement Time Zone Management
Use specific IANA timezone identifiers for 6 locations:
UTC: `'UTC'`Helsinki: `'Europe/Helsinki'`Manila: `'Asia/Manila'`San Francisco: `'America/Los_Angeles'`Beijing: `'Asia/Shanghai'`Netherlands: `'Europe/Amsterdam'`Structure clock card IDs consistently: `{location}-time`, `{location}-date`, `{location}-location` (e.g., `helsinki-time`).
3. Build Theme System
Implement automatic dark mode:
Define CSS custom properties for light/dark themes in `:root` and `.dark-theme`Add inline script in `<head>` using `matchMedia('(prefers-color-scheme: dark)')` for detectionFollow system preference only (no manual toggle)4. Create Time Formatting Logic
Implement global time format control:
Maintain `is24Hour` state controlling all clocks simultaneouslyUse `toLocaleTimeString()` with dynamic options from `getTimeOptions()` functionConvert AM/PM to uppercase: `.replace(/am|pm/i, (match) => match.toUpperCase())`Format dates using `'en-GB'` locale with full date options5. Add Day/Night Indicators
Show time-of-day for each location:
Display ☀️ (6 AM - 6 PM) or 🌙 via `data-daynight` attributeUpdate indicators with `isDaytime(hour)` function checking local time per zone6. Implement Real-time Updates
Set up automatic clock updates:
Use `setInterval(updateClocks, 1000)` to update all 6 clocks every secondCreate single `updateClocks()` function that calls `updateClock()` for each timezone7. Build Responsive Layout
Design mobile-first responsive grid:
Use CSS Grid with `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))`Add single breakpoint at `@media (max-width: 768px)`Apply consistent spacing using `rem` unitsAdd hover animations: `transform: translateY(-5px)` on clock cards8. Add PWA Features
Make the app installable:
Create `site.webmanifest` with app iconsAdd comprehensive favicon package in `assets/favicon/`Include OpenGraph meta tags for social media sharingKey Patterns
**Time Zone Updates:**
```javascript
function updateClock(location, timezone) {
const now = new Date();
const timeOptions = getTimeOptions();
const time = now.toLocaleTimeString('en-US', { timeZone: timezone, ...timeOptions });
document.getElementById(`${location}-time`).textContent = time.replace(/am|pm/i, m => m.toUpperCase());
}
```
**Dark Mode Detection:**
```javascript
// In <head> before styles load
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark-theme');
}
```
**Day/Night Indicator:**
```javascript
function isDaytime(hour) {
return hour >= 6 && hour < 18;
}
```
Adding New Time Zones
To add more clocks:
1. Add clock card HTML structure in `index.html` with consistent ID pattern
2. Add corresponding `updateClock()` call in `updateClocks()` function
3. Grid layout auto-adjusts via `auto-fit` sizing
Development Workflow
**No build process**: Direct file editing and browser refresh**Testing**: Open `index.html` in browser - works offline**Deployment**: Static file hosting (GitHub Pages, Netlify, Vercel)Constraints
Uses vanilla JavaScript only - no frameworks or librariesNo manual theme toggle - follows system preference exclusivelyAll clocks share the same 12H/24H format settingUpdates every second for all time zones simultaneouslyRequires modern browser with Intl API support