## Syakoban

Hi,

I'm not a coder, but I'm trying to do a project for my friend so that his site has a little calculator. js is the logical choice but I don't know how to write it. Can anyone point me in the direction of a resource or existing calculator that I might be able to adapt?

I basically need a "calculator" that determines how many cubic yards of mulch (yep!) are required to cover a user entered number of square feet of ground, at a user entered thickness. So, some user entered number of square feet/324/user entered thickness= answer.

Would there be anything anyone knows of that I can adapt to this?

Thanks!
__________

## essential 84

1st You can start with this little example. So that you'll easily get how everything works!

``````<html>
<body>
<form>
<label>squareFeet: <input type="text" value="" id="sqft" name="sqft" size="6"></label><br>
<label>thickness: <input type="text" value="" id="t" name="t" size="6"></label><br>
<label>total: <input type="text" value="" id="total" name="total" size="10"></label><br>

<button onclick="document.getElementById('total').value = parseInt((( parseInt( document.getElementById('sqft').value ) / 324 ) / parseInt( document.getElementById('t').value )));">Show Total</button>
</form>
</body>
</html>``````

## Syakoban

Thanks essential. That's the idea but your example doesn't quite work. Any ideas?

## Airshow 416

I looked at this a couple of hours ago and just realised ..... the formula's wrong!

Volume will increase as both area and thickness increase, therefore the formula must be of the form `volume = area * thickness * k` , where k is a constant that give the resulting measure in the desired units taking into account the units of area and thickness.

The important thing is the first *. Volume = area * thickness. (ignore the fact that k is expressed as a multiple; it doesn't matter as k can be a fraction).

With area in sq ft and depth in inches, then k=1/324 (ie 144/46656), as in the OP, is the correct constant to give volume in cu yds. The formula is thus :

``area * thickness / 324``

Little to do with Javascript but hope this helps.

Airshow

## Syakoban

Yup. That is a good formula. Now all I need is a calculator to make it work...

## essential 84

Sorry about that last post -- i 4got that we're doing math, and rushing up things. The best way to do this, is to create a function that will handle all inputs and apply appropriate calculation's. Since Airshow is around, then you will get, what you probably need. Good day with you guys...

## essential 84

Ok you can try this example:

``````<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaSript Calculator</title>
<style type="text/css">

html, body {
border : none;
color : #407050;
font : normal normal bold 90%/1.6 Verdana, Tahoma, Arial, sans-serif; }

table {
border-color : #ccc;
border-collapse : collapse; }

input[type="text"] {
border : 1px solid #ccc;
color : #708090;
font-weight : bold;
height : 1.8em;
letter-spacing : 1px;
text-align : center; }

input[type="button"] {
border : 1px solid #ccc;
color : #000;
font-weight : bold;
height : 1.8em; }

td, th {
border-color : #eee;
padding : .700em .700em .200em .700em;
vertical-align : middle; }

</style>
<script type="text/javascript">
// <![CDATA[
var calculate, \$ = { }, sft;

\$ = Object.prototype.\$ = function( thisID ) {
return document.getElementById ? document.getElementById( thisID ) : document.all[ thisID ];
};

calculate = function() {
sft = parseFloat(( \$("sqft").value / \$("ar").value ) * \$("ar").value );

\$("cfy").value = (( sft ) / 27 );
// Converted to yards.
};
// ]]>
</script>
<body>
<div id="content">
<form id="frm" action="#" onsubmit="return false">
<table frame="box" rules="none" summary="Simple calculator">
<caption>JavaScript Demo</caption>
<colgroup align="center">
<col style="background-color : #f0f0f0;" />
<col />
<col style="background-color : #f0f0f0;" />
<col />
<col style="background-color : #f0f0f0;" />
</colgroup>
<tr>
<th><label for="ar">Area</label></th>
<th></th>
<th><label for="sqft">Cubic Feet</label></th>
<th></th>
<th><label for="cfy">Cubic Yard</label></th></tr>
<tfoot>
<tr>
<td><input type="button" id="btn" name="btn" value="Show" onclick="calculate();" /></td>
<td colspan="3"></td>
<td><input type="reset" id="rst" name="rst" value="Clear" /></td>
</tr>
</tfoot>
<tbody>
<tr>
<th><input type="text" id="ar" name="ar" size="6" value="" maxlength="20" /></th>
<th>x</th>
<th><input type="text" id="sqft" name="sqft" size="6" value="" maxlength="20" /></th>
<th>=</th>
<th><input type="text" id="cfy" name="cfy" size="6" value="" maxlength="20" /></th>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>``````

Hope you find it useful.

## Syakoban

Thank you so much Essential!

I appreciate all that work. The only thing is the math formula is incorrect. Airshow was right that the formula is just:

area (sqf) * thickness(inches) / 324 = cubic yards

so 1000 sqf * 3 inches /324 = 9.259 cubic yards

I'm trying to look at your js code and figure out how to change the formula, but so far I'm stumped...

## essential 84

Ooops It was based by the cubic ft. x the volume entered by the user. it's an easy-fix. All calculation can be altered in line# 51, with above code. The current formulation is set to (user entered: ar / user entered cft * user entered: ar / 27 ) = cubic yard.

## essential 84

You can skip the editing, i've reformulated the code, as you suggested.

``````<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaSript Calculator</title>
<style type="text/css">

html, body {
border : none;
color : #407050;
font : normal normal bold 90%/1.6 Verdana, Tahoma, Arial, sans-serif; }

table {
border-color : #ccc;
border-collapse : collapse; }

input[type="text"] {
border : 1px solid #ccc;
color : #708090;
font-weight : bold;
height : 1.8em;
letter-spacing : 1px;
text-align : center; }

input[type="button"] {
border : 1px solid #ccc;
color : #000;
font-weight : bold;
height : 1.8em; }

td, th {
border-color : #eee;
padding : .700em .700em .200em .700em;
vertical-align : middle; }

</style>
<script type="text/javascript">
// <![CDATA[
var calculate, \$ = { }, sft;

\$ = Object.prototype.\$ = function( thisID ) {
return document.getElementById ? document.getElementById( thisID ) : document.all[ thisID ];
};

calculate = function() {

/* sft = parseFloat(( \$("sqft").value / \$("ar").value ) * \$("ar").value ); *///Old formula

sft = parseFloat( \$("ar").value * \$("sqft").value ) // Airshow's suggested formula

\$("cft").value = (( sft ) / 324 ).toString().substr(0, 5);

// Converted to yards.
};
// ]]>
</script>
<body>
<div id="content">
<form id="frm" action="#" onsubmit="return false">
<table frame="box" rules="none" summary="Simple calculator">
<caption>JavaScript Caculator v1.0-</caption>
<colgroup align="center">
<col style="background-color : #f0f0f0;" />
<col />
<col style="background-color : #f0f0f0;" />
<col />
<col style="background-color : #f0f0f0;" />
</colgroup>
<tr>
<th><label for="ar">Area</label></th>
<th></th>
<th><label for="sqft">Cubic Feet</label></th>
<th></th>
<th><label for="cft">Cubic Yard</label></th></tr>
<tfoot>
<tr>
<td><input type="button" id="btn" name="btn" value="Show" onclick="calculate();" /></td>
<td colspan="3"></td>
<td><input type="reset" id="rst" name="rst" value="Clear" /></td>
</tr>
</tfoot>
<tbody>
<tr>
<th><input type="text" id="ar" name="ar" size="6" value="" maxlength="20" /></th>
<th>x</th>
<th><input type="text" id="sqft" name="sqft" size="6" value="" maxlength="20" /></th>
<th>=</th>
<th><input type="text" id="cft" name="cft" size="6" value="" maxlength="20" /></th>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>``````