This content originally appeared on DEV Community and was authored by Thomas Cansino
Hi everyone! Welcome back to another blog where I document the things I learned in web development. I do this because it helps retain the information and concepts as it is some sort of an active recall.
On days 75-77, after finalizing the design of the clock timer app using CSS, I started to program the app by adding functionalities to its buttons and display.
In this blog, I'll show you how I finished building this app, how I deployed it to github and how I acquired my front end certificate.
What I did first is to make a function to increment and decrement the break and session states. Adding 1 minute for every click.
I also added a function to handle the start, stop, and reset buttons.
Next, I created a useEffect hook to handle the countdown timer, as well as the loop between session and break states. The code goes like this: if the timer's state is running, the countdown plays and loops through the session and break states after the time runs out. If the timer’s state is not running, the clock pauses. I also returned a clearInterval at the end so that the state of the timer will always be refreshed whenever the hook runs.
The clock will keep on cycling back and forth to 2 states which are the session state and the break state.
For example, I set a 3 minute-session and a 1-minute break. Once the session minutes run out, it will automatically switch its state to break and run a 1 minute timer. After it turns 0, it will automatically switch its state to session and run a 3 minute timer. This will keep on looping until the user presses the stop or reset button.
I personally use this app in my study sessions. I set 30 mins of session time to study and 5 mins for break. It's my pomodoro method of studying.
This app can also be used when working out. Set a 5-min timer for cardio and a 1-min timer for breaks.
Finally, with this project finished, I earned my certificate in front end from freecodecamp and I can say that I am satisfied and happy with my progress considering I've been doing this after my 9-5. I learned so much in the span of 3 months and I am only getting started.
Now, I look forward to studying the back end part of the full stack roadmap as well as the database and APIs.
Anyways, that’s all for now, more updates in my next blog! See you there!
This content originally appeared on DEV Community and was authored by Thomas Cansino
Thomas Cansino | Sciencx (2024-07-16T13:21:08+00:00) [DAY 75-77] I built a timer app using React. Retrieved from https://www.scien.cx/2024/07/16/day-75-77-i-built-a-timer-app-using-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.