Home / Displaying data / Create a live time display from different world cities

Create a live time display from different world cities

OpenJavaScript

July 19, 2021 0

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;
}