This tutorial will guide you through the process of creating a timer using React.js. The first step is to create an input field where you can enter the value from which you want the timer to start counting down.
The timer will then count down to 0, showing the remaining time as it progresses. This input field allows you to set a custom starting value for the timer and gives you greater control over its behavior.
The first step would be setting up our React application and for that, you need to choose a development environment. For this project, we’ll use Vite, but feel free to choose another environment that suits your preferences.
If you don’t know how to set up React application with Vite Click here
Step 1: Creating UI
To create the user interface for our timer, we’ll start by creating an input element that will allow the user to specify the starting value for the timer. Next, we’ll create a button that will initiate the timer when clicked. Finally, we’ll display the timer counting down on the screen, showing the remaining time as it progresses. By breaking down the UI creation process into these simple steps, we can create a clear and intuitive interface that is easy for users to understand and use.
<input
required
type="number"
placeholder="Enter the value"
className="p-3 border border-gray-300 rounded-md shadow-sm h-15 w-60 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
/>
<button className="font-medium px-4 py-1.5 text-white bg-blue-500 border border-blue-500 rounded-md">
start
</button>
<h2 className="text-2xl"></h2>Step 2: Defining state
We’ll create two state variables for our timer. The first variable will hold the countdown timer value and will be updated to show the remaining time.
The second variable will store the setInterval function’s variable. This will allow us to start, stop and manipulate the timer as needed. By using state variables to store this information, we can ensure that our timer is accurate and responsive, providing a seamless and reliable user experience.
const [timer, setTimer] = useState(0);
const [timeInterval, setTimeinterval] = useState();Step 3: Handling Input onchange()
To update the timer value based on the user input, we will add an onChange event listener to our Input component. This event listener will trigger a state update whenever the user enters a new value, ensuring that the timer is always synchronized with the user’s input.
By updating the state in response to user input, we can ensure that our timer application remains accurate and up-to-date, providing a seamless and reliable user experience.
<input
onChange={(e) => setTimer(e.target.value)}
/>Step 4: Stopwatch CountDown
We will create a function called handleClick() and pass it to the button component.
When we will click the button, a function called handleClick runs. This function uses a special code called setInterval() to make the timer work.
The setInterval() code runs every second (which is the same as counting to “1, 2, 3, 4” and so on), and it takes away one second from the timer each time it runs.
The timer is stored in second state variable called TimeInterval. This helps us keep track of the time and update the screen to show the new time.
What is setInterval() ?
`setInterval` is a method in JavaScript that allows you to run a block of code (usually a function) repeatedly after a specified amount of time has passed.
to know more read this article :
https://dev.sochokuchnaya.com/blog/javascript/setinterval-method/
const handleClick = () => {
const interval = setInterval(() => {
setTimer((sec) => sec - 1);
}, 1000);
setinterval(interval);
};
<button
onClick= {handleClick}
> start
</button>
<h2 className="text-2xl">{timer}</h2>Now, you will notice that the timer starts counting down from the value that you entered. As each second passes, the timer will decrease by one second and the updated value will be displayed on the screen.
Step 5: Stoping Timer
We will make sure that the timer stops when it reaches 0. At this point, the timer should no longer be counting down.
To stop the timer we will use `useEffect()` that runs whenever the timer changes.
The code inside the `useEffect()` function will check if the timer has reached zero or not. If it will reach zero, it means the time is up and we need to stop the timer. We will do this by using another special function called `clearInterval()`.
So, every time the timer changes, this code checks if the timer has reached zero, and if it has, it stops the timer.
What is clearInterval() ?
`clearInterval()` method is always used to stop the `setInterval()` method.
to know more read this article :
https://dev.sochokuchnaya.com/blog/javascript/setinterval-method/
useEffect(() => {
if (timer <= 0) {
clearInterval(Interval);
}
}, [timer]);