Skip to content

Instantly share code, notes, and snippets.

@marcphilipp

marcphilipp/sumuptasks.html

Created June 13, 2011 19:12
Show Gist options
  • Save marcphilipp/1023473 to your computer and use it in GitHub Desktop.
Save marcphilipp/1023473 to your computer and use it in GitHub Desktop.
Download ZIP
Sum Up Tasks
Raw
sumuptasks.html
<!DOCTYPE html>
<html>
<head>
<title>Sum Up Tasks</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<style>
#sum-bar h4 {
font-size:150%;
}
.ui-block-b {
font-size:300%;
text-align:center;
}
</style>
<script>
var sum = 0;
function incrementSumBy(value) {
sum += value;
$('#sum').text(sum.toFixed(2));
$('#sum-bar').effect("highlight", { color : '#ffffff' }, 200);
}
function decrementSumBy(value) {
incrementSumBy(-value);
}
$(document).ready(function(){
incrementSumBy(0);
$("#quarter .plus").click(function(event){
incrementSumBy(.25);
});
$("#quarter .minus").click(function(event){
decrementSumBy(.25);
});
$("#half .plus").click(function(event){
incrementSumBy(.5);
});
$("#half .minus").click(function(event){
decrementSumBy(.5);
});
$("#full .plus").click(function(event){
incrementSumBy(1);
});
$("#full .minus").click(function(event){
decrementSumBy(1);
});
$("#reset-sum").click(function(event){
sum = 0;
incrementSumBy(0);
});
});
</script>
</head>
<body>
<div id="start" data-role="page" data-theme="b">
<div data-role="header" data-position="inline" data-backbtn="false" data-theme="a">
<h1>Sum Up Tasks</h1>
<a href="#reset-confirmation-dialog" data-icon="delete" class="ui-btn-right" data-rel="dialog">Reset</a>
</div>
<div data-role="content">
<div id="quarter" class="ui-grid-b">
<div class="ui-block-a"><a class="minus" data-role="button" data-icon="minus" href="javascript:void(0)">&nbsp;</a></div>
<div class="ui-block-b">&#188;</div>
<div class="ui-block-c"><a class="plus" data-role="button" data-icon="plus" href="javascript:void(0)" data-iconpos="right">&nbsp;</a></div>
</div>
<div id="half" class="ui-grid-b">
<div class="ui-block-a"><a class="minus" data-role="button" data-icon="minus" href="javascript:void(0)">&nbsp;</a></div>
<div class="ui-block-b">&#189;</div>
<div class="ui-block-c"><a class="plus" data-role="button" data-icon="plus" href="javascript:void(0)" data-iconpos="right">&nbsp;</a></div>
</div>
<div id="full" class="ui-grid-b">
<div class="ui-block-a"><a class="minus" data-role="button" data-icon="minus" href="javascript:void(0)">&nbsp;</a></div>
<div class="ui-block-b">1</div>
<div class="ui-block-c"><a class="plus" data-role="button" data-icon="plus" href="javascript:void(0)" data-iconpos="right">&nbsp;</a></div>
</div>
</div>
<div id="sum-bar" data-role="footer" data-position="fixed" data-theme="e">
<h4>Sum: <span id="sum">0.00</span></h4>
</div>
</div>
<div data-role="page" id="reset-confirmation-dialog">
<div data-role="header">
<h1>Reset Sum?</h1>
</div>
<div data-role="content">
<p>Do you really want to reset the sum?</p>
<a id="reset-sum" href="#start" data-role="button" data-theme="b">Reset Sum</a>
<a href="#start" data-role="button">Cancel</a>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment