25 - Interactive Time Zone Converter

Description

Create a React application that provides an interactive time zone converter. The converter should allow users to choose a reference time zone, display the current time in the reference time zone, and offer a list of other cities or time zones with their corresponding current times, updated dynamically.

Algorithm

1. Create a state variable to store the reference time zone and current times.

2. Define a function to get the current time in the reference time zone.

3. Define a function to handle reference time zone selection.

4. Define a function to update the current times in other cities or time zones.

5. Render the time zone converter interface.

Classes

• TimeZoneConverter: A component that represents the time zone converter interface.

• ReferenceTimeZoneSelector: A component that represents the reference time zone selection menu.

• CityTimeZoneList: A component that represents the list of cities or time zones with their corresponding current times.

Code

TimeZoneConverter.js

import React, { useState, useEffect } from 'react';
import ReferenceTimeZoneSelector from './ReferenceTimeZoneSelector';
import CityTimeZoneList from './CityTimeZoneList';

function TimeZoneConverter() {
  const [referenceTimeZone, setReferenceTimeZone] = useState('UTC');
  const [currentTimes, setCurrentTimes] = useState({});

  useEffect(() => {
    const intervalId = setInterval(() => {
      updateCurrentTimes();
    }, 1000);
    return () => clearInterval(intervalId);
  }, [referenceTimeZone]);

  const handleReferenceTimeZoneSelect = (timeZone) => {
    setReferenceTimeZone(timeZone);
  };

  const updateCurrentTimes = () => {
    const currentTimesObject = {};
    const cities = [
      { name: 'New York', timeZone: 'America/New_York' },
      { name: 'London', timeZone: 'Europe/London' },
      { name: 'Tokyo', timeZone: 'Asia/Tokyo' },
      // Add more cities or time zones as needed
    ];
    cities.forEach((city) => {
      currentTimesObject[city.name] = getCurrentTime(city.timeZone);
    });
    setCurrentTimes(currentTimesObject);
  };

  return (
    <div>
      <h2>Time Zone Converter</h2>
      <ReferenceTimeZoneSelector
        onTimeZoneSelect={handleReferenceTimeZoneSelect}
      />
      <CityTimeZoneList currentTimes={currentTimes} />
    </div>
  );
}

export default TimeZoneConverter;

ReferenceTimeZoneSelector.js

import React from 'react';

function ReferenceTimeZoneSelector({ onTimeZoneSelect }) {
  const timeZones = [
    { name: 'UTC', offset: 0 },
    { name: 'EST', offset: -5 },
    { name: 'CST', offset: -6 },
    { name: 'MST', offset: -7 },
    { name: 'PST', offset: -8 },
    // Add more time zones as needed
  ];

  const handleSelect = (timeZone) => {
    onTimeZoneSelect(timeZone.name);
  };

  return (
    <select onChange={(event) => handleSelect(timeZones[event.target.value])}>
      {timeZones.map((timeZone, index) => (
        <option value={index}>{timeZone.name}</option>
      ))}
    </select>
  );
}

export default ReferenceTimeZoneSelector;

CityTimeZoneList.js

import React from 'react';

function CityTimeZoneList({ currentTimes }) {
  const cities = Object.keys(currentTimes);

  return (
    <ul>
      {cities.map((city) => (
        <li key={city}>
          {city} ({currentTimes[city]})
        </li>
      ))}
    </ul>
  );
}

export default CityTimeZoneList;

Explanation

The TimeZoneConverter component renders the time zone converter interface. The ReferenceTimeZoneSelector component represents the reference time zone selection menu. The CityTimeZoneList component represents the list of cities or time zones with their corresponding current times. The getCurrentTime function gets the current time in a given time zone. The updateCurrentTimes function updates the current times in other cities or time zones.

Possible Future Enhancements

• Add more cities or time zones to the list.

• Improve the user interface and user experience.

• Add support for daylight saving time (DST).

• Display the time zone offset or abbreviation next to each city or time zone.

• Allow users to add or remove cities or time zones from the list.