BLASTMASTER BULK BAG RACK STAND
by kidsysco
HTML
<h2>BLASTMASTER® BULK BAG RACK STAND CALCULATOR</h2>
<table class="calc-table">
<tbody>
<tr>
<td>
<fieldset id="Bag50">
<legend>50 lbs. Bag</legend>
<p>Cost per bag <small>(<span id="NumberOfBags50">900</span> Bags per Truck Load)</small>
<br />
<input type="text" id="BagCost50" class="calc-input" value="5.90" />
</p>
<p>Fully Burdened Rate per Hour
<br />
<input type="text" id="Rate50" class="calc-input" />
</p>
<p>Minutes of Labor to Unload Truck
<br />
<input type="text" id="MinutesToUnload50" class="calc-input" />
</p>
<p>Minutes of Labor to Fill Blast Machine
<br />
<input type="text" id="MinutesToFill50" class="calc-input" />
</p>
<p>Minutes of Labor to Cleanup Empty Bags
<br />
<input type="text" id="MinutesToClean50" class="calc-input" />
</p>
<div id="Labor50Div" class="calc-total calc-labor">Labor: $<span id="Labor50Span">0.00</span>
</div>
<div id="Total50Div" class="calc-total">Total: $<span id="Total50Span"></span>
</div>
</fieldset>
</td>
<td>
<fieldset id="Bag100">
<legend>100 lbs. Bag</legend>
<p>Cost per bag <small>(<span id="NumberOfBags100">450</span> Bags per Truck Load)</small>
<br />
<input type="text" id="BagCost100" class="calc-input" value="9.75" />
</p>
<p>Fully Burdened Rate per...
CSS
.calc-input {
width: 50px;
}
.calc-table {
border: 0;
}
.calc-table td {
vertical-align: top;
padding:0;
}
.calc-table fieldset {
border: 1px solid black;
display: block;
}
.calc-labor {
color: darkred;
}
.calc-savings {
font-weight: bold;
color:green;
}
.calc-table .calc-savings-container {
padding-top: 6px;
}
.calc-table .calc-savings-container fieldset {
padding-top: 20px;
}
.calc-table .calc-savings-container fieldset p {
font-size: 18px;
}
JavaScript
$(function () {
var _bagCost50 = _getMaterialCost50(),
_bagCost100 = _getMaterialCost100(),
_bagCost4000 = _getMaterialCost4000();
$('body').on('keyup', '#BagCost50', function () {
_bagCost50 = _getMaterialCost50();
});
$('body').on('keyup', '#BagCost100', function () {
_bagCost100 = _getMaterialCost100();
});
$('body').on('keyup', '#BagCost4000', function () {
_bagCost4000 = _getMaterialCost4000();
});
$('body').on('keyup', '#Bag50 .calc-input', function () {
var _rate = $('#Rate50').val() / 60,
_labor = _calculateTotal(_rate, $('#MinutesToUnload50').val(), $('#MinutesToFill50').val(), $('#MinutesToClean50').val()),
_total = _labor + _bagCost50;
$('#Total50Span').text(_total.formatMoney(2));
$('#Labor50Span').text(_labor.formatMoney(2));
_calculateDifferences();
});
$('body').on('keyup', '#Bag100 .calc-input', function () {
var _rate = $('#Rate100').val() / 60,
_labor = _calculateTotal(_rate, $('#MinutesToUnload100').val(), $('#MinutesToFill100').val(), $('#MinutesToClean100').val()),
_total = _labor + _bagCost100;
$('#Total100Span').text(_total.formatMoney(2));
$('#Labor100Span').text(_labor.formatMoney(2));
_calculateDifferences();
});
$('body').on('keyup', '#Bag4000 .calc-input', function () {
var _rate = $('#Rate4000').val() / 60,
_labor = _calculateTotal(_rate, $('#MinutesToUnload4000').val(), $('#MinutesToFill4000').val(), $('#MinutesToClean4000').val()),
_total = _labor + _bagCost4000;
$('#Total4000Span').text(_total.formatMoney(2));
$('#Labor4000Span').text(_labor.formatMoney(2));
_calculateDifferences();
});
function _getMaterialCost50() {
return parseFloat($('#BagCost50').val().replace(',', '')) * parseFloat($('#NumberOfBags50').text())
}
function...