Pomodoro

Pomodoro

Overview

What is Pomodoro?

The pomodoro technique is a time management method based on 25-minute stretches of focused work broken by 3-to-5 minute breaks and 15-to-30 minute breaks following the completion of four work periods.

According to research the pomodoro technique is meant to train people to focus on tasks better by limiting the length of time they attempt to maintain that focus and ensuring restorative breaks from the effort. The method is designed to overcome the tendencies to procrastinate and to: multitask – both of which have been found to impair productivity – and to help users develop more efficient work habits. Effective time management allows people to get more done in less time, while also fostering a sense of accomplishment and reducing the potential for burnout.

Instructions {user stories}

Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/aNyxXR/. Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style. User Story: I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed. User Story: I can reset the clock for my next pomodoro. User Story: I can customize the length of each pomodoro. Remember to use Read-Search-Ask if you get stuck. When you are finished, click the “I’ve completed this challenge” button and include a link to your CodePen. You can get feedback on your project by sharing it with your friends on Facebook.

My Approach

Code:

function setTimer() {
  var setMin = document.getElementById('setMin').value;
  var sessions = document.getElementById("session").innerHTML;
  var min = document.getElementById("breaktime").value;
  document.getElementById('session').innerHTML = sessions;
  document.getElementById('timer').innerHTML = parseInt(setMin) + ":" + "00";
  document.getElementById('btime').innerHTML = min + ":" + "00";
}

function startBreakTime(func, arr) {
  if (arr[0] === "0" && arr[1] === "00") {
    countdownBreakTime(arr);
  }
}


function countdownBreakTime() {
  var currentSession = document.getElementById("session").innerHTML;
  var cTime = document.getElementById('btime').innerHTML;
  var tArray = cTime.split(/[:]+/);
  console.log(tArray);
  var m = parseInt(tArray[0]);

  var s = checkSecond((tArray[1] - 1));
  var session = parseInt(currentSession);

  if (s == 59) {
    m--;
};

  document.getElementById('btime').innerHTML = m + ":" + s;
  var btimer = setTimeout(breakTime, 1000);
  session= session+1;

  if (tArray[0] === "0" && tArray[1] === "00") {
    var min = "0";
    var sec = "00";
    console.log("time has stopped");
    document.getElementById('btime').innerHTML = min + ":" + sec;
    clearTimeout(btimer);
    document.getElementById('session').innerHTML = session;
    notify();
  }
  

}


var audio = new Audio('/media/vuyisile-301/THECODINGGR/pomodoro/Loud_Alarm_Clock_Buzzer-Muk1984-493547174.mp3');
function notify() {
  audio.play();
  console.log("The notify tone is on");
}


function stopTimer(func, arr) {
  if (arr[0] === "0" && arr[1] === "00") {
    var min = "0";
    var sec = "00";
    console.log("time has stopped");
    document.getElementById('timer').innerHTML = min + ":" + sec;
    clearTimeout(func);
    notify();
  }
}


function stopAlarm() {
  audio.pause();
}


function countdownSessionTime() {
  var presentTime = document.getElementById('timer').innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  console.log(timeArray);

  var m = timeArray[0];
  var s = checkSecond((timeArray[1] - 1));
  if (s == 59) {
    m--;

  };

  document.getElementById('timer').innerHTML = m + ":" + s;
  var timer = setTimeout(countdownSessionTime, 1000);


  stopTimer(timer, timeArray);
  startBreakTime(timer, timeArray);
}


function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {
    sec = "0" + sec
  };
  if (sec < 0) {
    sec = "59"
  };
  return sec;
}

function resetAll(){
 window.location.href=window.location.href
}

Code Explanation:

My functions:

setTimer() - is a function that uploads minutes from both input-boxes (session-time and break-time) to where I display the time set.

countdownSessionTime() - this function basically decrements the time set by seconds from 59 to 0, after 59 seconds the minutes decrease by 1 and consistantly push or posting the changing time on screen.

countdownBreakTime() - like “countdownSessionTime()” this function counts down or decrements the length of break time set and posts it on screen but its only executed when the session time is “00:00”.

checkSecond(sec) - this function checks the state of seconds and changes it back to 59secs if the seconds are less than 0.

startBreakTime() - this function basically calles countdownBreakTime() to be executed when the session time is “00:00”.

stopTimer(func, arr) - checks if the session time is over (session time = “00:00”) and clears time out, then executes the notify() function when the state of session time is truly equal to “00:00”.

notify() - is bell or ring tone that plays when the conditions in “stopTimer” are true.

stopAlarm() - this function executes when the the stop alarm button is clicked, its purpose is to stop the alarm tone or bell.

resetAll() -refreshes everything and resets the window to its original state.

Conclusion

At first I didn’t know where to start with this task because I did have an idea on how to use the good tools that javascript has in store for us (setTimeout and clearTimeout). Through this project, I learned the purpose of those two js functions,how and when to use them.