Today's Featured Project: Be Productive Using a Pomodoro Clock
Posted April 12, 2020
Pomodoro clocks allow you to alternate between working a 25-minute session and taking a five-minute break. I have implemented my own pomodoro clock using the React and Redux JavaScript libraries.
What I Learned
Here are some of the skills that I learned while creating this heat map:
- Creating the interface. I used a simple, clean interface for this project. I researched the HTML entity for the up and down arrows. I used rounded corners for the clock's remaining time display.
- Using the React library. The React code handles all of the button clicks and displays the various text and values such as the time remaining. One of the trickier parts of this project is handling what happens when the start/pause button is pressed. I decided to let React handle the logic to check whether the clock should start a new alarm or pause the current alarm.
- Using the Redux library. I used Redux to handle the app's state, including changing the break and session lengths and handling the remaining time left.
- Using React-Redux. React-Redux handles the JavaScript setInterval call that occurs when the user starts a new alarm.
- Implementing helper functions. I wrote helper functions in vanilla JavaScript to play the alarm when time is up; rewind the alarm if the reset button is pressed; convert the number of seconds remaining into minute/second format using a JavaScript object; and determining whether to display a leading zero or the "60" if the session or break length is 60 minutes long.
Takeaways
I learned how to properly call the setInterval function in a React-Redux project. I also strengthened my overall knowledge of React and front-end programming. React will be useful for creating JavaScript apps that require user interactions, such as forms, interactive graphs, simulations, and games.