Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add more comments

  • Loading branch information...
commit 0e1bc02450a658928401c4890bc5ad03f6fe6182 1 parent cd47891
@kyungbae authored
Showing with 26 additions and 2 deletions.
  1. +4 −0 index.css
  2. +4 −0 index.html
  3. +18 −2 slider-timer.js
View
4 index.css
@@ -7,6 +7,7 @@
color: #f6931f;
}
+/* Tabs */
#tabs {
width: 800px;
}
@@ -31,6 +32,7 @@
color: #f6931f;
}
+/* Each slider handle */
#hour-slider > .ui-slider-handle,
#minute-slider > .ui-slider-handle,
#second-slider > .ui-slider-handle {
@@ -42,11 +44,13 @@
text-align: center;
}
+/* Buttons */
#buttons {
padding: 6px 4px;
text-align: center;
}
+/* Set the space between sliders */
#sliders > p {
margin-bottom: 5px;
}
View
4 index.html
@@ -14,6 +14,7 @@
<li><a href="#tabs-2">Slider Timer</a></li>
<li><a href="#tabs-3">Further Development</a></li>
</ul>
+ <!-- Description Tab -->
<div id="tabs-1">
<h2>Welcome to Slider Timer</h2>
<p>
@@ -30,7 +31,9 @@
<br/>
<p><span style="font-size: 70%; color: #f6931f;">CSCIE-75 Project 3 by Kyung Park</span></p>
</div>
+ <!-- Slider Timer Tab -->
<div id="tabs-2">
+ <!-- Notification for time up -->
<div id="time-up" title="Notification">
<p>Time is up!</p>
</div>
@@ -53,6 +56,7 @@
<input type="button" id="reset-timer" value="Reset">
</div>
</div>
+ <!-- Further Development Tab -->
<div id="tabs-3">
<h2>Possible Improvements</h2>
<h4>No Digit on Handle When It Starts</h4>
View
20 slider-timer.js
@@ -1,21 +1,26 @@
$(document).ready(function() {
+ //Select first tab when it starts
$('#tabs').tabs();
+
+ //Set animation speed for the notification
$.fx.speeds._default = 1000;
+ //Set the notification hiden with some effects
$('#time-up').dialog({
autoOpen: false,
show: 'drop',
hide: 'clip'
});
+ //Function to display a notification
function noticeTimeUp() {
$('#time-up').dialog('open');
return false;
}
- //update slider handel
+ //Update slider handel value
var updateHandleBox = function (event, ui) {
$(this).data().slider.element.find(".ui-slider-handle").text(ui.value);
};
@@ -48,9 +53,10 @@ $(document).ready(function() {
value:0
});
+ //Display the initial time value
$('#time-display').html('00:00:00');
- //update slider on each tick
+ //Update slider handle location and value
function updateSliders(periods) {
var hour = periods[4];
var minute = periods[5];
@@ -65,14 +71,23 @@ $(document).ready(function() {
$('#second-slider').data().slider.element.find('.ui-slider-handle').text(second);
}
+ //Function for staring a timer
function startingTimer() {
+
+ //Destroy a timer object that may be excuted previously
$('#time-display').countdown('destroy');
+
+ //Collect the slider values
var hour = '+' + $('#hour-slider').slider('value') + 'h ';
var minute = '+' + $('#minute-slider').slider('value') + 'm ';
var second = '+' + $('#second-slider').slider('value') + 's';
+ //Combine time values for countdown.js
var timeSet = hour + minute + second;
+ //Run the countdown plug-in
+ //It runs updateSliders function with every ticks
+ //It runs noticeTimeUp function when the time is up
$('#time-display').countdown({
until: timeSet,
layout: '{hnn}{sep}{mnn}{sep}{snn}',
@@ -101,6 +116,7 @@ $(document).ready(function() {
$('#time-display').countdown('destroy');
$('#time-display').html('00:00:00');
+ //Initialize the time set for countdown plug-in
var periods = [0, 0, 0, 0, 0, 0, 0];
updateSliders(periods);
Please sign in to comment.
Something went wrong with that request. Please try again.