Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Year Countdown & World Clock React App #52

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,35 @@ Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

## Countdown & World Clock Application

The Countdown & World Clock Application is a React-based application that provides two main features:

New Year Countdown: Displays a live countdown timer ticking down towards the next New Year. It shows the remaining days, hours, minutes, and seconds in a visually appealing format.

World Clock: Displays the current time in various time zones around the world.

## Implementation

Home Component
The Home component is the main component of the application. It encapsulates two primary functionalities:

New Year Countdown
World Clock

## New Year Countdown

The countdown is implemented using React's useState, useEffect, and useRef hooks.

useState is used to manage the state of the countdown timer. It maintains an object with days, hours, minutes, and seconds as properties.

useEffect is used to create an interval that updates the countdown state every second.

useRef is used to store the interval ID, allowing it to be cleared when the component is unmounted to prevent memory leaks.

The countdown timer calculates the time left until the next New Year upon each update and sets these values in the state.

## World Clock

The WorldClock component is a functional component in React that provides the current time in three different time zones: Hong Kong, New York, and London. The times update every second.
Loading