Build a World Clock in 30 Lines of Vanilla JS

No libraries needed. Here is the complete code for a working world clock, the same approach used in the Weather & Clock Dashboard Firefox extension.

The Core Function

function getTimeInZone ( timezone ) { return new Intl . DateTimeFormat ( " en-US " , { timeZone : timezone , hour : " 2-digit " , minute : " 2-digit " , second : " 2-digit " , hour12 : false , }). format ( new Date ()); }

// Usage getTimeInZone ( " America/New_York " ); // "14:32:07" getTimeInZone ( " Europe/London " ); // "19:32:07" getTimeInZone ( " Asia/Tokyo " ); // "04:32:07"

Enter fullscreen mode

Exit fullscreen mode

Add Date and City

function getClockData ( timezone , cityName ) { const now = new Date (); const formatter = new Intl . DateTimeFormat ( " en-US " , { timeZone : timezone , hour : " 2-digit " , minute : " 2-digit " , second : " 2-digit " , hour12 : false , weekday : " short " , month : " short " , day : " numeric " , }); const parts = formatter .…