pompodoro

index.html

<div class="container">
  <div id="timer-lengths">
    <div id="break-length" class="l-half">
      <h2>Break</h2>
      <button class="decrease">-</button>
      <span class="break-num">5</span>
      <button class="increase">+</button>
    </div>
    <div id="session-length" class="r-half">
      <h2>Session</h2>
      <button class="decrease">-</button>
      <span class="session-num">25</span>
      <button class="increase">+</button>
    </div>
  </div>
  <div id="timer-display">
    <div id="pomSess">
      <h2 class="pomType">Pomodoro #<span class="counter">1</span></h2>
      <h2 id="sess-countdown">GO</h2>
    </div>
    <div id="pomBreak">
      <h2 class="pomType">Break #<span class="counter">1</span></h2>
      <h2 id="break-countdown">GO</h2>
    </div>
  </div>
  <div id="timer-buttons">
    <button id="start-countdown">
      <h2>Start</h2></button>
    <button id="pause-countdown">
      <h2>Pause</h2></button>
    <button id="stop-countdown" class="l-half">
      <h2>Stop</h2></button>
    <button id="resume-countdown" class="r-half">
      <h2>Resume</h2></button>
    <div style="clear: both"></div>
  </div>
  <div id="tomatoes">
  </div>
</div>

pompodoro.markdown

pompodoro

A Pen by Pepeye on CodePen.

License.

script.js

//Using jQuery Timer 2:  https://jchavannes.com/jquery-timer and jQuery Circle Progress: https://github.com/kottenator/jquery-circle-progress

//Set break length based on input from + and - buttons

$('#break-length .decrease').on('click', function() {
  var $breakNum = parseInt($('.break-num').html());

  /*Check to see that breakNum is greater than one and that the BreakPom timer is either not active OR has no active property (happens on initial load before timer has been started)*/

  if ($breakNum > 1 && BreakPom.Timer.isActive === false || $breakNum > 1 && BreakPom.Timer.hasOwnProperty('isActive') === false) {
    $(".break-num").html($breakNum - 1);
    BreakPom.resetTime();
  } else {
    $(this).prop("disabled");
  }
});

$('#break-length .increase').on('click', function() {
  var $breakNum = parseInt($('.break-num').html());
  if ($breakNum < 15 && BreakPom.Timer.isActive === false || $breakNum < 15 && BreakPom.Timer.hasOwnProperty('isActive') === false) {
    $(".break-num").html($breakNum + 1);
    BreakPom.resetTime();
  } else {
    $(this).prop("disabled");
  }

});

//Set session length based on input from + and - buttons

$('#session-length .decrease').on('click', function() {
  var $sessNum = parseInt($('.session-num').html());
  if ($sessNum > 1 && Pomodoro.Timer.isActive === false || $sessNum > 1 && Pomodoro.Timer.hasOwnProperty('isActive') === false) {
    $(".session-num").html($sessNum - 1);

    Pomodoro.resetTime();
  } else {
    $(this).prop("disabled");
  }
})

$('#session-length .increase').on('click', function() {
  var $sessNum = parseInt($('.session-num').html());
  if ($sessNum < 60 && Pomodoro.Timer.isActive === false || $sessNum < 60 && Pomodoro.Timer.hasOwnProperty('isActive') === false) {
    $(".session-num").html($sessNum + 1);
    Pomodoro.resetTime();
  } else {
    $(this).prop("disabled");
  }
});

//Break timer

var BreakPom = new(function() {
  //Get break length num from break num choice
  var $breakNum = parseInt($('.break-num').html());
  //Turn number into milliseconds
  var breakMilliseconds = $breakNum * 60 * 1000;
  /* Turn number into seconds; necessary for initial call of timer */
  var breakSeconds = $breakNum * 60;
  var $countdown;

  //Create audio element to play bell
  var audioElement = document.createElement('audio');
  audioElement.setAttribute('src', 'https://s3.amazonaws.com/showcase.knanthony.com/pomodorotimer/bell.wav');

  $(function() {
    // Setup the timer
    $countdown = $('#break-countdown');
    BreakPom.Timer = $.countDown(function() {
      $countdown.html(this.getFormattedTime());

      if (this.isFinished()) {
        audioElement.play();
        BreakPom.Timer.stop();
        //Increment up the counter in Pomodoro
        Pomodoro.increment();
        //Update the counter number in pomType
        $(".counter").html(Pomodoro.counter());
        $('#pomBreak').hide();
        $('#pomSess').fadeIn("slow");
        Pomodoro.Timer.start();
        Pomodoro.pomCircle();
        return;
      }
    }, breakSeconds);
    BreakPom.Timer.stop();
  });

  this.resetTime = function() {
    $breakNum = parseInt($('.break-num').html());
    breakMilliseconds = $breakNum * 60 * 1000;
    $countdown.html($breakNum);
    BreakPom.Timer.countdown = breakMilliseconds;
  }
});

//Session Pom Timer
var Pomodoro = new(function() {
  //Get number from session-num choice
  var $sessNum = parseInt($('.session-num').html());
  //Change number to milliseconds
  var sessionMilliseconds = $sessNum * 60 * 1000;
  //Change number to seconds, necessary for initial call of the countdown timer
  var sessionSeconds = $sessNum * 60;
  var $countdown;
  //create audio element to play bell
  var audioElement = document.createElement('audio');
  audioElement.setAttribute('src', 'https://s3.amazonaws.com/showcase.knanthony.com/pomodorotimer/bell.wav');
  var n = 1; //initial number for counter

  //function to increment counter
  this.increment = function() {
    return n++;
  };

  /* function to return counter number
  necessary to separate functions so that increment is only done when necessary, while making n available outside of this function */
  this.counter = function() {
    return n;
  }

  $(function() {
    // Setup the timer
    $countdown = $('#sess-countdown');
    //using new countdown class
    Pomodoro.Timer = $.countDown(function() {
      //Updates display every tick
      $countdown.html(this.getFormattedTime());

      if (this.isFinished()) {
        //Changes # number in pomType
        $(".counter").html(Pomodoro.counter());
        audioElement.play(); //Plays bell
        Pomodoro.Timer.stop();
        $('#pomSess').hide();
        $('#pomBreak').fadeIn("slow");
        BreakPom.Timer.start();
        return;
      }
    }, sessionSeconds);
    Pomodoro.Timer.stop(); //necessary to prevent autostart
  });

  //Used to refresh milliseconds and Timer countdown parameter
  this.resetTime = function() {
    $sessNum = parseInt($('.session-num').html());
    sessionMilliseconds = $sessNum * 60 * 1000;
    //must refresh these variables
    $countdown.html($sessNum);
    Pomodoro.Timer.countdown = sessionMilliseconds;
    n = 1;
  };

  //Function to create the circle progress bars
  this.pomCircle = function() {

    var counter = Pomodoro.counter();
    //After 11 sessions, stop
    if (counter < 11) {
      //give each circle div a unique id from the counter
      var pomProgressDiv = '<div id="' + counter + '" class="pomProgressTimer"></div>';
      //append a new .pomProgressTimer div with each session
      $(pomProgressDiv).appendTo('#tomatoes').show('fast');
    } else {
      Pomodoro.Timer.stop();
      BreakPom.Timer.stop();
      $('#stop-countdown').click();
    }
    var pomCurrent = '#' + Pomodoro.counter();
    //Use counter id to control only the the current progress bar
    $(pomCurrent).circleProgress({
      value: 1.0,
      thickness: '25',
      size: 50,
      fill: {
       image: "https://s3.amazonaws.com/showcase.knanthony.com/pomodorotimer/tomato.png",
      },
      emptyFill:"#2f3437",
      animation: {
        duration: sessionMilliseconds,
      },
    });
  };

});

//Hide all the uncessary stuff initially
$('#pomBreak').hide();
$('#tomatoes').hide();
$('#pause-countdown').hide();
$('#stop-countdown').hide();
$('#resume-countdown').hide();

//Start button
$('#start-countdown').on('click', function() {
  $("#timer-lengths").hide("slow");
  $('#tomatoes').show();
  Pomodoro.Timer.start();

  Pomodoro.pomCircle();

  $(this).hide();
  $('#pause-countdown').show();
});

//Pause button only shows after start

$('#pause-countdown').on('click', function() {
  if (Pomodoro.Timer.isActive === true) {
    Pomodoro.Timer.pause();
    var pomCurrent = '#' + Pomodoro.counter();
    var el = $(pomCurrent);
    $(el.circleProgress('widget')).stop();
  } else if (BreakPom.Timer.isActive === true) {
    BreakPom.Timer.pause();
  }

  $(this).hide();
  $('#stop-countdown').show();
  $('#resume-countdown').show();
});

//Stop button only shows after pause

$('#stop-countdown').on('click', function() {
  $('#timer-lengths').show("slow");
  $('#pomSess').show();
  $('#pomBreak').hide();
  Pomodoro.resetTime();
  $(".counter").html(Pomodoro.counter());
  $(".pomProgressTimer").remove();
  $('#tomatoes').hide();
  $(this).hide();
  $('#pause-countdown').hide();
  $('#resume-countdown').hide();
  $('#start-countdown').show();
});

$('#resume-countdown').on('click', function() {
  $("#timer-lengths").hide("slow");
  if ($('#pomBreak').is(":hidden")) {
    Pomodoro.Timer.start();
    var pomCurrent = '#' + Pomodoro.counter();
    var obj = $(pomCurrent).data('circle-progress'),
      progress = obj.lastFrameValue;
    var sessionMilliseconds = Pomodoro.Timer.getTime(); //only within this function

    $(pomCurrent).circleProgress({
      animation: {
        duration: sessionMilliseconds,
      },
      animationStartValue: progress,
    });

  } else if ($('#pomSess').is(":hidden")) {
    BreakPom.Timer.start();
  }

  $('#stop-countdown').hide();
  $('#resume-countdown').hide();
  $('#pause-countdown').show();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/showcase.knanthony.com/pomodorotimer/jQuery-Timer-2.js"></script>
<script src="https://s3.amazonaws.com/showcase.knanthony.com/pomodorotimer/jquery-circle-progress.js"></script>

style.css

body {
  width: 100%;
  height: 100%;
  font-family: 'Oxygen', sans-serif;
  background: #2f3437;
  color: white;
  margin: 0 auto;
}

header,
footer {
  text-align: center;
}

h1 {
  font-family: 'Alfa Slab One', cursive;
  font-size: 3em;
  font-weight: normal;
}

a {
  color: white;
}

.container {
  max-width: 350px;
  width: 100%;
  height: 100%;
  min-height: 500px;
  margin: 50px auto;
  background: tomato;
  position: relative;
}

.l-half,
.r-half {
  width: 40% !important;
  margin: 0 5% 5%!important;
}

.l-half {
  float: left;
}

.r-half {
  float: right;
}


/* Section for choosing break and Pomodoro lengths */

#timer-lengths {
  height: 100%;
}

#break-length,
#session-length {
  text-align: center;
}

.decrease,
.increase {
  border: none;
  background-color: transparent;
  color: white;
  text-align: center;
  font-family: 'Oxygen', sans-serif;
  font-size: 2em;
}

.break-num,
.session-num {
  font-size: 2em;
  text-align: center;
}


/* Timer Display Area */

#timer-display {
  margin: 0 auto;
  clear: both;
}

.pomType {
  text-align: right;
  margin-right: 5%;
  padding-top: 5%;
}

#pomSess button,
#pomBreak button {
  margin: 0 auto;
  background: transparent;
  border: 0;
  text-align: center;
}

#sess-countdown,
#break-countdown {
  font-size: 6em;
  font-family: 'Oxygen', sans-serif;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
}


/* Start, Stop, Resume, and Pause Buttons */

#timer-buttons {
  width: 100%;
}

#timer-buttons h2 {
  font-size: 2em;
}

#timer-buttons button {
  border: none;
  padding: none;
  display: block;
  width: 90%;
  margin: 0 auto 5%;
  background-color: rgba(204, 79, 57, 0.5);
  color: white;
  font-family: 'Oxygen', sans-serif;
}

#timer-buttons button:hover {
  background-color: rgba(204, 79, 57, 1);
}


/* Tomato Counter Area */

#tomatoes {
  display: block;
  clear: both;
  width: 100%;
  height: 100%;
  min-height: 150px;
  background: #2f3437;
}

.pomProgressTimer {
  display: inline-block;
  padding-left: 4.5%;
  padding-top: 5%;
  text-align: left;
}