DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for How to make a count down timer in React ๐Ÿ”ฅ
Avneesh Agarwal
Avneesh Agarwal

Posted on • Originally published at blog.avneesh.tech

How to make a count down timer in React ๐Ÿ”ฅ

Hello everyone, in many kinds of apps you need to build a count down. So, today we will see how to build a countdown timer in React!

Tick tock

Setup

Create a new react app

npx create-react-app react-countdown
Enter fullscreen mode Exit fullscreen mode

Cleanup

  • Delete everything in the app div in App.js.
import "./App.css";

function App() {
  return <div className="app"></div>;
}

export default App;
Enter fullscreen mode Exit fullscreen mode
  • Delete everything in App.css

  • in index.css add-

* {
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

Starting the app

To start your react app run the following commands

npm run start # npm

yarn start # yarn
Enter fullscreen mode Exit fullscreen mode

If you now open localhost:3000, it should show you an empty canvas to work with.

image.png

Creating the countdown timer

Inside App.js create a new function called calculateTimeLeft-

  const calculateTimeLeft = () => {

  };
Enter fullscreen mode Exit fullscreen mode

Let's now create this function! Inside the function add a new variable called difference-

const difference = +new Date("2022-02-28T18:30:00+05:30") - +new Date();
Enter fullscreen mode Exit fullscreen mode

Add the end date with time and timezone inside the first new Date constructor. The one here is "28th February 2022 18:30 IST". You can generate this from Time stamp generator. I would recommend using the "W3C" format.

confusion

Now, inside the function create a new variable to store the time-

let timeLeft = {};
Enter fullscreen mode Exit fullscreen mode

Now let's write the logic for calculating time left-

   if (difference > 0) {
      timeLeft = {
        hours: Math.floor(difference / (1000 * 60 * 60)),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      };
    }

    return timeLeft;
Enter fullscreen mode Exit fullscreen mode

This is just a basic division for calculating the time in hours, minutes, and seconds.

Now, create a new state for storing the time and a useEffect for updating it very second-

 const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

  useEffect(() => {
    setTimeout(() => {
      setTimeLeft(calculateTimeLeft());
    }, 1000);
  });
Enter fullscreen mode Exit fullscreen mode

You will also need to importuseState and useEffect-

import { useEffect, useState } from "react";
Enter fullscreen mode Exit fullscreen mode

Finally, let's render the time-

return (
    <div className="App">
      <p>
        <span>{timeLeft.hours}</span>
        <span>:</span>
        <span>{timeLeft.minutes}</span>
        <span>:</span>
        <span>{timeLeft.seconds}</span>
      </p>
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

This is going to take the time in hours, minutes, and seconds from the timeLeft object.
Our timer is now successfully working ๐Ÿฅณ

image.png

Do something once the countdown is over

Once the countdown is over we might want to show something else to the user. We can do this by simply checking if timeLeft.hours or timeLeft.minutes or timeLeft.seconds exist-

{timeLeft.hours || timeLeft.minutes || timeLeft.seconds ? (
    <p>
      <span>{timeLeft.hours}</span>
      <span>:</span>
      <span>{timeLeft.minutes}</span>
      <span>:</span>
      <span>{timeLeft.seconds}</span>
    </p>
  ) : (
    <p>Time is up ๐Ÿ”ฅ</p>
  );
}
Enter fullscreen mode Exit fullscreen mode

If you now set the date to a time that has passed, you can see that it shows Time is up!

Conclusion

Making a countdown timer in react is this easy with react hooks! Hope you could make a countdown timer and learned from this tutorial. See ya in the next one โœŒ๏ธ

Useful links

GitHub repo

More about react hooks

Let's connect

Top comments (0)

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.