Calculate Square roots, exponents, and percentages?

• 10-31-2013, 07:58 AM
Nielyboyken
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)

Niely
• 10-31-2013, 09:22 AM
JMRKER
Show some code.
:)
• 10-31-2013, 10:20 AM
Nielyboyken
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>```
• 10-31-2013, 01:42 PM
JMRKER
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>```
• 10-31-2013, 04:14 PM
Nielyboyken
I tried a lot of things but percentages, exponents and square roots are too complex...
• 10-31-2013, 05:00 PM
JMRKER
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.
• 10-31-2013, 05:19 PM
Nielyboyken

HTML:
Code:

`<input type="button" class="rowright" value="%" onclick='p("")'>`
JS:
Code:

```function p() { document.getElementById("displayscreen").value%=val; }```
Button doesn't even appear.
• 10-31-2013, 09:28 PM
\\.\
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>```
• 10-31-2013, 10:04 PM
JMRKER
Quote:

Originally Posted by Nielyboyken

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.
• 11-01-2013, 05:03 AM
Nielyboyken
I think I go let it for what it is now, and continue my codecademy.com JS course. :)

Quote:

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-01-2013, 12:07 PM
\\.\
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.

X vBulletin 4.2.2 Debug Information

• Page Generation 0.12931 seconds
• Memory Usage 2,435KB
• Queries Executed 11 (?)
Template Usage (22):
• (6)bbcode_code_printable
• (1)bbcode_html_printable
• (2)bbcode_quote_printable
• (1)footer
• (1)gobutton
• (1)navbar_moderation
• (1)navbar_noticebit
• (2)option
• (1)spacer_close
• (1)spacer_open

Phrase Groups Available (3):
• global
• postbit
Included Files (19):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/class_bbcode_alt.php
• ./includes/class_bbcode.php
• ./includes/functions_bigthree.php
• ./includes/functions_notice.php

Hooks Called (41):
• init_startup
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• bbcode_fetch_tags
• bbcode_create
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates