954,157 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article
3 Years Ago
0

Help w/a simple js calculator please...

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

Syakoban
Light Poster
46 posts since Jan 2006
Reputation Points: 10
Solved Threads: 0
 
3 Years Ago
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>
<label>thickness: <input type="text" value="" id="t" name="t" size="6"></label>
<label>total: <input type="text" value="" id="total" name="total" size="10"></label>

<button onclick="document.getElementById('total').value = parseInt((( parseInt( document.getElementById('sqft').value ) / 324 ) / parseInt( document.getElementById('t').value )));">Show Total</button>
</form>
</body>
</html>
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 
3 Years Ago
0

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

Syakoban
Light Poster
46 posts since Jan 2006
Reputation Points: 10
Solved Threads: 0
 
3 Years Ago
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

Airshow
WiFi Lounge Lizard
Moderator
2,678 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
 
3 Years Ago
0

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

Syakoban
Light Poster
46 posts since Jan 2006
Reputation Points: 10
Solved Threads: 0
 
3 Years Ago
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...

essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 
3 Years Ago
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.

essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 
3 Years Ago
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...

Syakoban
Light Poster
46 posts since Jan 2006
Reputation Points: 10
Solved Threads: 0
 
3 Years Ago
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.

essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 
3 Years Ago
Show Comments
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>
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 114
Solved Threads: 138
 
3 Years Ago
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:

Syakoban
Light Poster
46 posts since Jan 2006
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
 
© 2012 DaniWeb® LLC
Home | About Us | Contact Us | Terms of Service | Advertising Opportunities
RSS Feed RSS Feed