This time I will share jQuery Plugin and tutorial about Small Pomodoro Productivity Timer with jQuery, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="css/style.min.css"> |
2 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
3 |
<script src="js/main.min.js"></script> |
2. The html structure to build a Pomodoro timer.
01 |
<section class="container content-center"> |
02 |
<div class="half-width-m breaks-container"> |
03 |
<div id="break-container" class="half-width-m break-container"> |
06 |
<span class="subtract-time">-</span> |
07 |
<span id="break-time">5</span> |
08 |
<span class="add-time">+</span> |
11 |
<div id="work-container" class="half-width-m work-container"> |
14 |
<span class="subtract-time">-</span> |
15 |
<span id="work-time">25</span> |
16 |
<span class="add-time">+</span> |
22 |
<section class="content-center"> |
23 |
<div class="timer-container"> |
24 |
<div class="timer-inner-circle"> |
25 |
<h2 id="timer-title">Pomodoro Session</h2> |
26 |
<div id="timer-clock" class="timer-clock">25</div> |
27 |
<button id="engage-button" class="start">Start</button> |
28 |
<button id="reset-button" class="reset">Reset</button> |
30 |
<div class="timer-filler timer-filler-work"> |
31 |
<div class="gradient-animation"></div> |
37 |
<audio id="timer-bell" src="workbell.mp3" type="audio/mpeg"> |
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.
