Devlog 5 — Building the Study Timer

Today I worked on the js/timer.js file of my TaskForge study planner.

I wanted to add a simple timer that I could actually use while studying.

What I added

• Added a 25-minute study timer.
• Added a 5-minute short break.
• Added a 15-minute long break.
• Added Start, Pause, and Reset buttons.
• Added a countdown that updates every second.
• Added different messages depending on the timer state.
• Added a message when the timer reaches zero.
• Added buttons for switching between timer modes.
• Made sure another timer does not start while one is already running.

What I learned

While making this file, I learned how JavaScript timers work.

I practiced using:

• setInterval()
• clearInterval()
• Functions
• Variables
• if statements
• Event listeners
• Updating HTML using JavaScript
• Converting minutes into seconds

I also learned how to stop and restart a JavaScript timer without refreshing the webpage.

Testing

I tested the Start, Pause, and Reset buttons.

I also tested all three timer modes. To make testing faster, I temporarily used a shorter countdown instead of waiting for the full 25 minutes.

I checked the browser console and fixed small problems while testing.

Now TaskForge has a working study timer that can be used for focused study sessions and breaks.