www.webdeveloper.com
Results 1 to 8 of 8

Thread: Help Please :0

  1. #1
    Join Date
    May 2012
    Posts
    8

    Help Please :0

    Ok, I got a script that is caculating electricy. To get the var to work, I need to go into the script and put them myself. I want the users to be able to just be able to type into the box the things needed. Please help

  2. #2
    Join Date
    May 2012
    Posts
    8
    PHP Code:
    <html>
    <
    head>
    <
    titleCOOLOLOLOL</title>
    <
    script type="text/javascript">

        var 
    wattage=2500;
        
        
        var 
    hourdaily=2;
        
        var 
    days=31;
        
        
        var 
    cost=0.07;
        
        
        var 
    item=("Dishwasher");
        
        
    //DONT DO ANYTHING ELSE...............................................................................
        










        
    var timeperday=(hourdaily*days);
        var 
    watts=1000
        
    var kilowatt=(wattage/watts);
        var 
    ans=(kilowatt*timeperday);
        var 
    ans2=(ans*cost);
        

    //title

    document.write("CACULATING HOW MUCH ELECTRICTY" "<br />");
                
    document.write("<br />");
    //given
    document.write("GIVEN" "<br/>");
                
    document.write("<br/>");
    //wattage given
    document.write("     - Wattage- " +  wattage "  W" "<br />");
                
    document.write("<br/>");
    //time per day given
    document.write("     - Time Per Day- " +  hourdaily " hours per day" "<br />");
                
    document.write("<br/>");
    //cost given
    document.write("     - Cost- " +  " $" cost " Per hour" +"<br />");
                
    document.write("<br/>");
    //days given
    document.write("     - Days- " +  days "<br/>");
                
    document.write("<br/>");
    //formula to caculate kilowatts
    document.write(wattage " watts / 1000 = " kilowatt " Kw" );
                
    document.write("<br/>");
                
    document.write("<br/>");
    //formula to caculate Total Hours
    document.write(hourdaily " Hrs x " days " days "  +   " = " timeperday " Total hours");
                
    document.write("<br/>");
                
    document.write("<br/>");
                
    document.write("<br/>");
    //Title to sloving!
    document.write("SLOVING");
                
    document.write("<br/>");
                
    document.write("<br/>");
    //Formula to caculate Total cost for a (watt) (item)
    document.write("Cost of Electricy= Kilowatt x Total hours x cost        IN THAT ORDER");
                
    document.write("<br/>");
                
    document.write("<br/>");
    //Formula to caculate Total cost for a (watt) (item)
    document.write("= " kilowatt " Kw " " x " timeperday " Total Hrs " " x " +" $ " cost);
    //Caculating Kw.h x cost
                
    document.write("<br/>");
                
    document.write("<br/>");
    document.write("= " ans " Kw.H" " x " " $ " cost);
                
    document.write("<br/>");
                
    document.write("<br/>");
                
    document.write("<br/>");
    //Answering the question
    document.write("ANSWERING");
                
    document.write("<br/>");
                
    document.write("<br/>");
    document.write("The total cost for a " +  wattage " W " item " is " "$" Math.round(ans2) + ".00" "<br />");
                
    document.write("<br/>");
                
    document.write("<br/>");

    </script>
    </head>
    <body bgcolor="yellow">
    </body>
    <html> 

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    try this

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Electricity cost calculator</title>
    <style type='text/css'>
    body{text-align:center;font-family:Georgia,Verdana,Arial;font-size:13px;background:#fff;color:#000;padding:150px 0px 0px 0px;margin:0px 0px 0px 0px;}
    td{color:#000;background-color:transparent;text-align:center;}
    select{padding-left:5px;padding-right:5px;border:none;background-color:#f8f8ff;;}
    input{text-align:center;}
    input.btn{text-align:center;width:80px;cursor:pointer;}
    td.hdr{font-size:24px;font-weight:bold;font-style:italic;text-align:right;padding-right:20px;border:none;color:#000;background-color:transparent;}
    b{font-style:italic;font-size:11px;}
    #tab{background-color:#f8f8ff;border:1px solid Lightsteelblue;}
    </style>
    <script type="text/javascript">
    var items=[
    ['Dishwasher',2000,2500,3000],
    ['Microwave Oven',1400,1500,1600],
    ['Desk Lamp',60,75,100]
    // etc.
    ],
    prices=[
    '0.07',
    '0.08',
    '0.09'
    // etc.
    ];
    
    function doc(objID){var obj=document.getElementById(objID);return obj;}
    
    function buildSelects(){
    var tab=doc('tab'),calc=doc('calc'),item=doc('item'),wtg=doc('wtg'),utime=doc('utime'),dd=doc('dd'),cost=doc('cost'),
    alt_item=doc('alt_item'),alt_wtg=doc('alt_wtg'),alt_dd=doc('alt_dd'),alt_cost=doc('alt_cost'),result=doc('result');
    try{tab.style.borderRadius='10px';}catch(e){}
    item.options.length=wtg.options.length=utime.options.length=dd.options.length=cost.options.length=1;
    result.innerHTML='Result goes here';
    calc.onreset=buildSelects;
    
    for(var i in items){item.options[item.options.length]=new Option(items[i][0],items[i][0]);}
    for(var h=1;h<25;h++){utime.options[utime.options.length]=new Option(h,h);}
    for(var d=1;d<32;d++){dd.options[dd.options.length]=new Option(d,d);}
    for(var p in prices){cost.options[cost.options.length]=new Option(prices[p],prices[p]);}
    
    item.onchange=function(){
    this.blur();var val=this.options[this.selectedIndex].value;alt_item.value=val;result.innerHTML='Result goes here';
    if(val==''){calc.reset();return;}
    else{var temp=items[this.selectedIndex-1];wtg.options.length=1;for(var i=1;i<temp.length;i++){wtg.options[wtg.options.length]=new Option(temp[i],temp[i]);};}
    }
    wtg.onchange=utime.onchange=dd.onchange=cost.onchange=function(){this.blur();try{result.innerHTML='Result goes here';doc('alt_'+this.id).value=this.options[this.selectedIndex].value;}catch(e){}}
    }
    
    function doCalc(){
    var alt_item=doc('alt_item'),alt_wtg=doc('alt_wtg'),utime=doc('utime'),alt_dd=doc('alt_dd'),alt_cost=doc('alt_cost'),result=doc('result'),dig=/^[\d]{1,}[\.]*[\d]*$/m;
    
    if(dig.test(alt_wtg.value)&&dig.test(utime.value)&&dig.test(alt_dd.value)&&dig.test(alt_cost.value)){
    var kw=new Number(alt_wtg.value)/1000;
    result.innerHTML='<center><p style="width:250px;text-align:left"><b>Item:</b>&nbsp;&nbsp;&nbsp;'+alt_item.value+'<br /><b>Wattage:</b>&nbsp;&nbsp;&nbsp;'+kw+'kW<br /><b>Used:</b>&nbsp;&nbsp;&nbsp;'+utime.value+' hrs per a day<br /><b>Days of use:</b>&nbsp;&nbsp;&nbsp;'+alt_dd.value+'<br /><br />'
    result.innerHTML+='<b>Total cost</b> is $'+(kw*new Number(utime.value)*new Number(alt_dd.value)*new Number(alt_cost.value)).toFixed(2)+'</p></center>';
    }
    else{result.innerHTML='<span style="color:Crimson;">Wrong data given</span>';}
    }
    </script>
    </head> 
    <body onload="buildSelects()">
    <form name="calc" id="calc" action="">
    <table id="tab" align="center" cellpadding="5" cellspacing="5" border="0" width="642"><tbody>
    <tr><td class="hdr" colspan="5">Calculator</td></tr>
    <tr>
    <td><select name="item" id="item"><option value="">Household appliance item</option></select></td>
    <td><select name="wtg" id="wtg"><option value="">Wattage</option></select></td>
    <td><select name="utime" id="utime"><option value="">Usage time</option></select></td>
    <td><select name="dd" id="dd"><option value="">Days</option></select></td>
    <td><select name="cost" id="cost"><option value="">Cost p/hr</option></select></td>
    </tr>
    <tr>
    <td><input type="text" name="alt_item" id="alt_item" placeholder="item name" /></td>
    <td><input type="text" name="alt_wtg" id="alt_wtg" placeholder="wattage" /></td>
    <td>&nbsp;</td>
    <td><input type="text" name="alt_dd" id="alt_dd"  placeholder="days of use" /></td>
    <td><input type="text" name="alt_cost" id="alt_cost" placeholder="cost per hour" /></td>
    </tr>
    <tr><td colspan="5"><input class="btn" type="reset" value="Reset" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="btn" type="button" value="Calculate" onclick="doCalc()" /></td></tr>
    <tr><td colspan="5" id="result">Result goes here</td></tr>
    </tbody></table>
    </form>
    </body> 
    <html>
    Last edited by Padonak; 05-25-2012 at 03:51 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    May 2012
    Posts
    8
    DUDE THANK YOU SO MUCH... but please can you explain what you did in //.... I didnt understand :P

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    Code:
    /* this array contains subarrays as it's elements.
    ever subarray is structured like [ITEM NAME, wattage, wattage, wattage]  */
    var items=[
    ['Dishwasher',2000,2500,3000],
    ['Microwave Oven',1400,1500,1600],
    ['Desk Lamp',60,75,100]
    // etc.
    ],
    /* this array contains various prices */
    prices=[
    '0.07',
    '0.08',
    '0.09'
    // etc.
    ];
    
    /* this function makes a shorthand for document.getElementById(id) */
    function doc(objID){var obj=document.getElementById(objID);return obj;}
    
    function buildSelects(){
    /* these are shorthands for shorthands lol this way we make the script be not that complicated */
    var tab=doc('tab'),calc=doc('calc'),item=doc('item'),wtg=doc('wtg'),utime=doc('utime'),dd=doc('dd'),cost=doc('cost'),
    alt_item=doc('alt_item'),alt_wtg=doc('alt_wtg'),alt_dd=doc('alt_dd'),alt_cost=doc('alt_cost'),result=doc('result');
    /* this tries to make rouned corners for the main table and does nothing if your browser doesn't know what 'border-radius' is */
    try{tab.style.borderRadius='10px';}catch(e){}
    /* this line cuts off all options from every select excepting the first option which is just a 'header' */
    item.options.length=wtg.options.length=utime.options.length=dd.options.length=cost.options.length=1;
    /* this line removes any result text and restores starting result text */
    result.innerHTML='Result goes here';
    /* this means that the buildSelects() function is going to be executed on every form reset */
    calc.onreset=buildSelects;
    /* these loops add options to certain selects */
    for(var i in items){item.options[item.options.length]=new Option(items[i][0],items[i][0]);}
    for(var h=1;h<25;h++){utime.options[utime.options.length]=new Option(h,h);}
    for(var d=1;d<32;d++){dd.options[dd.options.length]=new Option(d,d);}
    for(var p in prices){cost.options[cost.options.length]=new Option(prices[p],prices[p]);}
    
    /* when the first select changed */
    item.onchange=function(){
    /* this removes focus from the select */
    this.blur();
    /* this gets the value of the selected option */
    var val=this.options[this.selectedIndex].value;
    /* this puts the selected option value in the text field below this select */
    alt_item.value=val;
    /* restore result starting text */
    result.innerHTML='Result goes here';
    /* if the 'header' option selected this line resets the form and stops the function from further executing */
    if(val==''){calc.reset();return;}
    /* if item selected */
    else{
    /* we create a temp array (a kind of shorthand) to store certain items subarray */
    var temp=items[this.selectedIndex-1];
    /* this removes all options from WATTAGE excepting 'header' */
    wtg.options.length=1;
    /* rebuild WATTAGE options for the selected item */
    for(var i=1;i<temp.length;i++){wtg.options[wtg.options.length]=new Option(temp[i],temp[i]);};
    }
    }
    /* this describes whats going on when WATTAGE, TIME, DAY or COST selects change */
    wtg.onchange=utime.onchange=dd.onchange=cost.onchange=function(){this.blur();try{result.innerHTML='Result goes here';doc('alt_'+this.id).value=this.options[this.selectedIndex].value;}catch(e){}}
    }
    /* calculation itself */
    function doCalc(){
    /* shorthands for the form elements */
    var alt_item=doc('alt_item'),alt_wtg=doc('alt_wtg'),utime=doc('utime'),alt_dd=doc('alt_dd'),alt_cost=doc('alt_cost'),result=doc('result'),
    /* this Regular Expression checks if the given text field value contains only digits and maybe a dot between these digits */
    dig=/^[\d]{1,}[\.]*[\d]*$/m;
    /* here we test the text fields for WATTAGE, TIME, DAYS and COST and if all these fields' format is OK we do calculation */
    if(dig.test(alt_wtg.value)&&dig.test(utime.value)&&dig.test(alt_dd.value)&&dig.test(alt_cost.value)){
    var kw=new Number(alt_wtg.value)/1000;
    result.innerHTML='<center><p style="width:250px;text-align:left"><b>Item:</b>&nbsp;&nbsp;&nbsp;'+alt_item.value+'<br /><b>Wattage:</b>&nbsp;&nbsp;&nbsp;'+kw+'kW<br /><b>Used:</b>&nbsp;&nbsp;&nbsp;'+utime.value+' hrs per a day<br /><b>Days of use:</b>&nbsp;&nbsp;&nbsp;'+alt_dd.value+'<br /><br />'
    result.innerHTML+='<b>Total cost</b> is $'+(kw*new Number(utime.value)*new Number(alt_dd.value)*new Number(alt_cost.value)).toFixed(2)+'</p></center>';
    }
    /* if format check fails we inform the user that he is a dumbass */
    else{result.innerHTML='<span style="color:Crimson;">Wrong data given</span>';}
    }
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    May 2012
    Posts
    8
    Thank you but where can I find advance tutorials.. I looked everywhere!

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    right here at this forum! every day new people come and ask their questions. all you need is just read the answers and/or try to help them yourself. there are many high skilled professional coders over here (not like me, i'm just an amateur) and they help newbies. i can't imagine any better tutorial. if you need a reference just type 'javascript reference' in google.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  8. #8
    Join Date
    May 2012
    Posts
    8
    Ur pro not a amature -_-

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles