Compare Pellets

simple calculations for comparing pellets.

by jasonday

HTML

<div class="calcWrapper">
    
<h3>Compare Pellets</h3>

    <img src="http://i47.tinypic.com/21dmnn4.jpg" />
    <ul>
        <li>Red Zone - 35 Btu's per square foot</li>
        <li>Orange Zone - 40 Btu's per square foot</li>
        <li>Yellow Zone -45 Btu's per square foot</li>
        <li>Green Zone - 50 Btu's per square foot</li>
        <li>Blue Zone – 55 Btu's per square foot</li>
    </ul>
    <div class="clearBoth"></div>
    <p>Please enter only numbers and decimal points below</p>
    <div class="formWraps">
        <label for="zone">Choose Zone</label>
        <select name="zone" id="zone">
            <option value="35">Red</option>
            <option value="40">Orange</option>
            <option value="45">Yellow</option>
            <option value="50">Green</option>
            <option value="55">Blue</option>
        </select>
        <label for="squareFeet">Square Footage</label>
        <input type="text" id="squareFeet" name="squareFeet">
        <label for="tons">Average # of tons burnt per year</label>
        <input type="text" id="tons" name="tons">
    </div>
    <div class="formWraps"></div>
    <!-- pellet #1 -->
    <div class="formWraps pellets1">
        <h4>Pellet A</h4>
        <label for="pelletBTU1">Listed BTU value of pellet #1</label>
        <input type="text" id="pelletBTU1"
        name="pelletBTU1">
        <label for="costPellet1">Cost per ton of pellet #1</label>
        <input type="text" id="costPellet1" name="costPellet1">
      
    </div>
    <!-- pellet #2 -->
    <div class="formWraps pellets2">
        <h4>Pellet B</h4>
        <label for="pelletBTU2">Listed BTU value of pellet #2</label>
        <input type="text" id="pelletBTU2"
        name="pelletBTU1">
        <label for="costPellet2">Cost per ton of pellet #2</label>
        <input type="text" id="costPellet2" name="costPellet2">
    </div>
    <button id="calcButton">Calculate</button>
    <div class="results">
        <h4>Results</h4>
        <div>Total...

CSS

body {background: #e9e9e9; font-family: Arial, sans-serif; font-size: 15px;}

.formWraps label,
.formWraps input,
.formWraps select,
 img {display: block;}

input, select, label { padding: 5px; }

.clearBoth {
    clear: both;
    height: 1px;
}
.calcWrapper {
    width:620px;
    margin: 30px auto;
    background: #fff;
    padding: 20px;
    border-radius: 20px;
}

.calcWrapper div.formWraps {display:inline-block; padding: 10px; width: 270px;}

.calcWrapper div.formWraps input, .calcWrapper div.formWraps select {width: 66%;}

.calcWrapper img {float: left;}

.calcWrapper ul {margin: 10px 0 0 20px; float: left;}

.calcWrapper h3 {font-size: 24px; margin: 0 0 25px 0;}

.calcWrapper button {margin: 30px auto 0; width: 100px; padding: 10px; display: block;}

.calcWrapper p {margin: 20px 0; font-style: italic; color: #666; display: block;}

.results {margin-top:40px;}

h4 {font-size: 20px; margin: 10px 0;}

.results div { padding: 10px 0; margin: 13px 0;}

.results .resultsInput { float: right }

.helper {display: block; color: #999; font-style: italic; margin-top: -10px;}

.totalTons {font-weight: bold;}

JavaScript

$("#calcButton").on("click", function(){
var totalBTUs = $('#zone').val() * $('#squareFeet').val();
var aLBS = totalBTUs/$('#pelletBTU1').val();
var bLBS = totalBTUs/$('#pelletBTU2').val();
var ratio = aLBS/bLBS;
var tonsB = $('#tons').val()/ratio
var totalA = $('#costPellet1').val() * $('#tons').val();
var totalB = tonsB * $('#costPellet2').val();
$('#BTUwhole').empty().val(totalBTUs);
$('#pelletAlbs').empty().val(aLBS);
$('#pelletBlbs').empty().val(bLBS);
$('.totalTons').empty().append($('#tons').val());
$('#ratio').empty().val(tonsB);
$('#costA').empty().val(totalA);
$('#costB').empty().val(totalB);
    
});