Board Feet Calculator

by kthornbloom

HTML

<form>
    <table align="center">
        <tr>
            <td align="center">
                <input type="text" id="height" value="1">
                <br>
                <label for="height">Height (in)</label>
                <br>
                <br>
            </td>
            <td align="center">
                <input type="text" id="width" value="4">
                <br>
                <label for="width">Width (in)</label>
                <br>
                <br>
            </td>
            <td align="center">
                <input type="text" id="length" value="12">
                <br>
                <label for="length">Length (feet)</label>
                <br>
                <br>
            </td>
        </tr>
    </table>
    <table align="center">
        <tr>
            <td><input type="text" id="qty" value="1">
                <br>
                <label for="qty">Board Qty</label></td>
			<td><input type="text" id="price" value="2.5">
                <br>
                <label for="price">Price</label></td>
        </tr>
    </table>

    <a href="#" id="calc">Calculate</a>
</form>

<div class="results">

</div>
<div class="totals"></div>

CSS

body {
    font-family: sans-serif;
    text-align: center;
    padding: 30px;
}

td {
    padding: 10px;
}

input[type="text"] {
    width: 30px;
}

table {
    font-size: 11px;
}

#calc {
    color: #fff;
    background: #222;
    margin-bottom: 15px;
    padding: .5em;
    text-decoration: none;
    display: inline-block;
}

.results {
    max-width: 200px;
    margin: 0 auto;
    border: 1px solid #ccc;
    counter-reset: section;
}

.boardItem::before {
    counter-increment: section;
    content: counter(section);
    padding-right: 10px;
    color: #ccc;
}

JavaScript

function results(){
	
}
function calcBoard() {
    var tally = 0;
    var boardHeight = $('#height').val(),
        boardWidth = $('#width').val(),
        boardLength = ($('#length').val()),
		boardQty = ($('#qty').val()),
		boardPrice = ($('#price').val()),
        result = (boardHeight * boardWidth * boardLength) / 12;
    for (var i = 0; i < boardQty; i++){
		$('.results').append("<div class='boardItem'><span>" + result + "</span> <a href='#' class='remove'>X</a></div>");
    	var resultQty = $('.boardItem').length;
	}
	$('.boardItem').each(function() {
        tally += parseFloat($(this).text());
    });
    $('.totals').html(tally);
}

$('#calc').on('click', function() {
    calcBoard();
})

$(document).on('click','.remove',function(){
	var amtRemoved = $(this).parent().find('span').text();
	$(this).parent().remove();
	var tally = parseInt($('.results').text());
	$('.boardItem').each(function() {
        tally += parseFloat($(this).text());
    });
    $('.totals').html(tally);
})