Responsive and Mobile-First jQuery Pomodoro Timer Plugin

File Size: 428KB
Views Total: 2413
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive and Mobile-First jQuery Pomodoro Timer Plugin

Pomodoro is a jQuery timer plugin designed for personal time management app based on Pomodoro Technique and jQuery Mobile.

Basic Usage:

1. Load the jQuery javascript library and jQuery Mobile's script and stylesheet files in your document.

<link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.3.2.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.3.2.js"></script>

2. Load the jQuery pomodoro plugin after jQuery library.

<script type="text/javascript" src="src/pomodoro.js"></script>

3. Markup html structure for the pomodoro timer.

<!DOCTYPE html>
<html class="ui-mobile">
<head>
...
</head>
<body>
<div id="root" data-role="page">
<div id="header" data-role="header">
<h1>Pomodoro Timer</h1>
</div>
<div id="main" data-role="content">
<div id="workContent" data-role="content">
<h2>Work time:</h2>
<div class="ui-grid-a" id="workTimer"></div>
</div>
<div id="breakContent" data-role="content">
<h2>Break time:</h2>
<div class="ui-grid-a" id="breakTimer"></div>
</div>
<button id="start" value="Start"></button>
</div>
</div>
</body>
</html>

Change log:

2014-01-07

  • added different noises for when break time and work time are up

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