> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/25-interactive-time-zone-converter.md).

# 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

```javascript
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

```javascript
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

```javascript
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.