Online Pomodoro Timer App With jQuery - pomodoro-clock.js

The pomodoro-clock.js jQuery plugin lets you create a responsive Pomodoro Timer using the Pomodoro time management technique (25 minutes work and 5 minutes break intervals). You can also adjust the break time and work time by clicking on the plus/minus buttons in the app.

How to use it:

1. Load the required Font Awesome iconic font and the pomodoro-clock.css in the head section of the webpage.

<link rel="stylesheet" href="/path/to/pomodoro-clock.css">
<link rel="stylesheet" href="/path/tofont-awesome.min.css">

2. Create the html for the Pomodoro Timer.

<div id="circleClock" class="circle-clock">
  <div id="clockTime" class="clock-time">
    <h3>
      <span id="minutes">25</span>:
      <span id="seconds">00</span>
    </h3>
  </div>
  <div id="clockStatus" class="status">Click to start!</div>
</div>

3. Create the break/work time setters as these:

<div class="setters">

  <div class="break-setter">
    <p class="breakText">Break time</p>
    <button id="breakPlus">+</button>
    <span id="breakTime" class="break-time">5 min</span>
    <button id="breakMinus">-</button>
  </div>

  <div class="work-setter">
    <p class="workText">Work time</p>
    <button id="workPlus">+</button>
    <span id="workTime" class="work-time">25 min</span>
    <button id="workMinus">-</button>
  </div>

</div>

4. Load the necessary jQuery library and the pomodoro-clock.js script at the bottom of the webpage. Done.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/pomodoro-clock.js"></script>

---

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