Dynamic Greeting Application

A modern React application that displays a real-time greeting message based on the current hour of the day and updates the local time every second.

Problem Description

Create a greeting app that:

• Greets users based on the current hour (morning, afternoon, evening, night).
• Continuously displays and updates the current time in real-time.
• Changes the greeting as the time changes without needing a manual refresh.

Functionality Requirements

1. Greeting Message:
   • "Good Morning! ☀️" from 5 AM to 12 PM.
   • "Good Afternoon! 🌤️" from 12 PM to 5 PM.
   • "Good Evening! 🌆" from 5 PM to 9 PM.
   • "Good Night! 🌙✨" from 9 PM to 5 AM.
2. Live Time Display:
   • Displays the user's local time using toLocaleTimeString().
   • Time should update every second using setInterval.
3. Visual Layout:
   • Styled with a dark background and a bright time card.
   • Responsive and centered layout.
4. Testability:
   • Use data-testid="greeting" for greeting element.
   • Use data-testid="time" for time display.

Edge Cases & Constraints

• App should automatically transition between greetings at appropriate time thresholds.
• Must work with 24-hour and 12-hour system times.
• setInterval must be cleared on component unmount.
• Ensure emojis and time logic don’t overlap (each hour belongs to one specific greeting).
• Greeting must change seamlessly without user interaction.

Examples

Example 1:

System Time: 2025-05-27T08:30:00

Display Output: Good Morning! ☀️ 08:30:00 AM

Example 2:

System Time: 2025-05-27T21:45:00

Display Output: Good Night! 🌙✨ 09:45:00 PM