Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                #pomodoro(ng-app='Pomodoro' ng-controller='PomodoroCtrl as vm' ng-cloak)
  h1
    span.fcc FreeCodeCamp
    img(src='https://s-media-cache-ak0.pinimg.com/originals/4f/0f/54/4f0f5497d863e27797a93fbaa3170bea.png')
    span.pom.mdl-color-text--red-800 Pomodoro
  .buttons(ng-class="{'disabled':vm.started}")
    .break-length
      p Break time 
      .input-group.inp
        button.btn.btn-default(ng-click='vm.spinDownBreak()')
          i.fa.fa-minus
        input.form-control(type='text', ng-model='vm.breakTime' ng-change='vm.breakTimeChanged()')
        button.btn.btn-default(ng-click='vm.spinUpBreak()')
          i.fa.fa-plus
    .work-length
      p Work time
      .input-group.inp
        button.btn.btn-default(ng-click='vm.spinDownWork()')
          i.fa.fa-minus
        input.form-control(type='text', ng-model='vm.workTime' ng-change='vm.workTimeChanged()')
        button.btn.btn-default(ng-click='vm.spinUpWork()')
          i.fa.fa-plus
  .pomodoro-wrap
    p {{ vm.activity }}
    i.fa.fa-stop.pomodoro-stop(ng-click='vm.stopTimer()') &nbsp;
    i.fa.fa-play.pomodoro-play(ng-click='vm.toggleTimer()')
    div {{ vm.currentTime | PomodoroFilter}}
    span.fill
  
    
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Oleo+Script:400,700|Pacifico|Roboto:400,100,300,500,700,900')

body
  height 300px
  font-family Roboto, sans-serif
  background #03a9f4
span.fill
  position absolute
  height 100%
  width 0%
  background #c62828
  opacity .1
  top 0
  left 0
  z-index -999
h1
  text-align center
  color white
  padding 0
  margin 0
  img
    width 70px
    height 70px
    position relative
    top 10px
  span.pom
    font-family 'Oleo Script', cursive
    font-weight bold
    font-size 40px
    text-transform uppercase
    text-decoration underline
    color #c62828
  span.fcc
    font-family Pacifico
    display block
#pomodoro
  text-align center
  .buttons
    margin 0 auto
    color white
    &.disabled *
      color #5E7580
      cursor default
      user-select none
    p
      font-family Roboto
      font-weight 300
      text-transform uppercase
      font-size 26px
      margin 60px 0 0
      padding 0
    .inp
      width 220px
      button, input
        background none
        border none
        outline none
        display inline-block
      button
        width 40px
        font-size 30px
      input
        width 50px
        text-align center
        font-size 40px
        font-weight 400
    .break-length, .work-length
      width 220px
      display inline-block
  .pomodoro-wrap
    position relative
    margin 0 auto
    width 400px
    height 400px
    margin-top 60px
    border-radius 50%
    border 1px solid #c62828
    transition all 0.5s
    overflow hidden
    p
      font-size 55px
      margin-bottom 0
      margin-top 90px
      font-family 'Oleo Script', cursive
      text-transform uppercase
    i
      font-size 55px
      cursor pointer
      transition all 0.3s
      &:hover, &:focus, &.active {
        color #c62828
      }
    div
      font-size 60px
      margin-top 10px
              
            
!

JS

              
                var app = angular.module('Pomodoro', []);
app.controller('PomodoroCtrl', PomodoroCtrl);

PomodoroCtrl.$inject = ['$interval'];

function PomodoroCtrl($interval) {
  var vm = this;
  
  vm.breakTime = 5;
  vm.workTime = 25;
  vm.started = false;
  vm.currentTime = vm.workTime * 60;
  vm.tomatoFill = 0;
  vm.activity = "Start";
  
  var breakNow = false;
  var workNow = true;
  var run = false;
  
  var audio = new Audio('https://raw.githubusercontent.com/KarafiziArtur/random-quote-generator/master/Nexus_5-notification_sound-1656850.mp3');
  
  // PLAY/PAUSE button
  vm.toggleTimer = function() {
    if (!run) {
      if (breakNow) {
        vm.activity = "Breaking";
        vm.fillTemp = vm.currentTime;
      } else if (workNow){
        vm.activity = "Working";
        vm.fillTemp = vm.currentTime;
      }
      $('.pomodoro-wrap p').addClass('pulse animated infinity');
      $('.pomodoro-wrap i.pomodoro-play').removeClass('fa-play').addClass('fa-pause active');
      run = $interval(updateWork, 1000);
      vm.started = true;
    } else {
      vm.pauseTimer();
      $('.pomodoro-wrap p').removeClass('pulse animated');
    }
  }

  // STOP button  
  vm.stopTimer = function () {
    vm.pauseTimer();
    vm.currentTime = vm.workTime * 60;
    breakNow = false;
    workNow = true;
    vm.started = false;
    vm.tomatoFill = '0%';
    $('.fill').css('width', vm.tomatoFill);
  }
  
  // Uses in toggle button
  vm.pauseTimer = function () {
    vm.activity = "Start";
    $('.pomodoro-wrap i.pomodoro-play').removeClass('fa-pause active').addClass('fa-play');
    $interval.cancel(run);
    run = false;
  }
  
  // Update of the timer
  var updateWork = function() {
    if (vm.currentTime < 1) {
      if (!breakNow && workNow) {
        vm.currentTime = vm.breakTime * 60;
        vm.activity = "Breaking";
        workNow = false;
        breakNow = true;
      } else if (breakNow && !workNow) {
        vm.activity = "Working";
        vm.currentTime = vm.workTime * 60;
        workNow = true;
        breakNow = false;
      }
			audio.play();
    } else {      
      vm.currentTime--;
      TomatoFill();
    }
  }
  
  // Filling background
  function TomatoFill() {
    if (!breakNow && workNow) {
        vm.tomatoFill = Math.floor(((vm.workTime * 60 - vm.currentTime) / (vm.workTime * 60) * 100)) + '%';
      } else if (breakNow && !workNow) {
        vm.tomatoFill = (100 - Math.floor((vm.breakTime * 60 - vm.currentTime) / (vm.breakTime * 60) * 100)) + '%';
      }
      $('.fill').css('width', vm.tomatoFill);
  }
  
  // On manual change configurable timers
  vm.breakTimeChanged = function () {
    if (vm.breakTime <= 1) {
      vm.breakTime = 1;
    } 
    if (vm.breakTime >= 60) {
      vm.breakTime = 60;
    }
  }
  
  vm.workTimeChanged = function () {
    if (vm.workTime <= 1) {
      vm.workTime = 1;
      vm.currentTime = vm.workTime * 60;
    } 
    if (vm.workTime >= 60) {
      vm.workTime = 60;
      vm.currentTime = vm.workTime * 60;
    } else {
      vm.currentTime = vm.workTime * 60;
    }
  }
  
  // SPINNERS
  
  vm.spinDownBreak = function () {
    if (!vm.started) {
      if (vm.breakTime <= 1) {
        vm.breakTime = 1;
      } else {
        vm.breakTime--;
      }
    }
  }
  
  vm.spinUpBreak = function () {
    if (!vm.started) {
      if (vm.breakTime >= 60) {
        vm.breakTime = 60;
      } else {
        vm.breakTime++;
      }
    }
  }
  
  vm.spinDownWork = function () {
    if (!vm.started) {
      if (vm.workTime <= 1) {
        vm.workTime = 1;
      } else {
        vm.workTime--;
      }
      vm.currentTime = vm.workTime * 60;
    }
  }
  
  vm.spinUpWork = function () {
    if (!vm.started) {
      if (vm.workTime >= 60) {
        vm.workTime = 60;
      } else {
        vm.workTime++;
      }
      vm.currentTime = vm.workTime * 60;
    }
  }
  
}

// Filter for displaying time
app.filter('PomodoroFilter', PomodoroFilter);
function PomodoroFilter () {
  return function(input) {
    return ('00' + Math.floor((input / 60))).slice(-2) + ' : ' + ('00' + Math.floor((input % 60))).slice(-2);
  }
}
              
            
!
999px

Console