Cookie-enabled jQuery Stopwatch Plugin - yourStopwatch

File Size: 8.64 KB
Views Total: 7154
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cookie-enabled jQuery Stopwatch Plugin - yourStopwatch

yourStopwatch is a minimal, themeable, jQuery based stopwatch / timer web app which uses Cookie JavaScript library to store current status and selected theme in local cookies.

How to use it:

1. Include the core stylesheet and a theme CSS of your choice in the document's head section.

<link id="styleSheet0" rel="stylesheet" href="stylesheets/common.css">
<link id="styleSheet1" rel="stylesheet" href="stylesheets/light.css">

2. Create radio buttons that allow the visitor to switch themes.

<span>Theme :</span>
<form>
  Light
  <input type="radio" name="theme" value="light.css">
  Dark
  <input type="radio" name="theme" value="dark.css">
</form>

3. Create an element for the stopwatch.

<div id="timer"></div>
<div id="additionalTime" style="display:none">0</div>

4. Create controls to start / pause / resume / clear the stopwatch.

<button id="startButton">Start</button>
<button id="pauseButton">Pause</button>
<button id="clearButton">Clear</button>

5. Include jQuery, Cookie JS library and the core JavaScript at the bottom of the document. That's it.

<script src="jquery.min.js"></script> 
<script src="js/index.js"></script> 
<script src="js/jsCookie.js"></script>

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