Skip to content

Instantly share code, notes, and snippets.

@hippietrail

hippietrail/cambodiachange.html Secret

Last active Aug 29, 2015
Embed
What would you like to do?
Cambodian change calculator
<!DOCTYPE html>
<html>
<head>
<title>Cambodian change calculator</title>
<style>
html {
display: table;
margin: auto;
}
body {
font-family: verdana;
display: table-cell;
vertical-align: middle;
}
input[type=number] {
font-size: 1.1em;
}
fieldset {
line-height: 32px;
margin-bottom: 12px;
border: 1px solid gray;
border-radius: 10px;
}
fieldset legend{
color: navy;
font-weight: bold;
font-size: 1.2em;
}
fieldset label {
display: inline-block;
width: 70px;
}
h1.title {
color: navy;
text-align: center;
font-variant: small-caps;
}
</style>
</head>
<body>
<h1 class="title">Cambodian Change Calculator</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<fieldset id="price">
<legend>Price</legend>
<div class="dollars-cents">
<span class="dollars">
<label>Dollars</label>
<input type="number" value="0" />
</span>
<span class="cents">
<label>
Cents
</label>
<input type="number" value="0" />
</span>
</div>
<div class="dollars-riels">
<span class="dollars">
<label>Dollars</label>
<input type="number" value="0" />
</span>
<span class="riels">
<label>Riels</label>
<input type="number" value="0" />
</span>
</div>
<div class="riels-only">
<span class="riels">
<label>Riels</label>
<input type="number" value="0" />
</span>
</div>
</fieldset>
<fieldset id="paid">
<legend>Paid</legend>
<div class="dollars-cents">
<span class="dollars">
<label>Dollars</label>
<input type="number" value="0" />
</span>
<span class="cents">
<label>Cents</label>
<input type="number" value="0" />
</span>
</div>
<div class="dollars-riels">
<span class="dollars">
<label>Dollars</label>
<input type="number" value="0" />
</span>
<span class="riels">
<label>Riels</label>
<input type="number" value="0" />
</span>
</div>
<div class="riels-only">
<span class="riels">
<label>Riels</label>
<input type="number" value="0" />
</span>
</div>
</fieldset>
<fieldset id="change">
<legend>Change</legend>
<div class="dollars-cents">
<span class="dollars">
<label>Dollars</label>
<input type="number" value="0" readonly="readonly" />
</span>
<span class="cents">
<label>Cents</label>
<input type="number" value="0" readonly="readonly" />
</span>
</div>
<div class="dollars-riels">
<span class="dollars">
<label>Dollars</label>
<input type="number" value="0" readonly="readonly" />
</span>
<span class="riels">
<label>Riels</label>
<input type="number" value="0" readonly="readonly" />
</span>
</div>
<div class="riels-only">
<span class="riels">
<label>Riels</label>
<input type="number" value="0" readonly="readonly" />
</span>
</div>
</fieldset>
<script>
$( "input" ).change(function(eo) {
var inp = $(this);
var val = inp[0].value;
var field = inp.parent();
var fieldName = field[0].className;
var mode = field.parent();
var modeName = mode[0].className;
var section = mode.parent();
var sectionName = section[0].id;
doStuff(sectionName, modeName, fieldName);
});
function doStuff(section, mode, field) {
// update the other modes in the same section
var inRiels = -1;
switch (mode) {
case 'dollars-cents':
var rm = $('#' + section + ' .' + mode);
var f = rm.find('.dollars, .cents').map(function(i, e) {
return parseInt($(e).find('input')[0].value);
}).toArray();
inRiels = (f[0] * 100 + f[1]) * 40;
updateModes(section, mode, inRiels);
break;
case 'dollars-riels':
var rm = $('#' + section + ' .' + mode);
var f = rm.find('.dollars, .riels').map(function(i, e) {
return parseInt($(e).find('input')[0].value);
}).toArray();
inRiels = f[0] * 4000 + f[1];
updateModes(section, mode, inRiels);
break;
case 'riels-only':
var rm = $('#' + section + ' .' + mode);
var f = rm.find('.riels').map(function(i, e) {
return parseInt($(e).find('input')[0].value);
}).toArray();
inRiels = f[0];
updateModes(section, mode, inRiels);
break;
default:
// BANG!
}
switch (section) {
case 'price':
var rm = $('#paid .riels-only');
var p = rm.find('.riels input')[0].value;
updateModes('change', '', p - inRiels);
break;
case 'paid':
var rm = $('#price .riels-only');
var p = rm.find('.riels input')[0].value;
updateModes('change', '', inRiels - p);
break;
default:
// BANG!
}
}
function updateModes(section, fromMode, inRiels) {
if ('dollars-cents' !== fromMode)
updateDollarsCents(section, inRiels);
if ('dollars-riels' !== fromMode)
updateDollarsRiels(section, inRiels);
if ('riels-only' !== fromMode)
updateRielsOnly(section, inRiels);
}
function updateDollarsCents(section, inRiels) {
var dollars = parseInt(inRiels / 4000);
var riels = inRiels - dollars * 4000;
var cents = riels / 40;
var $m = $('#' + section + ' .dollars-cents');
$m.find('.dollars input')[0].value = dollars;
$m.find('.cents input')[0].value = cents;
}
function updateDollarsRiels(section, inRiels) {
var dollars = parseInt(inRiels / 4000);
var riels = inRiels - dollars * 4000;
var $m = $('#' + section + ' .dollars-riels');
$m.find('.dollars input')[0].value = dollars;
$m.find('.riels input')[0].value = riels;
}
function updateRielsOnly(section, inRiels) {
var $m = $('#' + section + ' .riels-only');
$m.find('.riels input')[0].value = inRiels;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment