24 - Digital Clock with Time Zone Support

Description

Develop a React app that displays a digital clock with the following functionalities:

• Displays the current time in a user's local time zone by default.

• Allows users to select different time zones from a list or dropdown menu.

• Updates the displayed time dynamically based on the chosen time zone.

• Optionally, add features like:

  • Custom time zone input for manual entry.

  • Automatic time zone detection based on user location.

  • Visually appealing clock designs and themes.

Algorithm

1. State Management:

   • Define state variables to hold:

     • currentTime: The current time in the selected time zone.

     • selectedTimeZone: The currently selected time zone (e.g., "America/Los_Angeles").

     • availableTimeZones: An array of available time zone options.

2. Time Management:

   • Use JavaScript's Date object and Intl.DateTimeFormat API to handle time and time zones.

   • Update the currentTime state every second to reflect the current time in the selected zone.

3. Time Zone Selection:

   • Provide a list or dropdown menu with available time zones.

   • Allow users to select a different time zone, which should update the selectedTimeZone state and trigger a recalculation of currentTime.

4. Display:

   • Render the currentTime in a visually appealing clock format.

   • Display the selected time zone alongside the clock.

5. Optional Features:

   • Implement custom time zone input for manual entry.

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

   • Design different clock styles and themes for customization.

Code

import React, { useState, useEffect } from 'react';

function DigitalClock() {
  const [currentTime, setCurrentTime] = useState(new Date().toLocaleTimeString([], { timeZone: 'UTC' })); // Initial time in UTC
  const [selectedTimeZone, setSelectedTimeZone] = useState('UTC');
  const [availableTimeZones, setAvailableTimeZones] = useState([]);

  useEffect(() => {
    // Fetch available time zones (implementation not shown, use a library or API)
    // setAvailableTimeZones(fetchedTimeZones);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(new Date().toLocaleTimeString([], { timeZone: selectedTimeZone }));
    }, 1000);
    return () => clearInterval(interval);
  }, [selectedTimeZone]);

  const handleTimeZoneChange = (newTimeZone) => {
    setSelectedTimeZone(newTimeZone);
  };

  return (
    <div className="digital-clock">
      <h1>{currentTime}</h1>
      <select value={selectedTimeZone} onChange={(e) => handleTimeZoneChange(e.target.value)}>
        {availableTimeZones.map((timeZone) => (
          <option key={timeZone} value={timeZone}>{timeZone}</option>
        ))}
      </select>
    </div>
  );
}

export default DigitalClock;

Explanation

• State Variables:

  • currentTime: Stores the current time in the selected time zone.

  • selectedTimeZone: Stores the currently selected time zone.

  • availableTimeZones: An array of available time zone options.

• useEffect Hooks:

  • The first useEffect fetches available time zones (implementation not shown).

  • The second useEffect updates currentTime every second based on selectedTimeZone.

• handleTimeZoneChange Function:

  • Updates selectedTimeZone when a new time zone is chosen.

• JSX:

  • Renders the currentTime in an h1 tag.

  • Displays a dropdown menu of availableTimeZones to allow user selection.

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.