Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Work out a flooring area

1. ## Work out a flooring area

Hi, this is my first post here, and i am wanting some guidance on how to make a calculator for my website...

basically the website will sell laminate/ wooden flooring and I would like to create a piece of code that when the user enters the room dimensions (i.e width and length) it would tell the user how much they would need to purchase to cover this area.. maybe I could also include the pack size for a more accurate guidance as to what they would need to buy

Many websites that sell flooring have this built into there websites and I wondered if this has been hard coded by the website developer or has been incorporated by a piece of open free-ware that can be obtained and then implemented into the site.

Thanks and any guidance, help would greatly be appreciated.

- Nath

• And what about when the room isn't a simple rectangle???

Rectangles are trivial. A *GOOD* page would allow the user to do better than that.

Code:
```<html>
<head>
<script type="text/javascript">
var bundleSize = 32; // square feet
function calc(form)
{
var ans = document.getElementById("answer");
ans.innerHTML = "";
var x = parseFloat( form.length.value );
var y = parseFloat( form.width.value );
if ( isNaN(x) || isNaN(y) )
{
alert("You must put in only a number for length and width values");
return;
}
var a = x * y;
var b = a / bundlesize;
if ( b != Math.floor(b) ) ++b;
ans.innerHTML = "The area is " + a.toFixed(2) + " square feet<br/>"
+ "You will need " + b + " bundles to cover it."
}
</script>
</head>
<body>
<form>
Length in feet: <input name="length" /><br/>
Width in feet: <input name="width" /><br/>
<input type="button" value="Compute" onclick="calc(this.form)" />
</form>
<br/><br/>
<div id="answer"></div>
</body>
</html>```
100% off the top of my head and untested, but if there's an error it's just a typo, as that's too simple for any other goof.

You might want to throw in a "fudge factor" when computing number of bundles. Up to you.

• I would change
Code:
```    var b = a / bundlesize;
if ( b != Math.floor(b) ) ++b;```
That doesn't round the result. I would change it to:
Code:
`var b = Math.ceil( a / bundleSize );`
If this is for a real shop rather than an academic one, you'll need the option of specifying separate rectangular areas for non-rectangular rooms. If you do so, treat each area as a separate room and add the total number of required packs.
It is a fatal mistake to calculate the packs required from the sum of the areas, since offcuts are not always reusable.

• You are right that it doesn't round the result. My code does the same thing as Math.ceil, if you will look more closely. But yeah, Math.ceil() is better. I dunno why I keep forgetting about it.

• Code:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Measurement Sliders with Auto Calculation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function insertCommas(nNum){

return nNum.split('').reverse().join('').replace(/(\d{3})/g,'\$1,').split('').reverse().join('').replace(/^,/,'');
}

function calcVolume(){

var nForm = document.forms[0];
nForm['volume'].value = nForm['nLength'].value * nForm['nWidth'].value;
var nTotal = nForm['volume'].value * nForm['unitPrice'].value;
nForm['totalCost'].value = nTotal.toFixed(2);
nForm['volume'].value = insertCommas(nForm['volume'].value);
nForm['totalCost'].value = insertCommas(nForm['totalCost'].value);
self.focus();
}

function initWrapper(nWrapper,nContainer,nDimension,nMax){

var useWrapper = document.getElementById(nWrapper);
var useContainer = document.getElementById(nContainer);
var useDimension = document.forms[0][nDimension];
useWrapper.style.width = Math.floor(nMax * 2.5) + 'px';
useContainer.style.paddingLeft = parseInt(useWrapper.style.width) * 4.69 + 'px';
useContainer.style.paddingRight = parseInt(useWrapper.style.width) * 4.69 + 'px';
useWrapper.scrollLeft =  0;
useWrapper.onscroll = function()
{
useDimension.value = Math.round(useWrapper.scrollLeft/20.89);
calcVolume();
}
}

function init(){

initWrapper('Lwrapper','Lcontainer','nLength', 100);  // 100 max slide;
initWrapper('Wwrapper','Wcontainer','nWidth', 100);    // 100 max slide;
document.forms[0].reset();
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {background-color: #eae3c6; margin-top: 60px;}
table {width: 500px; margin-left: auto; margin-right: auto;font-family: 'times new roman';
font-size:12pt; background-color: #f0fff0; border: 1px solid black;}
select {width: 130px;}
input {text-align: right;}
.head1 {background-color: #afeeee;}
.head2 {background-color: #b0c4de;}
.wrapper {overflow:auto; height: 40px; margin-bottom: 5px; margin: auto;}

</style>
</head>
<body>
<form action="">
<table cellspacing='0' cellpadding='5'>
<thead>
<tr>
<th colspan='3' class='head1'>
Cost Estimator
</th>
</tr>
</thead>
<thead>
<tr>
<th colspan='2' class='head2'>
Select
</th>
<th class='head2'>
Feet
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan='2'>
<div id='Lwrapper' class='wrapper'>
<div id='Lcontainer'>&nbsp;</div>
</div>
</td>
<td valign='bottom'>
Length:<br>
<input type='text' size='6' id='nLength' value='0' readonly>
</td>
</tr>
<tr>
<td colspan='2'>
<div id='Wwrapper' class='wrapper'>
<div id='Wcontainer'>&nbsp;</div>
</div>
</td>
<td valign='bottom'>
Width:<br>
<input type='text' size='6' id='nWidth' value='0' readonly>
</td>
</tr>
<tr>
<td align='right' colspan='2'>
Square Feet:
</td>
<td>
<input type='text' size='6' id='volume' value='0.00' readonly>
</td>
</tr>
<tr>
<td align='center'>
Price Per Square Foot:&nbsp;&nbsp;
<select name='unitPrice' onchange="calcVolume()">
<option value='1.99'>
Good - \$1.99
</option>
<option value='2.29'>
Better - \$2.29
</option>
<option value='2.89'>
Best - \$2.89
</option>
</select>
</td>
<td align='right'>
Total \$
</td>
<td>
<input type='text' name='totalCost' size='6' value='0.00' readonly>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>```

•

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•