Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    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>


  •  

    Tags for this Thread

    Posting Permissions

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