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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    18
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Help with column layout and design

    Hi I have managed to create a javascript calculator as below and basically I want the text and input boxes for the four lines above the calculate button to be dispalyed into 3 column's lining up with each other, also the input boxes I think would look better if they were all the same size, I would also like it to look a bit more professional and would be good if it could all be displayed with in a coloured framed box.

    Hope that explains things enough



    <html>
    <head>

    </head>
    <body>
    <form name="myform">
    <h1>Electricity Saving Calculator</h1>
    Quantity of Lamps (max. 999): <input type="text" name="qty" onkeyup="if(this.value>999){this.value=999}"/><br>
    <br>
    Hours on per day mon-fri <select name="hpwd">
    <option>Select</option>
    </select>
    Saturday <select name="hpsa">
    <option>Select</option>
    </select>
    Sunday <select name="hpsu">
    <option>Select</option>
    </select><br>
    Weeks closed per year (max 52): <input type="text" name="wcpy" onkeyup="if(this.value>52){this.value=52}"/><br>
    <br>
    Electricity Rate (in Pence per kWh): <input type="text" name="kwH" onblur="if(this.value<5.5){this.value=5.5} if(this.value>15.5){this.value=15.5}"/><br>
    <br>
    Current Lamp Replacement Lamp<br>
    Current Lamp <select name="curr">
    <option>Select</option>
    <option value=60>GLS 60w Lamp</option>
    <option value=20>GU10 PAR16 20w</option>
    <option value=35>GU10 PAR16 35w</option>
    <option value=50>GU10 PAR16 50w</option>
    </select>
    Replacement Lamp <select name="repl">
    <option>Select</option>
    <option value=1>GU10 PAR16 LED 1w</option>
    <option value=3>GU10 PAR16 LED 3w</option>
    <option value=4>GU10 PAR16 LED 4w</option>
    <option value=5>GU10 PAR16 LED 5w</option>
    </select>
    <br>
    Lifetime <select name="currll">
    <option>Select</option>
    <option value=2000>2,000 Hours</option>
    <option value=3000>3,000 Hours</option>
    <option value=4000>4,000 Hours</option>
    <option value=5000>5,000 Hours</option>
    </select>
    Life <select name="replll">
    <option>Select</option>
    <option value=20000>20,000 Hours</option>
    <option value=30000>30,000 Hours</option>
    <option value=35000>35,000 Hours</option>
    <option value=35000>40,000 Hours</option>
    <option value=40000>50,000 Hours</option>
    </select>
    <br>
    Cost <input type="text" name="curlc" onkeyup="if(this.value>999){this.value=999}"/>
    Cost <input type="text" name="replc" onkeyup="if(this.value>999){this.value=999}"/>
    <br>
    <br>
    <input type="button" value="Calculate Costs" onclick="calcSavs()"/>
    </form>
    <div id="curcalc"></div>
    <div id="repcalc"></div>
    <div id="savcalc"></div><br>
    <div id="hrscalc"></div>
    <div id="currll1ycalc"></div>
    <div id="currll2ycalc"></div>
    <div id="currll3ycalc"></div>

    <script type="text/javascript">
    var theform=document.myform;

    for (var i = 1; i < 25; i++) {
    theform.hpwd.options[i]=new Option(i,i)
    }

    for (var i = 1; i < 25; i++) {
    theform.hpsa.options[i]=new Option(i,i)
    }

    for (var i = 1; i < 25; i++) {
    theform.hpsu.options[i]=new Option(i,i)
    }

    function calcSavs(){
    tqty=Number(theform.qty.value);
    thpwd=Number(theform.hpwd.options[theform.hpwd.selectedIndex].value);
    thpsa=Number(theform.hpsa.options[theform.hpsa.selectedIndex].value);
    thpsu=Number(theform.hpsu.options[theform.hpsu.selectedIndex].value);
    tcurrll=Number(theform.currll.options[theform.currll.selectedIndex].value);
    tkwh=Number(theform.kwH.value);
    twcpy=Number(theform.wcpy.value);
    current=Number(theform.curr.options[theform.curr.selectedIndex].value);
    replamp=Number(theform.repl.options[theform.repl.selectedIndex].value);
    hrs=((thpwd*5)+thpsa+thpsu)*(52-twcpy)+thpwd
    curres=((current/1000)*(tkwh/100))*hrs*tqty
    repres=((replamp/1000)*(tkwh/100))*hrs*tqty
    currll1y=(hrs*1)/tcurrll
    currll2y=(hrs*2)/tcurrll
    currll3y=(hrs*3)/tcurrll
    savres=curres-repres
    if (isNaN(repres)){
    alert("please ensure you have selected from all lists and only entered numbers in fields");
    return;
    } else{
    document.getElementById("curcalc").innerHTML="Current Lamp Electricity Cost per Year £"+curres.toFixed(2)
    document.getElementById("repcalc").innerHTML="Replacement Lamp Electricity Cost per Year £"+repres.toFixed(2)
    document.getElementById("hrscalc").innerHTML="Lamp Hours per Year is "+hrs.toFixed(2)
    document.getElementById("currll1ycalc").innerHTML="Lamp Replaced Over 1 Year "+currll1y.toFixed(2)
    document.getElementById("currll2ycalc").innerHTML="Lamp Replaced Over 2 Years "+currll2y.toFixed(2)
    document.getElementById("currll3ycalc").innerHTML="Lamp Replaced Over 3 Years "+currll3y.toFixed(2)
    document.getElementById("savcalc").innerHTML="Saving Per Year is £"+savres.toFixed(2)

    }
    }
    </script>

    </body>
    </html>

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    18
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Help With Design

    Hi I am new to this and want to make a javascript calc I have look a bit more professional, by putting it into some sort of outlined box and lining up columns.

    Can anyone help or have have any tips.

    Regards
    Colin

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    18
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Please do not reply here

    How do I delete 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
    •