FCC Speedrun — Project #2: Pomodoro Clock
It took longer than I expected (a whole week!) to get this project done and get this post written. This was more due to me not having the opportunity to work on it rather than the project actually taking a long time, but the end result was the same.
Anyhow, this was the second of FCC’s advanced front-end projects, the Pomodoro Clock. I approached it the same way as the calculator: make a skeleton of HTML/CSS, then get the logic working how I want it to, then tidy up the appearance a bit. After my experience last time, I made sure to spend a bit more effort up front on the HTML/CSS so that there was less reformatting after. It worked to some extent, but I suspect that having to come back through the CSS and tidy things up is just a fact I’ll have to come to terms with, at least for now.
My Timer class contained the methods (like start, stop, reset, etc.) to control the timer on the inside, so once I created a new timer for the session and the break, I was able to control each of those timers from the outside using the Timer methods.
After that, the difficult part was making the app understand when to switch from one timer to the next. This ended up being a standalone function that checked for the current timer’s status and switched to the other timer once the current timer’s countdown hit zero.
All in all, I’m really happy I was able to figure this out. I’ve been a little shaky with using
A live version of this project is hosted here.
The code for the project is in this repository.
- Just one big take-home from this project: scrapping all my JS code and starting from scratch after a couple nights of work really brought home the idea that I should spend a little more time considering different approaches to the problem before I just dive in. I don’t want to be paralyzed from analysis, but giving it some deeper thought before wading in up to my neck will probably save me time in the end.
Done so far:
- Pomodoro Clock (this article)
Up next: Tic-Tac-Toe! I’m excited for this one!