Time Zone Converter | HTML CSS JavaScript

Time Zone Converter with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #37

Project Overview

The Time Zone Converter is a simple and interactive frontend tool built using HTML, CSS, and JavaScript. It allows users to select a time and convert it between different time zones, making it useful for people who work with international teams, schedule meetings, or communicate across different regions.

First, users select a time from the time input and choose a starting and destination time zone from the dropdown menus. Next, JavaScript reads these values and creates a date object using the selected time. Finally, the Intl.DateTimeFormat API formats the time according to the selected destination time zone and displays the converted result instantly. This project demonstrates date handling, time zone APIs, user input, DOM manipulation, and dynamic updates.

Key Features

Time Zone Conversion: Users can enter a specific time and convert it to another time zone. The tool displays the converted time directly below the controls.
Multiple Time Zones: The dropdowns include UTC, India (IST), New York, London, and Tokyo. This allows users to work with several commonly used time zones.
Source Time Zone Selection: Users can select the time zone from which they want to convert. This provides a clear starting point for the conversion process.
Destination Time Zone: A second dropdown lets users select where the time should be converted. Therefore, users can compare times across different locations.
Simple Time Input: The project uses an HTML time input so users can select hours and minutes easily. This avoids the need to manually type a time in a specific format.
Instant Conversion: When users click the Convert button, JavaScript processes the selected values and displays the converted time immediately. No page reload is required.
JavaScript Intl API: The project uses Intl.DateTimeFormat to format the date according to the selected time zone. This provides built-in browser support for time zone formatting.
Input Validation: JavaScript checks whether the user has selected a time before performing the conversion. If no time is provided, the tool displays a helpful message.
Clean Interface: The project uses a compact white container with a simple heading, input, dropdowns, button, and result area. This keeps the converter easy to understand.
Responsive Layout: The controls use a full-width layout inside the main container. As a result, the converter remains simple and usable across different screen sizes.

What You'll Learn

How to create a time zone converter using HTML
How to use HTML time input fields
How to create and work with JavaScript Date objects
How to use the Intl.DateTimeFormat API
How to work with IANA time zone names
How to validate user input with JavaScript
How to update webpage content using the DOM
How to build a simple responsive utility tool

HTML Code

The HTML creates the structure of the Time Zone Converter. First, it adds a heading and a time input with the ID timeInput, allowing users to select the time they want to convert. Next, two <select> elements provide the source and destination time zones. The available options include UTC, India (IST), New York, London, and Tokyo.

Finally, the Convert button calls the convertTime() function, while the result heading provides an area for displaying the converted time or validation message.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Time Zone Converter</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h2>Time Zone Converter</h2>

<input type="time" id="timeInput">

<select id="fromZone">
<option value="UTC">UTC</option>
<option value="Asia/Kolkata">India (IST)</option>
<option value="America/New_York">New York</option>
<option value="Europe/London">London</option>
<option value="Asia/Tokyo">Tokyo</option>
</select>

<select id="toZone">
<option value="Asia/Kolkata">India (IST)</option>
<option value="UTC">UTC</option>
<option value="America/New_York">New York</option>
<option value="Europe/London">London</option>
<option value="Asia/Tokyo">Tokyo</option>
</select>

<button onclick="convertTime()">Convert</button>

<h3 id="result"></h3>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

The CSS creates a simple centered interface. First, the body uses Flexbox to center the converter on the page and applies a dark blue background. Next, the .container uses a white background, padding, rounded corners, a fixed width, and centered text. This creates a clean card-style layout for the converter.

The time input, dropdowns, and button all use full width, consistent padding, rounded corners, and spacing. The button also changes to a darker blue shade when the user hovers over it, providing visual feedback.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:320px;
text-align:center;
}

input, select, button{
width:100%;
padding:10px;
margin:10px 0;
border-radius:6px;
border:1px solid #ddd;
}

button{
background:#2563eb;
color:white;
border:none;
cursor:pointer;
}

button:hover{
background:#1d4ed8;
}

Javascript Code

JavaScript handles the time conversion process. First, the convertTime() function gets the selected time, source time zone, destination time zone, and result element using getElementById(). Next, the function checks whether a time has been selected. If the input is empty, it displays “Please select time” and stops the conversion.

After that, JavaScript splits the selected time into hours and minutes and creates a Date object using today’s date. Finally, Intl.DateTimeFormat formats the date using the selected destination time zone and displays the converted time in the result area.

function convertTime(){

const time = document.getElementById("timeInput").value
const fromZone = document.getElementById("fromZone").value
const toZone = document.getElementById("toZone").value
const result = document.getElementById("result")

if(!time){
result.innerText = "Please select time"
return
}

// Create date object (today + selected time)
const [hours, minutes] = time.split(":")
const date = new Date()
date.setHours(hours, minutes)

// Convert using Intl API
const options = {
hour: "2-digit",
minute: "2-digit",
hour12: true,
timeZone: toZone
}

const converted = new Intl.DateTimeFormat("en-US", options).format(date)

result.innerText = "Converted Time: " + converted

}