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.

The JavaScript ended up being more difficult than I expected. I originally started out just creating a bunch of separate functions that were supposed to manipulate the DOM based on what was clicked. This turned out to be pretty difficult to manage almost right away, so I stepped back and tried to think of a way that felt more organized. I decided instead to try my hand at JavaScript’s pseudo-class mechanics and make a Timer class object.

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 this and new, so it was good to be able to get some rudimentary practice with them. The design of this project certainly leaves something to be desired, but I can work on making things pretty later. My main focus right now is on getting a deeper grasp of JavaScript and programming in general.

A live version of this project is hosted here.

The code for the project is in this repository.

Notes:

• 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:

• Calculator
• Pomodoro Clock (this article)

Up next: Tic-Tac-Toe! I’m excited for this one!