Create a live time display from different world cities
Last updated: January 8, 2023.
In this tutorial, we show you how to create a display of the time from various cities around the world.
In doing so, we will cover several important JavaScript topics:
- How to get the time using the native
Date
object - Setting time to a local timezone using
toLocaleTimeString()
- Iterating over elements using a for loop
- How to call a function repeatedly with
setInterval()
What we will build
Below is a live preview of the project.
The main focus of the tutorial is the how-to of programming time in JavaScript.
But CSS styling used in this preview is available at the end of this post 😉
Part 1: HTML Template
We begin by creating some HTML content into which the time will be displayed.
Concretely, we create a <div class="time-container">
for each of the cities for which we want to display the time.
Inside each are nested a <h2>
, which displays the city name, and a <div id="city-name" class="timeDisplay">
, into which a digital reading of the current time will be output.
Here is the initial markup:
<div class="time-container">
<h2>London</h2>
<div id="london" class="timeDisplay"></div>
</div>
<div class="time-container">
<h2>New York</h2>
<div id="new-york" class="timeDisplay"></div>
</div>
<div class="time-container">
<h2>Vienna</h2>
<div id="vienna" class="timeDisplay"></div>
</div>
<div class="time-container">
<h2>Sydney</h2>
<div id="sydney" class="timeDisplay"></div>
</div>
</div>
Part 2: Time for JavaScript
To inject the time, you are going to want to iterate through all of the timeDisplay
elements. This is done below using a for loop.
Each time, a new Date
object is being created within a setInterval()
call that runs every 1000 millisecond.
The output of the Date
object is read in en-US
format in the timeZones array corresponding to the current value of the looping variable i
.
const timeDisplay = document.querySelectorAll('.timeDisplay');
// Gets all elements that display time
const timeZones = ["Europe/London", "America/New_York", "Europe/Vienna", "Australia/Sydney"];
// Defines timezones to display time
for (let i = 0; i < timeDisplay.length; i++) {
// Iterates through each time display element
setInterval(function () {
// Function passed in will run at interval defined below (creates a 'tick')
let time = new Date();
// Creates new Date object
time = time.toLocaleTimeString("en-US", {timeZone: timeZones[i]});
// Sets time format to "en-US" timezone to i in array
timeDisplay[i].innerText = time
// Set this to be the displayed time in time display element i
}, 1000);
// Time updated every 1000 milliseconds (i.e. every second)
}
Take a look at the result of this in your browser, and you should see something like this (with ticking):

Functional but certinaly not pretty. Let's turn to styling next.
CSS Styling
To get the time display to look like the one in the project preview, apply the following CSS styling:
body {
display: flex; /* Display flexibly */
flex-direction: row;
flex-wrap: wrap; /* containers break to new line if screen is small */
justify-content: center; /* centers containers*/
background-color: pink;
}
h2 {
text-align: center;
margin-top: 1rem;
margin-bottom: 0.8rem;
font-size: 1.4;
background-color: whitesmoke;
color: black;
padding: 0.2rem;
}
.time-container {
text-align:center;
margin: 0px auto;
min-width: 200px; /* prevents extreme shrinking */
}
.timeDisplay {
text-align: center;
font-size: 1.8rem;
border: 0.3rem solid black;
margin: 0px auto;
padding: 0.3rem;
padding-left: 1rem;
padding-right: 1rem;
background-color: white;
border-radius: 0.5rem;
}
Summary
In this tutorial, we have covered how to create a live ticking display time for various world locations.
If you enjoyed this tutorial, be sure to check out more in our projects section.
Related Posts
- Getting and formatting date and time in JavaScript
- Simple date and time formatting in Javascript
- setTimeout() and setInterval() in JavaScript
- All five loops in JavaScript (and when to use them)
- Create a JavaScript countdown timer