Free Code Camp Zipline Project: Pomodoro Clock Part 1.

Posted by

Tscreenshot-codepen.io_2016-08-07_14-52-32_kj7ht6he Pomodoro Zipline challenge is the 2nd advanced front end challenge on Free Code Camp’s Front End certification track.   Pomodoro is a time management technique that uses a timer to separate time into  work and break segments. I advise everyone to learn more about Pomodoro, it’s a great tool if you need help staying on track with productivity.  The objectives of this project were to provide the user the ability to utilize a 25 min Pomodoro that would alert the user after the time has elapsed, allowing the user to reset the clock and extend the time if they would like to.

This project is one of my favorites because it was pretty straightforward to code and I like the animation effects I was able to achieve. I decided to use the rotating timers and color changes  because I wanted to give the user an entertaining and eye catching effect that would attract their attention.  The rotating effect  happens when either the work timer or the break timer are active. To achieve the effect, keyframes are divided into 5 percentages.  At 0%, the timer that is active is in it’s natural state with a scale of 1 and it’s box shadow is black.  Then at 25%, the timer rotates 10 degrees to the right.  Next at 50%, the scale increases 10% and the box shadow changes to white and expands.  At 75%, the timer rotates -10 degrees to the left. Finally, at 100% when the animation is complete.  The timer is scaled back to l, the background color changes from cyan to dark cyan. Also, the box shadow goes back to dark and to it’s initial size.

@keyframes scale{
   0%{
       transform: scale(1);
       box-shadow: 1px 0px 11px 6px rgba(1,1,1,0.75);
   } 

   25%{
       transform: rotate(10deg);
   }

  50%{
       transform: scale(1.1);
       box-shadow: 5px 4px 15px 10px rgba(255,255,255,0.75);
   }
   75%{
       transform: rotate(-10deg);
   }

   100%{
       transform: scale(1);
       background-color: darkcyan;
       box-shadow: 1px 0px 11px 6px rgba(1,1,1,0.75);
   }
}

Let’s talk about the javascript code used for the project. I started by declaring 9 variables globally because I knew they were going to be used in multiple functions.

var workTime = 25;
var downTime = 5;
var seconds = 59;
var minutes = workTime;
var paused = false;
var workTimeLength = null;
var breakTimeLength = null;
var currentTime = null;
var timerAlarm = new Audio("http://res.cloudinary.com/angiemjohnson/raw/upload/
v1469195204/Beep-beep-beep_lxbbce.mp3");

I then wrote a function to set the main timer with the initial work time minutes, which is 25. The second function formats the seconds to be displayed in double digits.

function updateMinutes() {
    minutes = workTime;
    $("#workTimeNum").html(workTime);
    $("#min").html(workTime);
}

function formatSeconds(seconds) {
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    return seconds;
}

Next, the html of the downTimeNum , workTimeNum and min elements are set to their corresponding variable.  The .toggleClass() method is being used to add the “inactive” class because the work timer, the break timer, and the main clock all need to be inactive when the page loads. Lastly, the .prop() method is used to disable the pause button on page load.  I had to add this property because someone who was testing out the clock found that an extra 1 minute and 59 seconds were added to the clock if you first click pause and then click start.  I’m glad they were able to find this bug.


$(function () {
    $("#downTimeNum").html(downTime);
    $("#workTimeNum").html(workTime);
    $("#min").html(workTime);
    $("#downtimeTimer").toggleClass("inactive");
    $("#workTimer").toggleClass("inactive");
    $("#clock").toggleClass("inactive");
    $("#pause").prop("disabled", true);

I then registered the buttons that increase and decrease the time to an on “click” function. I’ve written comments to explain what is happening in each function.


//changes the work time length
    $("#increaseWorkTime").on("click", function () {
        workTime += 1; //increments the work time by 1
        updateMinutes();
    });

    $("#decreaseWorkTime").on("click", function () {
        workTime -= 1; //decrements the work time by 1
        if (workTime < 1) {
            workTime = 1;
        }
        updateMinutes();
    });
      //changes the break time length
    $("#increaseBreakTime").on("click", function () {
        downTime += 1; //increments the down time by 1
        $("#downTimeNum").html(downTime);
    });

    $("#decreaseBreakTime").on("click", function () {
        downTime -= 1; //decrements the work time by 1
        if (downTime < 0) {
            downTime = 0;
        }
        $("#downTimeNum").html(downTime);
    });

    $("#start").on("click", function () {

        //disables the reset button
        $("#reset").prop("disabled", true);
        $("#start").prop("disabled", true);
        $("#pause").prop("disabled", false);
        init();
    });

    $("#pause").on("click", function () {
        //stops the current time and break time from elapsing while the pause button is being used
        clearInterval(currentTime);
        clearInterval(breakTimeLength);
        paused = true;
        // gets the attribute value of start
        $("#start").prop("disabled", false);
        //enables the reset button to work after the pause button has been pressed
        $("#reset").prop("disabled", false);
        $("#pause").prop("disabled", true);

    });
    $("#reset").on("click", function () {
        //reset button needs to change the time to equal the work time value
        //make the timer minutes equal the worktime
        $("#min").html(workTime);
        // make the timer seconds equal "00"
        $("#sec").html("00");

        //the seconds have to be reset to reflect the initial value
        seconds = 59;
        //the minutes have to be reset to reflect the intial value
        minutes = workTime;

        //set pause, so that it doesn't equal true when the time is reset
        paused = false;

        //the timers are switched from being active to inactive when the reset button is clicked
        $("#downtimeTimer").removeClass("active inactive");
        $("#workTimer").removeClass("active inactive");
        $("#downtimeTimer").addClass("inactive");
        $("#workTimer").addClass("inactive");
    });

In part 2, I will discuss the functions that makes the clock, the work  and down timers functional. Until next time…

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