Pomodoro Timer (Pt 2)

This should really be titled as Part 1, since I’ve started from scratch on this project. Again. But, I have technically been working on this for a while so technically this is still part of my progress for this project.

Starting Over

At the beginning of February, I decided that I would much rather start over with a clear head about this project than continue to build on something that frustrated me just by looking at it.

I have been working on this project by breaking it down into smaller parts to tackle at different times. On day one, I started with just the HTML.  It was boring and uneventful, but it made me be aware of how I wanted my content structured. Should this be a div or a span? Should that be in one div or separated into two?

Screenshot 2016-02-06 14.35.16 (2)

Next time, I gave it some Sass. I am becoming comfortable using Scss for my CSS. It keeps everything so organized and nice to look at. I also added Bootstrap, mostly for the styling and glyphicons for buttons. I added the fancy Lobster font for my header too.

Screenshot 2016-02-05 20.41.30 (2)

User Story: I can customize the length of each pomodoro.

Each project on Free Code Camp is given user stories that must be satisfied in order to complete the project. This week, I completed one of them: customizing the length of each pomodoro. In other words, you can now click the plus or minus signs and watch the values for work and break sessions change.

CodePen recently added a console to the interface. You can access it by changing that last 0 in your project’s editor url to a 1. You can also change the visibility of the other text windows by changing the other 3 values in the url.

Screenshot 2016-02-06 14.16.16 (2)

So far, separating tasks like this has been helpful. I multi-task a lot in my daily life, which wasn’t a good thing for this project. Jumping around between different tasks was leading me to more confusion instead of solving anything.

You can view the live version below:

Advertisements

3 thoughts on “Pomodoro Timer (Pt 2)

  1. I love how clean your timer looks! And I’m very jealous of how many libraries you use! I’m trying to get more in the habit of using them, so forced myself to use Bootstrap on my latest project.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s