Jean Timer

index.html

html
  head
    title Jean's Timer | Pomodoro Clock

  body
    link(href='https://fonts.googleapis.com/css?family=Slabo+27px|Amatic+SC|Oswald', rel='stylesheet', type='text/css')
    h1 Jean Timer
    .settings
      .settings-break
        h2 Break Length:
        .dec
          i.fa.fa-minus
        .time 5
        .inc
          i.fa.fa-plus
      .settings-session
        h2 Session Length:
        .dec
          i.fa.fa-minus
        .time 25
        .inc
          i.fa.fa-plus
    p.timeRemaining 25:00
    #toggle-clock Start
    #timer
      canvas#myChart(height='50px', width='1px')
    hr.intro-divider
    p Share this page with the world:
    .col-sm-12
      ul.list-inline.intro-social-buttons
        li
          a.twitter-share-button(href='https://twitter.com/share', {count}='', data-url='http://codepen.io/Jean13/full/qbOvEe/', data-text='Daily Motivational Quotes!', data-hashtags='motivational') Tweet
          script.
            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
        li
          a(href='http://www.facebook.com/sharer.php?u=http://codepen.io/Jean13/full/qbOvEe/', target='_blank')
            img.img-responsive(src='http://www.giftingnest.com/skin/frontend/shoptimize/default/images/facebook-share.png')
        li
          a(href='http://www.linkedin.com/shareArticle?mini=true&url=http://codepen.io/Jean13/full/qbOvEe/', target='_blank')
            img.img-responsive(src='http://letslunch.com/images/linkedin-small.png')
        li
          a.btn.btn-block.btn-social-icon.btn-reddit(href='http://reddit.com/submit?url=http://codepen.io/Jean13/full/qbOvEe/', role='button')
            span.fa.fa-reddit

Jean Timer.markdown

Jean Timer

A simple Pomodoro timer.

A Pen by Jean on CodePen.

License.

script.js

var clock_enable = false;
var active_mode = 'session';

var lengthValues = {
  break: 5,
  session: 25
}
var timerInterval;

var time = 25 * 60;

var chart = null;
var data = [{
  value: time,
}, {
  value: 25 * 60 - time,
}];

document.body.onload = function() {
  var ctx = document.getElementById("myChart").getContext("2d");

  var options = {
    percentageInnerCutout: 100,
    animation: false,
    segmentShowStroke: false
  }

  addEventListeners();

  chart = new Chart(ctx).Doughnut(data, options);
};

startTimer = function() {
  var toggleButton = document.getElementById("toggle-clock");

  if (!clock_enable) {
    time = lengthValues[active_mode] * 60;
    timerInterval = setInterval(updateTime, 50);
    clock_enable = true;
    toggleButton.innerHTML = "Stop";
  } else {
    time = lengthValues[active_mode] * 60;
    window.clearInterval(timerInterval);
    updateChart();
    clock_enable = false;
    toggleButton.innerHTML = "Start";
    updateLengthValuesDisplay();
  }
};

switchModes = function() {
  if (active_mode === 'session') {
    active_mode = 'break';
  } else if (active_mode === 'break') {
    active_mode = 'session';
  }

  time = lengthValues[active_mode] * 60;
}

updateTime = function() {
  if (!clock_enable) return;

  if (time > 1) time -= 1;
  else {
    switchModes();
  }

  updateChart();
};

updateChart = function() {
  if (active_mode === 'session') {

    chart.segments[0].value = time;
    chart.segments[1].value = lengthValues['session'] * 60 - time;
  } else {

    chart.segments[0].value = lengthValues['break'] * 60 - time;
    chart.segments[1].value = time;
  }

  chart.update();
  var timeString = timeStringFromSeconds(time);
  document.getElementsByClassName('timeRemaining')[0].innerHTML = timeString;
};

addEventListeners = function() {
  var elems = document.getElementsByClassName('dec');
  elems[0].addEventListener("click", lengthClickListener, false);
  elems[1].addEventListener("click", lengthClickListener, false);

  elems = document.getElementsByClassName('inc');
  elems[0].addEventListener("click", lengthClickListener, false);
  elems[1].addEventListener("click", lengthClickListener, false);

  toggle = document.getElementById('toggle-clock');
  toggle.addEventListener("click", startTimer, false);
}

lengthClickListener = function() {

  var timeValueToChange = this.parentNode.className;
  timeValueToChange = timeValueToChange.split('-')[1];

  if (clock_enable) return;

  var incOrDec = this.className;
  if (incOrDec === 'dec') {
    if (lengthValues[timeValueToChange] > 1) {
      lengthValues[timeValueToChange]--;
    } else {
      lengthValues[timeValueToChange] = 1;
    }
  } else {
    lengthValues[timeValueToChange]++;
  }

  updateLengthValuesDisplay();
};

updateLengthValuesDisplay = function() {
  var displays = document.getElementsByClassName("time");
  displays[0].innerHTML = lengthValues['break'];
  displays[1].innerHTML = lengthValues['session'];

  var timeRemaining = document.getElementsByClassName("timeRemaining")[0];
  timeRemaining.innerHTML = timeStringFromSeconds(lengthValues['session'] * 60);
};

timeStringFromSeconds = function(seconds) {

  var s = seconds % 60 < 10 ? '0' + seconds % 60 : seconds % 60;

  return Math.floor(seconds / 60) + ":" + s;
};

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>

style.css

body {
  text-align: center;
  width: 800px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid black;
  border-radius: 5px;
  padding: 2%;
}

h1 {
  font-family: 'Slabo 27px', serif;
  text-align: center;
  font-size: 48px;
}

h2 {
  font-family: 'Oswald';
  font-size: 25px;
}

.time {
  display: inline-block;
  font-size: 2em;
  width: 80px;
}

.settings-session {
  float: right;
}

.settings-break {
  float: left;
}

.inc,
.dec {
  display: inline-block;
  cursor: pointer;
  padding: 13px;
  width: 15px;
}

.timeRemaining {
  position: relative;
  font-weight: bold;
  font-size: 3em;
}

#timer {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

#toggle-clock {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 8px;
  padding: 5px 10px;
  top: 15px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/css-social-buttons/1.1.1/css/zocial.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />