DEV Community

Cover image for How to Create a Countdown Timer In ReactJS
Abdulrasaq Jamiu Adewuyi
Abdulrasaq Jamiu Adewuyi

Posted on • Updated on

How to Create a Countdown Timer In ReactJS

Introduction

In a previous article, I explained how to Create a Countdown Timer With JavaScript, this article contained more information on how the countdown timer work, its importance, and stated some use case where you would need a countdown timer. I also explained how the JavaScript setInterval() and clearInterval() method work. I recommend checking it out.

In this article, I will explain how to implement the countdown time in ReactJS.

Create a New React project

It’s simple to get started with React. To create a new React project, run the following command in the terminal.

This command will create a new react project with some example files to get you started, where count-down-timer will be your project name.

npx create-react-app count-down-timer
Enter fullscreen mode Exit fullscreen mode

With this project created, open /App.js file and paste the below code.

import './App.css';
import {useState, useEffect} from 'react';

function App() {
  const countdownDate = new Date('10/18/2022');
  //end date
  const [state, setState] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });
//state variable to store days, hours, minutes and seconds

  useEffect(() => {
    const interval = setInterval(() => setNewTime(), 1000);
    //indicating function to rerun every 1000 milliseconds (1 second)

    if(state.seconds < 0){
      clearInterval(interval)
    //Stop the rerun once state.seconds is less than zero
    }
  }, []);

  const setNewTime = () => {
    if (countdownDate) {
      const currentTime = new Date();
      //get current time now in milliseconds
      const distanceToDate = countdownDate - currentTime;
      //get difference dates in milliseconds
      let days = Math.floor(distanceToDate / (1000 * 60 * 60 * 24));
      // get number of days from the difference in dates
      let hours = Math.floor(
        (distanceToDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
      );
      // get number of minutes from the remaining time after removing hours
      let minutes = Math.floor(
        (distanceToDate % (1000 * 60 * 60)) / (1000 * 60),
      );
      let seconds = Math.floor((distanceToDate % (1000 * 60)) / 1000);
      // number of hours from the remaining time after removing seconds

      const numbersToAddZeroTo = [1, 2, 3, 4, 5, 6, 7, 8, 9];

      days = `${days}`;
      if (numbersToAddZeroTo.includes(hours)) {
        hours = `0${hours}`;
      } else if (numbersToAddZeroTo.includes(minutes)) {
        minutes = `0${minutes}`;
      } else if (numbersToAddZeroTo.includes(seconds)) {
        seconds = `0${seconds}`;
      }
      // a logic to add 0 in front of numbers such that 1 will be 01, 2 will be 02, and so on.

      setState({ days, hours, minutes, seconds });
      //Updating the state variable.
    }
  };

  return (
    <div className="container">
        {
            state.seconds < 0 ?
            <div className='counter-timer'> Time up </div>
            :
            <div className='counter-container'>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.days || '00'}</div>
              <span >Days</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.hours || '00'}</div>
              <span >Hours</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.minutes || '00'}</div>
              <span >Minutes</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.seconds || '00'}</div>
              <span >Seconds</span>
            </div>
          </div>
        }

    </div>

  );
}

export default App;

Enter fullscreen mode Exit fullscreen mode

Open /App.css file and paste the below code.


body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }
  div{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #time-up{
    display: none;
  }
  .container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  height: 100vh;
  background-color: #1A1A40;
  color: white;
  }
  .counter-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  }
  .counter-timer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: fl; */
  }
  .counter-timer{
    font-size: 60px;
    font-weight: 600;
    margin: 0;
    padding: 0;
  }
  span{
        color: #c7c7c7;
        font-size: 18px;
  }

  @media screen and (max-width : 900px) {
    .counter-timer {
      font-size: 30px;
      font-weight: 600;
    }
    span {
        font-size: 12px;
    }

  }
Enter fullscreen mode Exit fullscreen mode

And that is all. You have a super cool countdown timer.

Note: The countdown timer will not show up if you are reading this article on or after 18th October 2022. You should know why. This is because "10/18/2022" is our end date. Feel free to change the end date to a later date after today and see the magic.

Thanks for Reading πŸŽ‰πŸŽ‰πŸŽ‰

If you have any questions, kindly drop them in the comment section.

I'd love to connect with you on Twitter for more exciting content

Happy coding...

Top comments (0)