The Palos Publishing Company

Categories We Write About

Build a customized time zone converter

Written by

in

Computer Science

Here’s a customized Time Zone Converter that allows users to select two time zones and input a date/time to get the converted result. Below is a complete web-based implementation using HTML, JavaScript, and the Luxon library for accurate time zone handling.

🕒 Time Zone Converter (Code Preview)

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Time Zone Converter</title>
  <script src="https://cdn.jsdelivr.net/npm/luxon@3/build/global/luxon.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      padding: 30px;
      max-width: 600px;
      margin: auto;
    }
    h2 {
      text-align: center;
    }
    label {
      display: block;
      margin-top: 15px;
      font-weight: bold;
    }
    select, input {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
    }
    button {
      margin-top: 20px;
      padding: 10px;
      background: #007bff;
      color: #fff;
      border: none;
      width: 100%;
      font-size: 16px;
      cursor: pointer;
    }
    .result {
      margin-top: 20px;
      background: #fff;
      padding: 15px;
      border-radius: 5px;
      box-shadow: 0 0 5px #ccc;
    }
  </style>
</head>
<body>
  <h2>Time Zone Converter</h2>
  <label for="inputTime">Enter Date & Time</label>
  <input type="datetime-local" id="inputTime"/>

  <label for="fromZone">From Time Zone</label>
  <select id="fromZone"></select>

  <label for="toZone">To Time Zone</label>
  <select id="toZone"></select>

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

  <div class="result" id="result"></div>

  <script>
    const { DateTime } = luxon;
    const timeZones = [
      'UTC', 'America/New_York', 'America/Chicago', 'America/Los_Angeles',
      'Europe/London', 'Europe/Paris', 'Asia/Dubai', 'Asia/Kolkata',
      'Asia/Singapore', 'Asia/Tokyo', 'Australia/Sydney'
    ];

    const fromZoneSelect = document.getElementById("fromZone");
    const toZoneSelect = document.getElementById("toZone");

    timeZones.forEach(tz => {
      const opt1 = new Option(tz, tz);
      const opt2 = new Option(tz, tz);
      fromZoneSelect.add(opt1);
      toZoneSelect.add(opt2);
    });

    function convertTime() {
      const input = document.getElementById("inputTime").value;
      const fromZone = document.getElementById("fromZone").value;
      const toZone = document.getElementById("toZone").value;

      if (!input || !fromZone || !toZone) {
        document.getElementById("result").innerText = "Please complete all fields.";
        return;
      }

      const dt = DateTime.fromISO(input, { zone: fromZone });
      const converted = dt.setZone(toZone);

      document.getElementById("result").innerHTML = `
        <strong>Original:</strong> ${dt.toFormat("fff ZZZZ")}<br/>
        <strong>Converted:</strong> ${converted.toFormat("fff ZZZZ")}
      `;
    }
  </script>
</body>
</html>

✅ Features:

Input field for local date and time.
Dropdowns for selecting source and target time zones.
Instant conversion using Luxon (supports daylight saving changes).
Mobile-friendly and fully customizable.

Let me know if you’d like this as a desktop app or with more time zones loaded dynamically via an API.

Share This Page:

Comments

Leave a Reply Cancel reply

Check Out Our Newest Posts we wrote about

Categories We Write About