Simple Pomodoro / Tomato Timer Clock with jQuery

File Size: 5.47 KB
Views Total: 2858
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Pomodoro / Tomato Timer Clock with jQuery

A simple jQuery timer app using the Pomodoro Technique™ which allows the visitor to start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.

How to use it:

1. Load the needed jQuery JavaScript library and the app.js script in the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/app.js"></script>

2. Build the html structure for the Pomodoro clock and timer controls.

<div id="clock">
  <h2>Controls</h2>
  <button id="start" type="button">
    Start
  </button>
  <button id="resume" type="button">
    Resume
  </button>
  <button id="stop" type="button" >
    Pause
  </button>
  <button id="reset" type="button">
    Reset
  </button>
</div>

<div id="clock">
  <h2>Session</h2>
  <h3 id="time">25</h3>
</div>

3. Apply your own CSS styles to the Pomodoro clock.

button {
  ...
}

#clock {
  ...
}

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