Pomodoro

index.html

<div class='container shadow' id="main">
    <div class="row text-center" id="header">
        <h1 >El Pomodoro</h1>
    </div>
    <div class="row">
            <div id="pomodoro-box" class="shadow">
              <div id="timer"><span id='min'>25</span>:<span id='sec'>00</span></div>
        </div>
    </div>
    <div class='row'>
        <div class="col-xs-6">
          <div class="row">
            <h2>Session</h2>
          </div>
          <div class="row">
                <div class="col-xs-2 col-xs-offset-4 incrementor shadow" id='sub-session'>-</div>
                <div class="col-xs-2 length text-center" id="session-length">25</div>
              <div class="col-xs-2 incrementor shadow" id='add-session'>+</div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="row"> 
          <h2>Break</h2>
          </div>
          <div class="row">
                            <div class="col-xs-2 col-xs-offset-4 incrementor shadow" id="sub-break">-</div>
                <div class="col-xs-2 length text-center" id="break-length">5</div>
                <div class="col-xs-2 incrementor shadow" id="add-break">+</div>
        </div>
    </div>
    </div>

pomodoro.markdown

Pomodoro

A Pen by Chris Dodds on CodePen.

License.

script.js

$(document).ready(function () {
  // vars
  var minutes = 25
  var seconds = 60
  var breakMinutes = 5
  var breakSeconds = 60
  var p1 = 1
  var timer

  // animate button clicks
  $('.incrementor').click(function () {
    $(this).effect('highlight', 'fast')
  })
  // add & sub main timer minutes
  $('#add-session').click(function () {
    if (minutes < 60) {
      minutes += 1
      p1 = 1
      seconds = 60
      $('#session-length').text(minutes)
      $('span#min').text(minutes)
    }
  })

  $('#sub-session').click(function () {
    if (minutes > 5) {
      minutes -= 1
      p1 = 1
      seconds = 60
      $('#session-length').text(minutes)
      $('span#min').text(minutes)
    }
  })
  // add & sub break timer minutes
  $('#add-break').click(function () {
    if (breakMinutes < 15) {
      breakMinutes += 1
      p2 = 1
      breakSeconds = 60
      $('#break-length').text(breakMinutes)
    }
  })

  $('#sub-break').click(function () {
    if (breakMinutes > 5) {
      breakMinutes -= 1
      p2 = 1
      breakSeconds = 60
      $('#break-length').text(breakMinutes)
    }
  })
  // timer function
  $(function () {
    function startTimer() {
      // local vars
      var growRate = (60 * minutes) / 100
      var breakRate = (60 * breakMinutes) / 100
      clearInterval(timer)
      // main loop
      timer = window.setInterval(function () {
        // timer done? start break timer?
        if (minutes == 0 && seconds == 0) {
          beep();
          $('div.container').effect('highlight', 'slow');
          $("#pomodoro-box").append("<div class='break-notice'>BREAK</div>");
          minutes = breakMinutes;
          seconds = breakSeconds;
          breakTimer();
        }

        // subtract a minute at rollover
        if (seconds == 60) {
          minutes -= 1
          $('span#min').text(minutes)
        }

        // second countdown
        if (seconds > 0) {
          seconds -= 1
          $('span#sec').text(seconds)
          growFill(growRate);
          prettyZeros(seconds)
        }

        // time to start 1 minute countdown?
        if (minutes > 0 && seconds == 0) {
          seconds = 60
        }
        // add leading zeros to sub 10 nums
        function prettyZeros(val) {
          if (val < 10) {
            $('span#sec').text('0' + val)
          }
        }
        // increase fill
        function growFill(rate) {
          if (p1 < 100) {
            p1 += rate
            $('#pomodoro-box').css('background', 'radial-gradient(ellipse at center, #e55934 ' + p1 + '%, #9bc53d 5%) ')
          }
        }
        function emptyfill(rate) {
          if (p1 > 0) {
            p1 -= rate
            $('#pomodoro-box').css('background', 'radial-gradient(ellipse at center, #e55934 ' + p1 + '%, #9bc53d 5%) ')
          }
        }

        function breakTimer() {
          if (breakSeconds == 60) {
            breakMinutes -= 1
            $('span#min').text(breakMinutes)
          }

          if (breakSeconds > 0) {
            breakSeconds -= 1
            $('span#sec').text(breakSeconds)
            emptyFill(breakRate);
            prettyZeros(seconds)
          }

        }
      }, 1000)
    }
    // timer stop 
    function stopTimer() {
      clearInterval(timer)
    }
    // create alarm noise
    function beep() {
      var snd = new Audio('data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=')

      snd.play()
    }
    // turn timer on and off with clicks
    $('#pomodoro-box').on('click', function () {
      if ($('#pomodoro-box').hasClass('off')) {
        stopTimer()
        $('#pomodoro-box').toggleClass('off')
        $('#pomodoro-box').effect('highlight', 'fast')
      } else {
        $('#pomodoro-box').toggleClass('off')
        startTimer()
        $('#pomodoro-box').effect('highlight', 'fast')
      }
    })
  })
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

style.css

body {
  background-color: #333333;
  color: #000;
  font-family: 'Roboto Slab', serif;
}

.container {
  margin-top: 40px;
  min-width: 760px;
  background-color: #9bc53d;
  padding-bottom: 100px;
}

.shadow {
  -webkit-box-shadow: 10px 10px 30px -3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 30px -3px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 30px -3px rgba(0, 0, 0, 0.75);
}

h1 {
  font-size: 5em;
  font-weight: bold;
}

h2 {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  padding-left: 30px;
}

hr {
  border: 2px solid #000;
  border-radius: 2px;
}

#header {
  margin: 30px;
}

#pomodoro-box {
  height: 350px;
  max-width: 400px;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 120px;
  border: 3px solid black;
  border-radius: 50%;
  text-align: center;
  background: -moz-radial-gradient(center, ellipse cover, #e55934 1%, #9bc53d 25%);
  /* FF3.6+ */
  background: -ms-radial-gradient(center, ellipse cover, #e55934 1%, #9bc53d 25%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, #e55934 1%, #9bc53d 1%);
}

.break-notice {
  font-size: 3em;
  font-weight: bold;
}

#session-length {
  height: 100px;
  text-align: center;
}

#break-length {
  height: 100px;
  text-align: center;
}

.incrementor {
  font-size: 3em;
  max-width: 65px;
  border: 3px solid black;
  border-radius: 50%;
  text-align: center;
}

.length-box {
  margin-left: auto;
  margin-right: auto;
}

.length {
  font-size: 3.5em;
}

#timer {
  text-align: center;
  margin-top: 3px;
  font-size: 3.5em;
  font-weight: bold;
}

#footer {
  margin: 20px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />