Create a Countdown Timer App with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a countdown timer app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app countdown-timer

with NPM to create our React project.

Create the Countdown Timer App

To create the countdown timer app, we write:

import React, { useEffect, useState } from "react";

const futureDate = new Date(2050, 0, 1);
const getDateDiff = (date1, date2) => {
  const diff = new Date(date2.getTime() - date1.getTime());
  return {
    year: diff.getUTCFullYear() - 1970,
    month: diff.getUTCMonth(),
    day: diff.getUTCDate() - 1,
    hour: diff.getUTCHours(),
    minute: diff.getUTCMinutes(),
    second: diff.getUTCSeconds()
  };
};

const formatDate = (date) => {
  let d = new Date(date),
    month = (d.getMonth() + 1).toString(),
    day = d.getDate().toString(),
    year = d.getFullYear().toString();

  if (month.length < 2) month = "0" + month;
  if (day.length < 2) day = "0" + day;

  return [year, month, day].join("-");
};

export default function App() {
  const [diff, setDiff] = useState({});

  useEffect(() => {
    const timer = setInterval(() => {
      setDiff(getDateDiff(new Date(), futureDate));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="App">
      <p>
        {diff.year} years, {diff.month} months, {diff.day} days,
        {diff.hour} hours, {diff.minute} minute, {diff.second} seconds until{" "}
        {formatDate(futureDate)}
      </p>
    </div>
  );
}

The futureDate variable is the date we’re counting down towards.

getDateDiff is a function that calculates the difference between 2 dates.

We compute that by subtracting the UNIX timestamps of date2 and date1 .

getTime gets the UNIX timestamp.

We pass that difference to the Date constructor to get the date difference object.

Then we get the parts of it with various methods.

getUTCFullYear gets the year. We’ve to subtract it by 1970 to get the difference.

getUTCMonth gets the month.

getUTCDate gets the date.

getUTCHours gets the hours.

getUTCMinutes gets the minutes.

getUTCSeconds gets the seconds.

The formatDate function formats the date .

We use it to format the futureDate to display it in a human-readable format.

We just get the year, month, and day, and join them with a dash.

In the App component, we call setInterval to call setDiff to set the date and time difference every second.

And we return a function that calls clearInterval when we unmount the component.

In the JSX code, we show the diff parts and the futureDate formatted with formatDate .

Conclusion

We can create a countdown timer easily with React and JavaScript.