FCC Challenge — Pomodoro Clock

Frank sat in front of his laptop, wondering how to write a story about a web application he just built.

The current struggle started about 5 months ago, Frank wanted to take programming seriously. He wanted to be a bad-ass programmer, to be capable of building great software from scratch.

Although he had basic knowledge of HTML, CSS and Javascript from courses on Codecademy, Frank still lacked direction, a roadmap to approach this unknown monster.

Then came that fateful day; November 5, 2016 when he really started coding. He had stumbled on FreeCodeCamp (which promises a roadmap to becoming a Web Developer for free) a few months ago, and decided to give it a go. He finished the first few tasks and was irregular with his tasks on FreeCodeCamp (aka FCC), but somehow he stuck with it.

In December, 2016 roughly a month after starting FCC, Frank discovered Chingu (one of the best programming communities ever). Chingu is the group name for several cohorts hosted on Slack, sub-groups of Chingu include: Lions, Raccoon, Red Pandas etc I joined one of the sub-groups and the people there have been amazing. Friendly, brilliant, hard-working, focused, fun and committed folks.

Joining Chingu has been one of the best decisions I made. Many thanks to Chance Taken for creating this community. Chance Taken exemplifies the kind of human that inspires, motivates and pushes the world forward.

He’s a great guy.

By now, you understand that I am Frank and Frank is me :)

5 months into the programming journey, I have grown by leaps and bounds, at the very beginning of my journey, full of hope, optimism and faith. If I have come this far, I can go all the way and achieve my dream of “Building great products that touch people’s souls”. I really want to change the world…

One of the pillars of FCC and Chingu is @P1xt, a legendary learner/programmer who has been coding for decades (I salute you). She recently initiated the FCC Speedrun Challenge which is what inspired this article.

I have borrowed some of her ideas, and my personal challenge involves hosting my projects’ source code on Github and writing a blog post for each project. Perhaps even get some pair-programming experience along the way (if you are interested in this, please message me). I won’t be able to stick to the 3 week deadline set by @P1xt, my goal is to finish all of FCC’s projects by September 30, 2017 and I am on track to attain the Front End Certificate at the end of this month (March 30, 2017).

I just built the Pomodoro clock, you can view the live version here and the source code here.

Well, what is Pomodoro?

Pomodoro involves the art of tackling tasks in short sessions and taking breaks e.g. I code for 30 minutes and then take a 10 minute break, I then code again for 30 minutes and then take a 10 minute break, the cycle goes on and on.

The strategy is based on high intensity focus for a short period of time with intermittent breaks to rest the brain in preparation for the next session.

My task was to build a clock that would satisfy the following requirements:

1. User Story: I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.
 2. User Story: I can reset the clock for my next pomodoro.
 3. User Story: I can customize the length of each pomodoro.

I added an extra feature of the break timer and alarm sounds.

Inspired by this design

My task list looked like this:

1. Create Circle

2. Create Pomodoro Timer

3. Sound Alarm once Pomodoro Timer is complete

4. Create Break Timer

5. Sound Tone once Break Timer is complete

6. Reset Clock

7. Controller for customizing length of Pomodoro and Break Timer

8. Beautify design i.e. custom fonts and colors

I had no idea how to create a timer and just a fuzzy idea of how to create a circle.

Here comes Google to the rescue.

Some of the most helpful resources out there (asides Google, which is the most important) are:

1. Stack Overflow

2. W3Schools

3. Mozilla Developer Network

4. Others i.e. blog posts from various websites

I found answers to “How to create a Timer?” on Stack Overflow, succeeded in breaking down the code, understanding it and then rewrote it.

It was a bit difficult modifying the Google query that produced the answers I wanted/understood. Searching Google is really an art.

I also had to interpret the answer (source code on Stack Overflow) which required me Googling to understand some particular JavaScript methods.

Good news is, I conquered and eventually built my Pomodoro clock with Vanilla JS (plain old JavaScript, with no frameworks). Here it is

My Pomodoro Clock

I have learnt that the most difficult part of any project is starting it.

Having the right resources is also very important, it could determine how much time you save/waste on a project.

Try to think your way through a problem first, if you get stuck and can’t find a way through, it’s okay to ask your fellow coders, someone out there has faced and conquered your current problem. As long as you concentrate on understanding the problem/solution, don’t just copy code. Try to understand how things work, in the long term it helps.

Till the next project,