Helium Calculator
HTML
<h2>Helium Calculator</h2>
<div class="left">Balloon Design: </div>
<select id="balloon_model">
<option value="0.25">Latex 9" Round</option>
<option value="0.5">Latex 11" Round</option>
<option value="0.3">Latex 11" Heart</option>
<option value="1.5">Latex 16" Round</option>
<option value="2.0">Latex 18" Round</option>
<option value="0.5">Foil/Mylar 18" (approx.)</option>
<option value="1.15">Ultrashapes (approx.)</option>
<option value="1.2">Bubbles (approx.)</option>
<option value="2.0">Super Shapes (approx.)</option>
<option value="2.0">Sing-A-Tune</option>
<option value="8.0">Latex 3' (Inflated to 2.5)</option>
<option value="15.0">Latex 3'</option>
<option value="34.0">Chloroprene 4'</option>
<option value="66.0">Chloroprene 5.5'</option>
<option value="267.0">Chloroprene 8''</option>
</select>
<br />
<div class="left">QTY:</div>
<input id="qty" />
<hr />
<div class="left" style="text-align: right;">
<input type="submit" id="btn" value="Calculate" />
</div>
<input type="text" id="result" readonly />Total ft3 p/balloon
<hr />
<input type="text" id="tankyouneed" readonly />Tank you need (disregard this result, just testing arrays)
CSS
.left {
float: left;
width: 200px;
}
JavaScript
var $ = document.getElementById.bind(document);
$('btn').addEventListener('click', function() {
var
tanks = {
0: {
name: 'HEL550',
volume: 292
},
1: {
name: 'HEL450',
volume: 225
},
2: {
name: 'HEL250',
volume: 125
},
3: {
name: 'HEL160',
volume: 125
},
4: {
name: 'HEL110',
volume: 55
},
5: {
name: 'HEL50',
volume: 27.5
},
6: {
name: 'BT 326502',
volume: 14.9
},
7: {
name: 'BT 306472',
volume: 8.9
}
},
balloonModel = $('balloon_model').value,
qantity = $('qty').value,
finalResult = balloonModel * qantity,
finalResultRounded = finalResult.toFixed(2),
tankCalc = tanks[7].volume;
$('result').value = finalResultRounded;
$('tankyouneed').value = tankCalc;
}, false);