24 - Digital Clock with Time Zone Support

Description

Create a React application that displays a digital clock with time zone support. The clock should display the current time in the user's local time zone by default, allow users to select different time zones from a list or dropdown menu, and update the displayed time dynamically based on the chosen time zone.

Algorithm

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

2. Define a function to get the current time in the user's local time zone.

3. Define a function to handle time zone selection.

4. Define a function to update the displayed time based on the selected time zone.

5. Render the digital clock and time zone selection menu.

Classes

• DigitalClock: A component that represents the digital clock.

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

Code

DigitalClock.js

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

function DigitalClock() {
  const [currentTime, setCurrentTime] = useState(getCurrentTime());
  const [selectedTimeZone, setSelectedTimeZone] = useState('Local');

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentTime(getCurrentTime(selectedTimeZone));
    }, 1000);
    return () => clearInterval(intervalId);
  }, [selectedTimeZone]);

  const handleTimeZoneSelect = (timeZone) => {
    setSelectedTimeZone(timeZone);
  };

  return (
    <div>
      <h2>Digital Clock</h2>
      <p>{currentTime}</p>
      <TimeZoneMenu onTimeZoneSelect={handleTimeZoneSelect} />
    </div>
  );
}

export default DigitalClock;

TimeZoneMenu.js

import React from 'react';

function TimeZoneMenu({ onTimeZoneSelect }) {
  const timeZones = [
    { name: 'Local', offset: 0 },
    { name: 'UTC', offset: 0 },
    { name: 'EST', offset: -5 },
    { name: 'CST', offset: -6 },
    { name: 'MST', offset: -7 },
    { name: 'PST', offset: -8 },
  ];

  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 TimeZoneMenu;

Explanation

The DigitalClock component renders the digital clock and time zone selection menu. The TimeZoneMenu component represents the time zone selection menu. The getCurrentTime function gets the current time in the user's local time zone. The handleTimeZoneSelect function handles time zone selection. The updateDisplayedTime function updates the displayed time based on the selected time zone.

Additional Notes

• Implement the fetchTimeZones logic using a library or API for time zone data.

• Consider using a dedicated time zone library for robust time zone handling.

• Explore methods for automatic time zone detection based on user location.

• Design visually appealing clock styles and themes.

• Validate user-entered time zones to ensure they are valid.