Simple jQuery & Bootstrap Based Pomodoro Timer App - Pomodoro-timer

File Size: 8.41 KB
Views Total: 6480
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery & Bootstrap Based Pomodoro Timer App - Pomodoro-timer

A simple yet multi-functional online Pomodoro (Tomato) technique timer with sound effects built using jQuery and Twitter Bootstrap framework. The Pomodoro Timer is a simple and effective time management method. The technique uses a timer to break down work into intervals of 50 minutes in length, separated by short and long breaks.

What is Pomodoro Timer?

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s.The technique uses a timer to break down work into intervals traditionally 25 minutes in length, separated by short breaks. These intervals are known as "pomodoros", the plural in English of the Italian word pomodoro meaning "tomato".The method is based on the idea that frequent breaks can improve mental agility.(The timer length can vary as per a individuals choice.)

How to use it:

1. To get started, you first need to load jQuery library and Twitter's Bootstrap framework in your web app.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>

2. Load the Pomodoro-timer's JS and CSS files after jQuery library.

<link href="css/pomodoro-timer.css" rel="stylesheet">
<script src="js/pomodoro-timer.js"></script>

3. Build the markup structure for the Pomodoro Timer.

<div class="container">
  <div class="page-header">
    <h1 class="text-center">Pomodoro Timer</h1>
    <h2 class="text-center">
      <span>
        <button id="pomodoroButton" class="btn btn-default" type="submit" onclick="onPomodoroTimer()" >Pomodoro</button>
        <button id="shortButton" class="btn btn-default" type="submit" onclick="onShortTimer()">Short Break</button>
        <button id="longButton" class="btn btn-default" type="submit" onclick="onLongTimer()">Long Break</button>
      </span>
    </h2>
  </div>
  <div class="panel panel-default">
    <div class="panel-body text-center">
      <div class="timer-time timer-container">
        <div class="timer-time-set timer-box" id="currentTime">
          <span id="hoursValue">00</span><span>:</span><span id="minutesValue">00</span><span>:</span><span id="secondsValue">00</span>
        </div>
        <div class="timer-time-set timer-box" id="nextTime">
          <span id="hoursNext">00</span><span>:</span><span id="minutesNext">00</span><span>:</span><span id="secondsNext">00</span>
        </div>
      </div>
      <div>
        <button id="restartButton" class="btn btn-warning btn-lg" type="submit" onclick="onResetTimer()">
          <span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span> Reset
        </button>
        <button id="startButton" class="btn btn-primary btn-lg" type="submit" onclick="onStartTimer()">
          <span class="glyphicon glyphicon-play" aria-hidden="true"></span> Start
        </button>
        <button id="stopButton" class="btn btn-danger btn-lg" type="submit" onclick="onStopTimer()">
          <span class="glyphicon glyphicon-stop" aria-hidden="true"></span> Stop
        </button>
      </div>
    </div>

  </div>

</div>

4. There are five basic steps to implementing the technique:

  • Decide on the task to be done
  • Set the pomodoro timer to n minutes (traditionally 50)
  • Work on the task until the timer rings; record with an x
  • Take a short break (3–5 minutes)
  • After four pomodoros, take a longer break (15–30 minutes)

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