SOURCE

var app = new Vue({
  el: '#main',
  data: {
    breakLength: 5,
    sessionLength: 8,
    sessionName: 'Session',
    fillHeight: '0%',
    runTimer: null,
    timeLeft: 8,
    fillColor: '#333',
    midTime: 0
  },
  methods: {
    breakLengthChange: function(num) {
      if (this.runTimer) return;
      if (! (num < 0 && this.breakLength <= 1)) {
        this.breakLength = this.breakLength + num;
      }
    },
    sessionLengthChange: function(num) {
      if (this.runTimer) return;
      if (! (num < 0 && this.sessionLength <= 1)) {
        this.sessionLength = this.sessionLength + num;
        this.timeLeft = this.sessionLength;
        this.midTime = 0;
      }
    },
    toggleTimer: function() {
      if (!this.runTimer) {
        this.midTime = this.midTime || this.sessionLength * 60;
        this.timeLeft = secondsToHms(this.midTime);
        updateTimer();
        this.runTimer = setInterval('updateTimer()', 1000)
      } else {
        clearInterval(this.runTimer);
        this.runTimer = null;
      }
    },
  }
})

function secondsToHms(d) {
  d = Number(d);
  var h = Math.floor(d / 3600);
  var m = Math.floor(d % 3600 / 60);
  var s = Math.floor(d % 3600 % 60);
  return ((h > 0 ? h + ":" + (m < 10 ? "0": "") : "") + m + ":" + (s < 10 ? "0": "") + s);
}

function updateTimer() {
  app.midTime--;
  if (app.sessionName === 'Break') {
    app.fillHeight = ((app.breakLength * 60 - app.midTime) / (app.breakLength * 60)) * 100 + '%';
  } else {
    app.fillColor = '#99CC00';
    app.fillHeight = ((app.sessionLength * 60 - app.midTime) / (app.sessionLength * 60)) * 100 + '%';
  }

  app.timeLeft = secondsToHms(app.midTime);
  if (app.midTime <= 0 && app.sessionName === 'Session') {
    app.midTime = app.breakLength * 60;
    app.fillColor = '#ff0000';
    app.sessionName = 'Break';
  } else if (app.sessionName === 'Break' && app.midTime <= 0) {
    clearInterval(app.runTimer);
    app.runTimer = null;
    app.fillHeight = '0%';
    app.fillColor = '#99CC00';
    app.sessionName = 'Session';
    app.timeLeft = app.sessionLength;
  }
}

<h1>
  FreeCodeCamp
</h1>
<div id='main'>
  <div id='header_part'>
    <div class='session'>
      <div class='breakCtrl'>
        <p>
          break length
        </p>
        <button class='minus' @click='breakLengthChange(-1)'>
          -
        </button>
        <span class='time'>
          {{breakLength}}
        </span>
        <button class='plus' @click='breakLengthChange(1)'>
          +
        </button>
      </div>
      <div class='sessionCtrl'>
        <p>
          session length
        </p>
        <button class='minus' @click='sessionLengthChange(-1)'>
          -
        </button>
        <span class='time'>
          {{sessionLength}}
        </span>
        <button class='plus' @click='sessionLengthChange(1)'>
          +
        </button>
      </div>
    </div>
  </div>
  <div id='section_part' @click='toggleTimer'>
    <div class='timer'>
      <p class="title">
        {{sessionName}}
      </p>
      <p>
        {{timeLeft}}
      </p>
      <span class='fill' :style="{height:fillHeight,backgroundColor:fillColor}">
      </span>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300);
// colors
$green: #99CC00;
$black: #333333;
$white: #fff;
// variables
$font: Open Sans,
Arial;
html,
body,
main {
  height: 100%;
  overflow: hidden;
  background-color: $black;
}

* {
  margin: 0;
  font-family: Open Sans, Arial;
}

h1 {
  display: block;
  background-color: $black;
  margin: 0 auto;
  color: white;
  text-align: center;
  font-family: 'Pacifico';
  font-size: 5em;
}

#header_part {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  color: #fff;
  text-transform: uppercase;
  padding: 20px;
}

#header_part .session {
  font-size: .8em;
  display: flex;
}

#header_part .session .breakCtrl,
#header_part .session .sessionCtrl {
  display: inline;
  padding-left: 30px;
  padding-right: 30px;
}

#header_part .session .minus,
#header_part .session .plus {
  background-color: #333333;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 2em;
  outline: none;
}

#header_part .session .time {
  font-size: 2.5em;
  padding-left: 10px;
  padding-right: 10px;
}

#section_part {
  background-color: #333333;
  height: 100%;
  color: #fff;
}

#section_part .timer {
  margin: 0 auto;
  text-align: center;
  width: 300px;
  height: 300px;
  font-size: 4em;
  border: 2px solid #99CC00;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 20;
  overflow: hidden;
}

#section_part .title {
  text-align: center;
  line-height: 180px;
  font-size: .8em;
}

#section_part .fill {
  content: '';
  position: absolute;
  background: #99CC00;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

#section_part .timer:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  z-index: 2;
  border: 4px solid #333333;
}