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 frontend tool developed using HTML, CSS, and JavaScript that allows users to convert time between different time zones around the world. Users can select a base time and choose multiple countries or cities to view the corresponding time instantly. This project demonstrates concepts like date handling, time zone conversion using JavaScript, dynamic Ul updates, and responsive design, making it useful for global scheduling and productivity tools.

Key Features

Convert time between multiple time zones
Select different countries or cities
Real-time time conversion
Simple and user-friendly interface
Responsive design for all devices
Dynamic updates using JavaScript
Useful for global scheduling and planning

HTML Code

<!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

*{
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

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

}