Event Countdown Timer Using React

Event Countdown Timer is an application where you can create an event with the name, date, and category of the event and it will create a card that will show you the remaining time of the event. After reaching that time of the day it will notify you.

The application will provide the option to start, stop and pause the countdown timer . Project will contain elegant UI to display countdown timer . So lets start building it.

Preview of Final Output:

👁 Event Countdown Timer Using React

Prerequisites and Technologies:

• React
• Bootstrap
• JSX

Approach:

We will build a single-page application in React that will display a countdown timer on the home page. The event countdown timer will be created as a separate component in React. The component is then rendered in app file. Bootstrap will be added to display options for an event countdown timer. The timer will start by taking time as input from the user.

Functionalities:

• Add Timer: This will add multiple countdown timers as required. set Title , Category and time of countdown timer.
• Remove Timer: This will remove a countdown timer.
• Calculate Time: The calculateTimeRemaining will calculate remaining time for each timer.
• Format Time: The formatTime will convert time in seconds to Days, Hours , Minutes and Seconds .
• Add Time: The addTimer and removeTimer will add and remove timers respectively by updating timers state.

Finally we will use useEffect to set interval with time . Time will be updated in the interval itself . when time reaches 0 the isRunning state is set to false. Thats it now we can add render code . The render code will consist of input field for taking time as input in seconds. This will update time state in our code . Then we will display current time in division . Three buttons will be used for three functionalities respectively .

Steps to create the application:

Step 1: First we need to create react app using below command

npm create vite@latest <<Project_Name>> --template react

Step 2: Navigate to the folder

cd <<Project_Name>>

Step 3: Install bootstrap for css using below command.

npm install bootstrap

Step 4: Create a folder components in src directory and inside the folder create files Countdown.js and Countdown.css

Project Structure:

👁 Screenshot-(75)

Example: Here we we have created two JS file App.js, Countdown.js and CSS file to style the interface.

Steps to run the application:

Step 1: Open terminal in project folder and run below command

npm run dev

Step 2: Open the following link in your browser

http://localhost:5173/

Output: