0

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!
__________

3
Contributors
10
Replies
12
Views
8 Years
Discussion Span
Last Post by Syakoban
0

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

<html>
<head>
<title>your title</title>
</head>
<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>
0

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

0

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

0

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

0

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...

0

Still got no answer?
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">
<head>
<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>
</head>
<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>
<thead>
<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>
</thead>
<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.

0

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...

0

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.

1

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">
<head>
<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>
</head>
<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>
<thead>
<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>
</thead>
<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>
Votes + Comments
ABSOLUTELY HELPFUL!
0

Thanks soooooooo much Essential!!! :cool:

I appreciate your work - it's a huge help to me to not have to find something and adapt it. Now I have to figure out how to put it in a little modal window or tool-tip kinda thing, but that I think I can do. :icon_wink:

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.