cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <!-- 
<div class='container class'>
  <ul>
    <h3>Current Time: <span id="currentTime"></span></h3>
    <li class="btn btn-outline blue buttonStart">Start Timer</li>
    <li class="btn btn-outline purple buttonPause">Pause Timer</li>
    <li class="btn btn-outline red  buttonStop">Stop Timer</li>
    <li class="btn btn-outline green buttonRestart">Restart Timer</li>
  </ul>  
</div>
-->
<div class="main">
  <header id="screen-start" class=" center px3 py4">
    <h1 class="h1 caps mt4 mb0 regular">Pomodoro</h1>
    <p class="h3">Let's get working</p>
    <button href="#" class="ssButtonStart h3 btn btn-primary bg-red mb4 caps">Start</button>
  </header>
  
  
</div>

<header id="screen-options" class=" hidden center px3 py4">
  <div class="container">
    <div class="clearfix mxn2 mx-auto ">
      <div class="col-8 px2 mx-auto ">
        <div class="col-12">
          <div class="col col-6 ">
            <h3 class="h3 caps regular">Work Time</h3>
            <input class="soInputWork time-input" type="number" value="25" />

          </div>

          <div class="col col-6  center">
            <h3 class="h3 caps regular">Play Time</h3>
            <input class="soInputPlay time-input" type="number" value="5"/>
          </div>
        </div>
        
        <div class="col-12 ">
          <button href="#" class="soButtonNext h3 btn btn-primary bg-blue mt4 caps">Next</button>
        </div>
        
      </div>
    </div>
  </div>
</header>

<header id="screen-timer" class=" hidden center px3 py4">
  <div class="container ">
    <div class="clearfix mx-auto">
      <div class="col-12 mx-auto ">
        <h3 class="stTextType caps regular">WORK</h3>
      </div>
      <div class="col-12 mx-auto ">
        <h1 class="stTextTime h0 caps mt1 mb9 regular">00:00</h1>
      </div>
    </div>
    <div class="clearfix mx-auto">
      <div class="col-12 mx-auto ">
        
          <div class="col col-8 px1">
            <button href="#" class="stButtonPlayPause h3 btn btn-primary bg-green mb1 caps full-width">
              Play
            </button>
          </div>
          <div class="col col-4 px1">
            <button href="#" class="stButtonSkip h5 btn btn-outline blue mb1  full-width">
              Skip
            </button>
          </div>
          <div class="col col-12 px1">
            <button href="#" class="stButtonOptions h5 btn btn-outline blue full-width">
              Options
            </button>
          </div>
        
        
        <!-- <div class="col-12 ">
          <button href="#" class="siButtonMain h3 btn btn-primary bg-blue mt4 caps">Main</button>
        </div> -->
        
      </div>
    </div>
  </div>
</header>
            
          
!
            
              .hidden
  display: none;

.time-input
  max-width: 5em;

.full-width
  width: 100%
  
.btn
  text-align: center;
  
.h0
  font-size: 4em;
  
.mb9
  margin-bottom: 10rem;
  
.container
  min-width: 250px;
  max-width: 480px;

body
  text-align: center;




            
          
!
            
              /*jshint browser: true, devel: true, jquery: true */
/*globals Timer*/

// Set min width on buttons
// Make a sound on completion

'use strict';
var Pomodoro = new Timer();
Pomodoro.settings = {};
Pomodoro.currentMode = '';
Pomodoro.playNext = function() {
  console.log('Pomodoro NEXT');
  
  this.stopTimer();
  if (this.pattern.length < 1) this.setPattern(4); 
  var type = this.pattern.shift();
  var time = this.settings[type];

  $stTextType.text(type);
  this.currentMode = type;
  this.startTimer(time * 60);

  this.RAFID = requestAnimationFrame(updateTimer);
  this.on('end', function () {
    
    console.log('Pomodoro ENDED');
    bell.play();
    this.playNext();
  });
};
Pomodoro.startTimer = function (time) {
  
  console.log('Pomodoro START');
  this.start(time);
  $stButtonPlayPause.setAction('pause');
  timer.RAFID = requestAnimationFrame(updateTimer);
};
Pomodoro.pauseTimer = function() {
  
  console.log('Pomodoro PAUSED');
  this.pause();
  $stButtonPlayPause.setAction('play');
  cancelAnimationFrame(this.RAFID);
};
Pomodoro.stopTimer = function() {
  
  console.log('Pomodoro STOPPED');
  this.off();
  this.stop();
  $stButtonPlayPause.setAction('play');
  cancelAnimationFrame(this.RAFID);
};
Pomodoro.skipTimer = function () {
  
  console.log('Pomodoro SKIPPING');
  this.stop();
  this.playNext();
};
Pomodoro.getDurationSec = function() {
  return Math.floor(this.getDuration() /1000) %60;
};
Pomodoro.getDurationMin = function() {
  return Math.floor(this.getDuration() /60000);
};
Pomodoro.padded = function (type, time) {
  var time = time || Math.floor(this.getDuration() /1000);
  switch (type) {
    case 'ss':
      return (time % 60 < 10) ? '0'+time%60: time%60;
    case 'mm':
      time = Math.floor(time/60);
      return (time < 10) ? '0'+time: time;
  }
};
Pomodoro.setPattern = function (cycles) {
  cycles = cycles || 4;
  this.pattern = [];
  var i;

  for (i = cycles*2 - 1; i >= 0; i--) {
    if (i % 2 === 0) {

      if (i % 8 !== 0) this.pattern.push('play');
      else this.pattern.push('longPlay');

    } else {
      this.pattern.push('work');
    }
  }
};

var updateTimer = function () {
  var timeText = timer.padded('mm') + ':' + timer.padded('ss');
  var timeLast = timer._timeLast || '';

  if (timeLast !== timeText) {
    timer._timeLast = timeText;
    $stTextTime.text(timeText);
  }
  
  timer.RAFID = requestAnimationFrame(updateTimer);
};

var timer = Object.create(Pomodoro);

var bell = new Audio('http://mythril.co/sfx/children-yeah-long-and-laugh.mp3');

// Buttons that handle navigation
var $ssButtonStart = $('.ssButtonStart');
var $soButtonNext = $('.soButtonNext');
var $stButtonOptions = $('.stButtonOptions');

var $soInputWork = $('.soInputWork');
var $soInputPlay = $('.soInputPlay');

var $stTextType = $('.stTextType');
var $stTextTime = $('.stTextTime');
var $stButtonPlayPause = $('.stButtonPlayPause');
var $stButtonSkip = $('.stButtonSkip');

// Move from start to options
$ssButtonStart.on('click', function () {
  $('#screen-start').toggle(0);
  $('#screen-options').toggle(0);
});

// Move from options to timer
$soButtonNext.on('click', function () {

  // Set timer settings
  timer.settings.work = parseInt($soInputWork.val(), 10);
  timer.settings.play = parseInt($soInputPlay.val(), 10);
  timer.settings.longPlay = timer.settings.play *3;
  timer.setPattern(4);
  
  $stTextType.text(timer.pattern[0]);
  $stTextTime.text(timer.padded('ss', timer.settings.work) + ':00');
  
  $('#screen-options').toggle(0);
  $('#screen-timer').toggle(0);
});

// Move from timer to options
$stButtonOptions.on('click', function () {
  timer.stopTimer();

  $('#screen-timer').toggle(0);
  $('#screen-options').toggle(0);
});

$stButtonPlayPause.setAction = function (action) {
  if (action === 'play') {
    $stButtonPlayPause.removeClass('bg-yellow');
    $stButtonPlayPause.addClass('bg-green');
    $stButtonPlayPause.text('play');
  } else if (action === 'pause') {
    $stButtonPlayPause.removeClass('bg-green');
    $stButtonPlayPause.addClass('bg-yellow');
    $stButtonPlayPause.text('pause');
  }
};
$stButtonPlayPause.on('click', function () {
  var status = timer.getStatus(); // 'initialized', 'started', 'paused', 'stopped'

  if (status === 'started') timer.pauseTimer();
  else if (status === 'paused') timer.startTimer();
  else timer.playNext();
  
});

$stButtonSkip.on('click', function () { timer.skipTimer(); });








            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console