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
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;
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;
}
}
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)