Create a live time display from different world cities

Reading Time: 4 minutes 🕑

Last updated: October 11, 2021.

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 native Date() object
  • Set time to a local timezone using .toLocaleTimeString()
  • Iterating over elements using a for loop
  • How to set a repeating function with setInterval()

What we will build

Below is a live preview of the project.

This tutorial’s main focus is the how-to of programming time in JavaScript. But the CSS styling used below is available at the end of this post 😉

See the Pen by James (@openjavascriptadmin) on CodePen.

Part 1: HTML Template

We being by creating the HTML markup. Here, we create a time-container div for each of the cities for which we want to display the time. And inside of these a h2 element with the name of each city and an empty div with a class name of timeDisplay. It is within each currently empty timeDisplay div that we will inject the time from JavaScript.

Here is the initial markup:

    <div class = "time-container">
        <h2>London</h2>
        <div id="rootLondon" class="timeDisplay"></div>
    </div>
    <div class = "time-container">
        <h2>New York</h2>
        <div id="rootNewYork" class="timeDisplay"></div>
    </div>
    <div class = "time-container">
        <h2>Vienna</h2>
        <div id="rootVienna" class="timeDisplay"></div>
    </div>
    <div class = "time-container">
        <h2>Sydney</h2>
        <div id="rootSydney" class="timeDisplay"></div>
    </div>

Part 2: Time for JavaScript

First, we want to get each of the timeDisplay elements. We want do this using getElementsByClassName:

const timeDisplay = document.getElementsByClassName('timeDisplay');

Before injecting the time into these elements, let’s focus on creating one live time display of the current time. We can get the current time easily by creating a new Date() object:

let time = new Date();
// Thu Oct 07 2021 07:00:58 GMT+0200 (Central European Summer Time)

But this is a little too much information. We only want the time. We can get this by applying the .toLocaleTimeString() method:

let time = new Date();
time = time.toLocaleTimeString();
// 07:03:54

Now it is time to set the time format and set a timezone. We can change the time format to a chosen local format by including as a first argument inside .toLocaleTimeString() the language and country code. For example, in this tutorial, we will use the US time format:

let time = new Date();
time = time.toLocaleTimeString("en-US");
// 7:09:37 AM

But this does not affect the time zone. For this, we need to add a second argument with the following syntax: {timeZone: "Region/City"}. For example, in this tutorial, we be using the following inputs: "Europe/London""America/New_York""Europe/Vienna""Australia/Sydney". Let’s add one:

let time = new Date();
time = time.toLocaleTimeString("en-US", {timeZone: "Australia/Sydney"});
// 4:17:31 PM
So now we have the time output for Sydney in US format.

Generating the time for all cities

To do the same for all cities, let’s put the timezones we want to display for in an array in the expected format:

const timeDisplay = document.getElementsByClassName('timeDisplay');

const timeZones = ["Europe/London", "America/New_York", "Europe/Vienna", "Australia/Sydney"];

Because we have selected multiple timeDisplay elements, we want to loop over each one, setting the timezone differently for each. For this, we can use a for loop that executes as many times as timeDisiplay.length. And inside the loop, we specify the timezone format as timeZones[i]. This will get the timezone element corresponding to the value of i in each loop. Finally, we want to print the result, so we end by setting the innerText of timeDisplay[i] element to the time generated by each loop:

for (let i = 0; i < timeDisplay.length; i++) {
    let time = new Date();
    time = time.toLocaleTimeString("en-US", {timeZone: timeZones[i]});
    timeDisplay[i].innerText = time;
}

But hold on Houston, because we still have a bit of a problem…the displayed time is not ticking!

To make the time ‘tick’, we use setInterval(). This method takes two arguments. The first is a function that specifies what to do. The second specifies how often the argument inserted in the first argument position should execute in milliseconds. For a ticking clock, we want to set this value to 1000.

The setInterval syntax: setInterval(nameOfFunction, milliseconds);

In our code, we place setInterval() inside of the for loop. Thus, the loop only executes once, but sets four self-repeating functions to create a ticking effect.

The code should look something like this:

for (let i = 0; i < timeDisplay.length; i++) {
  setInterval(function (){
    let time = new Date();
    time = time.toLocaleTimeString("en-US", {timeZone: timeZones[i]});
    timeDisplay[i].innerText = time
    }, 1000); 
}
And that's it for JavaScript. Your final script should look something like this:
const timeDisplay = document.getElementsByClassName('timeDisplay');

const timeZones = ["Europe/London", "America/New_York", "Europe/Vienna", "Australia/Sydney"];

for (let i = 0; i < timeDisplay.length; i++) {
  setInterval(function (){
    let time = new Date();
    time = time.toLocaleTimeString("en-US", {timeZone: timeZones[i]});
    timeDisplay[i].innerText = time
    }, 1000); 
}

Now, refresh the web page where your script is running, and you should see something like this (with ticking):

Output after step 2
Functional but certainly 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.

For new projects as they drop, like our Facebook page to see these in your feed.