Adding stopwatch-only page and minor changes.

ikirudennis · Jan 25, 2012 · 05f7383 · 05f7383
1 parent 3bc9ce2
commit 05f7383
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 20 deletions.
diff --git a/js/jquery.js b/js/jquery.js
diff --git a/readme.textile b/readme.textile
@@ -1,3 +1,5 @@
 h1. jQuery Stopwatch
 
-A simple stopwatch plug-in for jQuery-supports multiple stopwatches per page.
+A simple stopwatch plug-in for jQuery-supports multiple stopwatches per page.
+
+I needed a simple stopwatch that would count up and at the press of a button, count down to zero and then count back up again.  It also prints out how many times the countdown was reversed.  Kelli Shaver's stopwatch system was pretty nice and simple and I was able to hack it and add my functionality quickly and easily.
diff --git a/stopwatch.html b/stopwatch.html
@@ -0,0 +1,55 @@
+<html>
+<head>
+<title>Stopwatch</title>
+<link rel="stylesheet" href="css/jquery.stopwatch.css" />
+<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script type="text/javascript" src="js/jquery.stopwatch.js"></script>
+<style type="text/css">
+  body {
+    background: #333;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    font-family: arial, helvetica, sans-serif;
+    font-size: 9pt;
+  }
+  #container {
+    width: 650px;
+    padding: 20px;
+    background: #fff;
+    margin: 30px auto 0 auto;
+  }
+
+  #footer {
+    margin: 20px 0 0 0;
+    padding: 20px 0 0 0;
+    text-align: right;
+    color: #777;
+    border-top: 1px solid #ccc;
+  }
+
+  .stopwatch {
+    width: auto;
+  }
+  .stopwatch .display {
+    width: auto;
+    text-align: center;
+  }
+
+  .stopwatch .start, .stopwatch .stop, .stopwatch .reverse, .stopwatch .reset {
+    width: 23%;
+    margin: 1%;
+  }
+</style>
+</head>
+<body>
+  <div id="container">
+		<div id="clock1"></div>
+  </div>
+	<script type="text/javascript">
+		$(function() {
+			$('#clock1').stopwatch();
+		});
+	</script>
+</body>
+</html>