Free Code Camp Zipline Project: Pomodoro Clock Part 2.

Posted by

In the last post, I discussed the Pomodoro technique, the css animation and the preliminary stages of the JavaScript portion of the clock. In this post, I will discuss the functions that make the clock operational.

The first function written is the init function. The min and sec html elements are set to the variable minute and seconds that were declared in the global scope. Also if the paused variable is set to false, the work timer is operating and the minutes decrements until the work time set by the user has elapsed. The work time, work time timer is called every 1000ms and the current time (the time on the clock) are set in this function as well.


function init() {
    $("#sec").html(seconds);
    if (paused === false) {
        minutes -= 1;
        $("#min").html(minutes);
        $("#workTimer").toggleClass("active inactive");
    }
    //set pause to false
    paused = false;

    workTimeLength = window.setInterval(workTimeTimer, 1000);//set's the work Time
    currentTime = workTimeLength;
};

The next two functions are workTimeTimer , which operates the worktime timer and downTimeTimer , which operates the downTimeTimer . WorkTimeTimer tells the computer “the work timer is being used start counting down the minutes and seconds set by the user”. “When that time is over, play an alarm to alert the user, become inactive, and also clear the timer because break time is starting”. The downTimeTimerInit function is  called in this function as well. In the downTimeTimerInit function the down time (break time) time has been set, the timer is set to active, and the speed of the timer is set.


function workTimeTimer() {
    seconds -= 1;

    if (seconds < 0) {
        seconds = 59;
        minutes -= 1;
        $("#min").html(minutes);

    }

    if (minutes <= 0 && seconds <= 0) {
        //plays the alarm after the work time has elasped
        timerAlarm.play();
        $("#workTimer").toggleClass("active inactive");
        clearInterval(workTimeLength);//clears the timer
        currentTime = breakTimeLength;
        downTimeTimerInit();

    }
    //gets the formatted seconds and displays them
    $("#sec").html(formatSeconds(seconds));

}

//initalizes the down time clock
function downTimeTimerInit() {
    $("#downtimeTimer").toggleClass("active inactive");
    minutes = $("#downTimeNum").html() - 1;
    $("#min").html(minutes);
    seconds = 59;
    breakTimeLength = window.setInterval(downTimeTimer, 1000);

}

The final function is “downTimeTimer”, which works just like workTimeTimer. It tells the computer that the work timer is being used, start counting down the minutes and seconds set by the user. When that time is over, play an alarm to alert the user, make the down time timer inactive ,and clear the timer. The break time is over and the work timer is going to start again.


function downTimeTimer() {
    seconds -= 1;
    if (seconds < 0) {
        seconds = 59;
        minutes -= 1;
        $("#min").html(minutes);

    }

    if (minutes <= 0 && seconds <= 0) {
        timerAlarm.play();
        $("#downtimeTimer").toggleClass("active inactive");
        clearInterval(breakTimeLength);
        minutes = $("#workTimeNum").html();
        seconds = 59;
        init();
    }

    $("#sec").html(formatSeconds(seconds));
}
});

In conclusion, as I said before I really liked this project.   I learned how to rotate and scale an element using CSS animation. I will definitely be using those effects again. I also learned that as a developer you have to think about the user’s interaction with your app.  And that it’s important to do a much testing as possible to avoid the user having the ability to perform an action you didn’t intend.  Also, at some point I will go back and re code the pause, start and reset buttons.  I would like to find another way of disabling the pause button so it’s not so visible. To view the finished product, you can see it here.

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