Small Pomodoro Productivity Timer with jQuery

A simple, jQuery based timer web application with alarm sound effects that follow the familiar Pomodoro time management technique.

Key features:

• A single page application featuring a fully functional pomodoro timer.
• Custom break and work duration.

How to use it:

1. Load jQuery library and other required resources in the html document.

<link rel="stylesheet" href="css/style.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/main.min.js"></script>

2. The html structure to build a Pomodoro timer.

<section class="container content-center">
  <div class="half-width-m breaks-container">
    <div id="break-container" class="half-width-m break-container">
      <p>Break Duration</p>
      <div>
        <span class="subtract-time">-</span>
        <span id="break-time">5</span>
        <span class="add-time">+</span>
      </div>
    </div><!--remove space
    --><div id="work-container" class="half-width-m work-container">
      <p>Work Duration</p>
      <div>
        <span class="subtract-time">-</span>
        <span id="work-time">25</span>
        <span class="add-time">+</span>
      </div>
    </div>
  </div>
</section>

<section class="content-center">
  <div class="timer-container">
    <div class="timer-inner-circle">
      <h2 id="timer-title">Pomodoro Session</h2>
      <div id="timer-clock"  class="timer-clock">25</div>
      <button id="engage-button" class="start">Start</button>
      <button id="reset-button" class="reset">Reset</button>
      <!-- absolute -->
      <div class="timer-filler timer-filler-work">
        <div class="gradient-animation"></div>
      </div>
    </div>
  </div>
</section>

<audio id="timer-bell" src="workbell.mp3" type="audio/mpeg">
</audio>

Change log:

2016-02-11

• Fix position of timer for mobile browsers

---

This awesome jQuery plugin is developed by jaydurant. For more Advanced Usages, please check the demo page or visit the official website.