www.webdeveloper.com
Results 1 to 11 of 11

Thread: Calculate Square roots, exponents, and percentages?

  1. #1
    Join Date
    Aug 2013
    Posts
    57

    Calculate Square roots, exponents, and percentages?

    Hello

    I'm creating a HTML, CSS & JavaScript virtual calculator.

    It works like a calculator in real life.
    You touch buttons, what you want to calculate etc etc.

    It's already working perfect for +,-,*, & /.

    Now I only want to know how to create a function so people can calculate percentages, square roots, and exponents.

    For example: Math.pow (X, Y)

    How do I make an option so people can chose X and Y whatever they want with my buttons?

    I'm almost ready only need those three.

    (Remember: It works like a real calculator ).
    (Click button for basenumber > click exponent button > choose exponent with button > enter)

    Thanks for reading,

    Niely

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Show some code.

  3. #3
    Join Date
    Aug 2013
    Posts
    57
    Code:
    <!--Niely Projects - Calculator; All rights Reserved to Nielyboyken. http://www.officialniely.tk copying is piracy!!! -->
    <html>
    <head>
    <title>Niely Projects - Calculator</title>
    <style type="text/css">
    #box {
    	height:500px;
    	width:300px;
    	background-color:#336600;
    	border-color:#CD9900;
    	border:solid 2px;
    }
    #display {
    	text-align:center;
    }
    #displayscreen {
    	background-color:#CDCDCD;
    	width:250px;
    	height:50px;
    	color:#333333;
    	font-size:22px;
    	font-family:Ti83pc,Ti73pc,Ti92Pluspc,Ti86pc,Ti89pc,Ti83pluspc,Ti-92p Mini Sans,Ti-83p Mini Sans,TI Uni, System, Courier New, Arial;
    }
    .keys {
    	position:relative; top:18px; left:5px;
    	text-align:Center;
    }
    .row1 {
    color:#FFFFFF;
    background-color:#009900;
    border:solid 1px;
    border-radius:4px;
    width:31px;
    height:23px;
    }
    .rowright {
    background-color:#FF0000;
    border: solid 2px;
    border-radius:5px;
    width:30px;
    height:25px;
    }
    .row2 {
    background-color:#996600;
    border-radius:2px;
    width:30px;
    height:30px;
    }
    #clear {
    background-color:#FFFF00;
    border-radius:2px;
    width:30px;
    height:30px;
    }
    #send {
    background-image: url('http://i.minus.com/ibt1gDjGqg1Cci.png');
    height:82px;
    width:70px;
    }
    #bottomrow {
    position:Relative; left:-17px;
    }
    
    </style>
    <script type="text/javascript">
    function c(val)
    {
    document.getElementById("displayscreen").value=val;
    }
    function v(val)
    {
    document.getElementById("displayscreen").value+=val;
    }
    function e() 
    { 
    try 
    { 
      c(eval(document.getElementById("displayscreen").value)) 
    } 
    catch(e) 
    {
      c('Error') 
    } 
    }  
    
    
    </script>
    </head>
    <body>
    <div id="box">
    <div id="display"><input type="text" readonly size="17" id="displayscreen"></div>
    <div class="keys">
    <p><input type="button" class="row1" value="mrc" onclick='c'>
    <input type="button" class="row1" value="m-" onclick='c'>
    <input type="button" class="row1" value="m+" onclick='c'>
    <input type="button" class="rowright" value="/" onclick='v("/")'></p>
    <p><input type="button" class="row2" value="7" onclick='v("7")'>
    <input type="button" class="row2" value="8" onclick='v("8")'>
    <input type="button" class="row2" value="9" onclick='v("9")'>
    <input type="button" class="rowright" value="*" onclick='v("*")'></p>
    <p><input type="button" class="row2" value="4" onclick='v("4")'>
    <input type="button" class="row2" value="5" onclick='v("5")'>
    <input type="button" class="row2" value="6" onclick='v("6")'>
    <input type="button" class="rowright" value="-" onclick='v("-")'></p>
    <p><input type="button" class="row2" value="1" onclick='v("1")'>
    <input type="button" class="row2" value="2" onclick='v("2")'>
    <input type="button" class="row2" value="3" onclick='v("3")'>
    <input type="button" class="rowright" value="+" onclick='v("+")'></p>
    <p id="bottomrow"><input type="button" class="row2" value="." onclick='v(".")'>
    <input type="button" class="row2" value="0" onclick='v("0")'>
    <input type="button" id="Clear" value="C" onclick='c("")'></p>
    <input type="button" id="send" onclick='e()'>
    
    </div>
    </div>
    </body>
    </html>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb

    Take a look at the logic added for the "memory" keys (+, -, c, r) with the global variable 'memory'.

    Using similar logic you can create the square, squareroot, exponent and log logic
    with the appropriate Math.pow(x,y) command.

    Post back if you have problems.

    Code:
    <!--
     Niely Projects - Calculator; All rights Reserved to Nielyboyken. 
     http://www.officialniely.tk copying is piracy!!!
    -->
    <html>
    <head>
    <title>Niely Projects - Calculator</title>
    
    <style type="text/css">
    #box {
      height:500px;
      width:300px;
      background-color:#336600;
      border-color:#CD9900;
      border:solid 2px;
    }
    #display { text-align:center; }
    #displayscreen {
      background-color:#CDCDCD;
      width:250px;
      height:50px;
      color:#333333;
      font-size:22px;
      font-family:Ti83pc, Ti73pc, Ti92Pluspc, Ti86pc, Ti89pc, Ti83pluspc,
                  Ti-92p Mini Sans, Ti-83p Mini Sans, TI Uni, System, Courier New, Arial;
    }
    .keys {
      position:relative; top:18px; left:5px;
      text-align:Center;
    }
    .row1 {
      color:#FFFFFF;
      background-color:#009900;
      border:solid 1px;
      border-radius:4px;
      width:31px;
      height:23px;
    }
    .rowright {
      background-color:#FF0000;
      border: solid 2px;
      border-radius:5px;
      width:30px;
      height:25px;
    }
    .row2 {
      background-color:#996600;
      border-radius:2px;
      width:30px;
      height:30px;
    }
    #clear {
      background-color:#FFFF00;
      border-radius:2px;
      width:30px;
      height:30px;
    }
    #send {
      background-image: url('http://i.minus.com/ibt1gDjGqg1Cci.png');
      height:82px;
      width:70px;
    }
    #bottomrow { position:Relative; left:-17px; }
    </style>
    
    <script type="text/javascript">
    // From:
    // http://www.webdeveloper.com/forum/showthread.php?285669-Calculate-Square-roots-exponents-and-percentages&p=1294227#post1294227
    
    function c(val) { document.getElementById("displayscreen").value=val; }
    function v(val) { document.getElementById("displayscreen").value+=val; }
    function e() { 
      try { c(eval(document.getElementById("displayscreen").value)) } 
      catch(e) { c('Error') } 
    }  
    
    var memory = 0;
    function m(act) {
      switch (act) {
        case 'c': memory = 0; break;
        case 'r': document.getElementById('displayscreen').value = memory; break;
        case '+': memory += Number(document.getElementById('displayscreen').value); break;
        case '-': memory -= Number(document.getElementById('displayscreen').value); break;
      }
    }
    </script>
    
    </head>
    <body>
    <div id="box">
     <div id="display"><input type="text" readonly size="17" id="displayscreen"></div>
     <div class="keys">
      <p><input type="button" class="row1" value="mc" onclick='m("c")'>
         <input type="button" class="row1" value="mr" onclick='m("r")'>
         <input type="button" class="row1" value="m-" onclick='m("-")'>
         <input type="button" class="row1" value="m+" onclick='m("+")'></p>
    
      <p><input type="button" class="row2" value="7" onclick='v("7")'>
         <input type="button" class="row2" value="8" onclick='v("8")'>
         <input type="button" class="row2" value="9" onclick='v("9")'>
         <input type="button" class="rowright" value="/" onclick='v("/")'></p>
      <p><input type="button" class="row2" value="4" onclick='v("4")'>
         <input type="button" class="row2" value="5" onclick='v("5")'>
         <input type="button" class="row2" value="6" onclick='v("6")'>
         <input type="button" class="rowright" value="*" onclick='v("*")'></p>
      <p><input type="button" class="row2" value="1" onclick='v("1")'>
         <input type="button" class="row2" value="2" onclick='v("2")'>
         <input type="button" class="row2" value="3" onclick='v("3")'>
         <input type="button" class="rowright" value="-" onclick='v("-")'></p>
      <p><input type="button" class="row2" value="." onclick='v(".")'>
         <input type="button" class="row2" value="0" onclick='v("0")'>
         <input type="button" id="Clear" value="C" onclick='c("")'>
         <input type="button" class="rowright" value="+" onclick='v("+")'></p>
    
         <input type="button" id="send" onclick='e()'>
     </div>
    </div>
    </body>
    </html>

  5. #5
    Join Date
    Aug 2013
    Posts
    57
    I tried a lot of things but percentages, exponents and square roots are too complex...

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Why?

    Show what you have tried that does not work. Make very simple scripts to begin.

    Make an attempt. You will never learn to do it on your own of you always have someone else do it for you.

  7. #7
    Join Date
    Aug 2013
    Posts
    57
    I added:

    HTML:
    Code:
    <input type="button" class="rowright" value="%" onclick='p("")'>
    JS:
    Code:
    function p()
    {
    document.getElementById("displayscreen").value%=val;
    }
    Button doesn't even appear.

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,290
    Here is your percentages, its not pretty but it does the job.

    I also added Pi but have not fully checked it, something you will need to test.

    HTML Code:
    <!--
     Niely Projects - Calculator; All rights Reserved to Nielyboyken. 
     http://www.officialniely.tk copying is piracy!!!
    -->
    <html>
    <head>
    <title>Niely Projects - Calculator</title>
    
    <style type="text/css">
    #box {
      height:500px;
      width:300px;
      background-color:#336600;
      border-color:#CD9900;
      border:solid 2px;
    }
    #display { text-align:center; }
    #displayscreen {
      background-color:#CDCDCD;
      width:250px;
      height:50px;
      color:#333333;
      font-size:22px;
      font-family:Ti83pc, Ti73pc, Ti92Pluspc, Ti86pc, Ti89pc, Ti83pluspc,
                  Ti-92p Mini Sans, Ti-83p Mini Sans, TI Uni, System, Courier New, Arial;
    }
    .keys {
      position:relative; top:18px; left:5px;
      text-align:Center;
    }
    .row1 {
      color:#FFFFFF;
      background-color:#009900;
      border:solid 1px;
      border-radius:4px;
      width:31px;
      height:23px;
    }
    .rowright {
      background-color:#FF0000;
      border: solid 2px;
      border-radius:5px;
      width:30px;
      height:25px;
    }
    .row2 {
      background-color:#996600;
      border-radius:2px;
      width:30px;
      height:30px;
    }
    #clear {
      background-color:#FFFF00;
      border-radius:2px;
      width:30px;
      height:30px;
    }
    #send {
      background-image: url('');
      height:82px;
      width:70px;
    }
    #bottomrow { position:Relative; left:-17px; }
    </style>
    
    <script type="text/javascript">
    // From:
    // http://www.webdeveloper.com/forum/showthread.php?285669-Calculate-Square-roots-exponents-and-percentages&p=1294227#post1294227
    
    window.onload = function(){
    	// grab the elements needed.
    	
    	display = document.getElementById("displayscreen");
    	
    }
    
    function c(val) { display.value=val; }
    function v(val) {
    	switch(val){
    		case "%": // this will be the value seperated at the operator
    			var s = ["+","-","*","/"];
    			while( s.length ){
    				sv=s.shift();
    				if( display.value.indexOf(sv)>0 ){ 
    					var tmp = display.value.split(sv);
    					display.value = tmp[0];
    					display.value = (display.value-0).percent( tmp[1]-0, sv );
    					break;
    					}
    				}
    		break;
    		
    		case "Pi": display.value += Math.PI; break;
    		case "RND": display.value += Math.random( new Date().getTime() ); break;
    		
    	default:
    	 display.value+=val;
    	 }
    }
    function e() { 
      try { c(eval(display.value)); } 
      catch(e) { c('Error') } 
    }  
    
    var memory = 0;
    function m(act) {
      switch (act) {
        case 'mc': memory = 0; break;
        case 'mr': display.value = memory; break;
        case 'm+': memory += display.value - 0; break;
        case 'm-': memory -= display.value - 0; break;
      }
    }
    
    Number.prototype.percent = function(percentageFactor,op){
    	switch(op){
    		case "+": return  this + (( this * percentageFactor )/100); break;
    		case "-": return  this - (( this * percentageFactor )/100); break;
    		case "*": return  this * (( this * percentageFactor )/100); break;
    		case "/": return  this / (( this * percentageFactor )/100); break;
    		}
    }
    
    </script>
    
    </head>
    <body>
    <div id="box">
     <div id="display"><input type="text" readonly size="17" id="displayscreen"></div>
     <div class="keys">
      <p><input type="button" class="row1" value="mc" onclick='m(this.value)'>
         <input type="button" class="row1" value="mr" onclick='m(this.value)'>
         <input type="button" class="row1" value="m-" onclick='m(this.value)'>
         <input type="button" class="row1" value="m+" onclick='m(this.value)'></p>
    
      <p><input type="button" class="row2" value="7" onclick='v(this.value)'>
         <input type="button" class="row2" value="8" onclick='v(this.value)'>
         <input type="button" class="row2" value="9" onclick='v(this.value)'>
         <input type="button" class="rowright" value="/" onclick='v(this.value)'><input type="button" class="rowright" value="%" onclick='v(this.value)'></p>
      <p><input type="button" class="row2" value="4" onclick='v(this.value)'>
         <input type="button" class="row2" value="5" onclick='v(this.value)'>
         <input type="button" class="row2" value="6" onclick='v(this.value)'>
         <input type="button" class="rowright" value="*" onclick='v(this.value)'><input type="button" class="rowright" value="RND" onclick='v(this.value)'></p>
      <p><input type="button" class="row2" value="1" onclick='v(this.value)'>
         <input type="button" class="row2" value="2" onclick='v(this.value)'>
         <input type="button" class="row2" value="3" onclick='v(this.value)'>
         <input type="button" class="rowright" value="-" onclick='v(this.value)'><input type="button" class="rowright" value="" onclick=''></p>
      <p><input type="button" class="row2" value="." onclick='v(this.value)'>
         <input type="button" class="row2" value="0" onclick='v(this.value)'>
         <input type="button" id="Clear" value="C" onclick='c("")'>
         <input type="button" class="rowright" value="+" onclick='v(this.value)'>
         <input type="button" class="rowright" value="Pi" onclick='v(this.value)'></p>
    
         <input type="button" id="send" onclick='e()'>
     </div>
    </div>
    </body>
    </html>
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Quote Originally Posted by Nielyboyken View Post
    I added:

    HTML:
    Code:
    <input type="button" class="rowright" value="%" onclick='p("")'>
    JS:
    Code:
    function p()
    {
    document.getElementById("displayscreen").value%=val;
    }
    Button doesn't even appear.
    Couple of problems...

    1. You are not passing an argument to the 'p' function
    2. %= is not a valid JS assignment.
    Last edited by JMRKER; 10-31-2013 at 10:08 PM.

  10. #10
    Join Date
    Aug 2013
    Posts
    57
    I think I go let it for what it is now, and continue my codecademy.com JS course.

    Here is your percentages, its not pretty but it does the job.

    I also added Pi but have not fully checked it, something you will need to test.
    Thank you very much!

    But I think I'd be more proud if I do it all myself.

    Thanks!

  11. #11
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,290
    Thats fine but you were looking for a simple answer but the actuality is its more work to achieve a simple task, perhaps if you understood the process more then you could code your own routine.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles