This Is How I Created A Countdown Timer App In React

Create a simple and good looking countdown timer app

Yogesh Chavan
Dec 4, 2019 · 3 min read
Countdown Timer

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!

  1. Create a new react app using

create-react-app countdown_timer

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 bootstrap@4.4.1 react-bootstrap@1.0.0-beta.16

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

package.json dependencies

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 react-datetime-picker@2.8.0

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
Countdown Start Button

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

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.

Want to become an expert in Javascript? Download your free ebook HERE

JavaScript in Plain English

Learn the web's most important programming language.

Yogesh Chavan

Written by

Full Stack Developer | Javascript | React | Nodejs. Want to become an expert in Javascript? Get your FREE Ebook HERE: http://bit.ly/free_js_ebook

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade