This Is How I Created A Countdown Timer App In React
Create a simple and good looking countdown timer app
The biggest sale of the year known as Black Friday Sale just ended and you might have received hundred’s of emails showing the countdown timer for purchasing any course on udemy, pluralsight etc or purchasing any subscription for limited time period.
In this article we will actually build a real countdown timer application as shown in the main image above
So Let’s get started!
- Create a new react app using
If you don’t have create-react-app installed, install it using
npm install create-react-app -g
2. Now open the countdown_timer directory in your favorite IDE like Visual Studio Code
3. Delete all the files from src folder except index.js
4. Add the following content in index.js
5. We will be using react-bootstrap for basic css styling. We will also be writing our own css file.
6. Navigate to the countdown_timer directory from terminal and install the packages
npm install email@example.com firstname.lastname@example.org
7. Note, the react-bootstrap also needs bootstrap for basic css so we added that too
8. Now your package.json will have dependencies section as shown below
9. For selecting the date and time, we will use react-datetime-picker library. It’s very easy to use and also very powerful. You can set all the fields of date and time just using keyboard arrow keys while selecting date.
You can find all the available options and documentation regarding it at https://www.npmjs.com/package/react-datetime-picker
10. So to install the react-datetime-picker use
npm install email@example.com
11. Create two new files in src folder with name Timer.js and styles.css
12. Add the following content in styles.css
13. Add the following content in Timer.js
14. Now run the application by running npm start command from terminal
15. Let’s understand what is happening in Timer.js
- In the render method, we have added a form for selecting the end date and a button to start the timer
- Below that, we are displaying the countdown timer section
- When we click on “Begin Countdown” button as shown in code below,
We are calling calculateCountdown function which takes the current date-time and end date-time and finds out the difference between the two dates.
- Inside the calculateCountdown method, for the setState method, we are updating the days, hours, minutes and seconds with the calculated values and once the state is updated then we again call the calculateCountdown function after delay of 1 second (1000 ms) using setTimeout
- It’s always a good practice to remove all the event handlers added and clear the timeout or interval in the component once the component is unmounted which we are doing in componentWillUnmount method.
And there you go! We have created a simple and good looking countdown timer application.
Github Source Code: https://github.com/myogeshchavan97/countdown_timer
Live Demo: https://codesandbox.io/s/hopeful-sea-2l3ls
That’s it for today. Hope you learned a lot while building this application.