Help w/a simple js calculator please...

Question

Syakoban 0 Light Poster

15 Years Ago

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

javascript

3 Contributors
10 Replies
232 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Syakoban

essential 84 Posting Shark

15 Years Ago

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>

Airshow 416 WiFi Lounge Lizard

15 Years Ago

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

essential 84 Posting Shark

15 Years Ago

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>

Syakoban commented: ABSOLUTELY HELPFUL! +4

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Syakoban 0 Light Poster · Answer 1 · 2009-04-28T02:03:32+00:00

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

Syakoban 0 Light Poster · Answer 2 · 2009-04-28T07:43:02+00:00

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

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-04-28T07:54:28+00:00

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 Posting Shark Featured Poster · Answer 4 · 2009-04-28T17:00:12+00:00

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.

Syakoban 0 Light Poster · Answer 5 · 2009-04-28T22:27:13+00:00

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 Posting Shark Featured Poster · Answer 6 · 2009-04-28T22:57:52+00:00

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.

Syakoban 0 Light Poster · Answer 7 · 2009-04-28T23:57:25+00:00

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: