Small Pomodoro Productivity Timer with jQuery
File Size: | 413 KB |
---|---|
Views Total: | 1816 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.