Skip to main content

Build Your Own Time Zone Converter

This challenge is to build your own Time Zone Converter. That is a tool to help people visualise and plan meetings across multiple time zones.

For example, take my live course, Build A Redis Server Clone: Master Systems Programming Through Practice. To make it work, I need to find a time slot that works for me in GMT, my fellow Europeans in CET and the largest market for the course, those in North America, therefore both EST and PST (and the timezones in between).

In theory it’s easy, just remember the timezone offsets. In reality it gets more complicated when you realise different countries change to daylight savings time on different dates.

The Challenge - Building A Time Zone Converter​

In this coding challenge your goal is to build a website or application that allows the user to enter a source timezone and one or more additional timezones and then see what the time is in each timezone relative to the source timezone.

Something a bit like this:

tzconv.png

It should account for daylight savings time changes around the world too.

Step Zero​

Like most of the coding challenges this one can be tackled in most programming languages and tech stacks. If you’re a frontend developer you could build it all in your favourite frontend stack. If you’re a applications programmer you could build some GUI based software. If you’re a backend/data engineering/systems software engineer you could build a CLI application.

Or just have fun and try something new!

Either way, your mission in step zero is to decide what you’re going to build it as and setup a new project with your chosen tech stack, programming language and development environment. After that proceed directly to step 1!

Step 1​

In this step your goal is to allow the user to enter a source timezone and one or more additional timezones. Ideally they should be able to pick by city or timezone abbreviation.

You can find a full list of the timezone abbreviations on Wikipedia here.

Step 2​

In this step your goal is to display the source timezone and additional timezones in a list on the screen and allow the user to re-order the list.

Include the ability to sort the list relative to the source timezone too. This should result in timezones with a negative offset being before the source and those with a positive offset after it.

Step 3​

In this step your goal is to show 24 hours of each timezone. They should be aligned and start from 0:00 in the first listed timezone. The user should be able to hover over an hour and see the group of times that apply at that time.

For example the green box in this picture.

Step 4​

In this step your goal is to allows the user to highlight a time period and have it reflected as the start and end time for each timezone. In other words make it possible to drag that green bar around a time period and show the start and the end time in each timezone.

This is demonstrated on the above picture.

Step 5​

In this step your goal is to reflect daylight savings time. So in March and October/November.

Help Others by Sharing Your Solutions!​

If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know - ping me a message on the Discord Server, via Twitter or LinkedIn or just post about it there and tag me. Alternately please add a link to it in the Coding Challenges Shared Solutions Github repo.

Get The Challenges By Email​

If you would like to receive the coding challenges by email, you can subscribe to the weekly newsletter on SubStack here: