Build a React app that allows users to track a Pomodoro cycle. Here's how a Pomodoro cycle works, in the words of Harry Guinness from the Zapier blog: You set a timer for 25 minutes, work until it's up, then take a five-minute break—and repeat ...
When working with intervals, it's important to also clear them. You can achieve this by passing the interval id you received when starting the interval to the clearInterval function: // start an interval and get its id const intervalId = setInterval(() => console.log('hello'), 1000); // clear the ...
Say you want to start a countdown timer when a user presses a "Start button". How would you build this in React? One common way I see - and it's even suggested by ChatGPT - is to have a state variable that remembers if the timer ...
Given a sentence, display it with half a second delay between each character. Start showing nothing and then display characters one by one until the full sentence is displayed. No style is required. To get started, clone the starter repo: https://github.com/reactpractice-dev/typewriter-effect It comes with a TypewriterEffect ...
...
Create a 5 minute countdown timer that can be started and stopped. 1. When the page is first loaded, the counter displays 5 minutes (i.e. 5:00) 2. When the user clicks "Start", the counter starts counting down. 3. When the user clicks "Stop", the ...
28 days of focused practice of increasing difficulty, going through everything from Fundamentals, Data fetching, Forms and using Intervals in React.
You will also get notified whenever a new challenge is published.
