Thread: Calculate Square roots, exponents, and percentages?

1. Registered User
Join Date
Aug 2013
Posts
79

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

2. Show some code.

3. Registered User
Join Date
Aug 2013
Posts
79
Code:
```<!--Niely Projects - Calculator; All rights Reserved to Nielyboyken. http://www.officialniely.tk copying is piracy!!! -->
<html>
<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;
width:31px;
height:23px;
}
.rowright {
background-color:#FF0000;
border: solid 2px;
width:30px;
height:25px;
}
.row2 {
background-color:#996600;
width:30px;
height:30px;
}
#clear {
background-color:#FFFF00;
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>
<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. 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:
```<!--
http://www.officialniely.tk copying is piracy!!!
-->
<html>
<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;
width:31px;
height:23px;
}
.rowright {
background-color:#FF0000;
border: solid 2px;
width:30px;
height:25px;
}
.row2 {
background-color:#996600;
width:30px;
height:30px;
}
#clear {
background-color:#FFFF00;
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:

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>

<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. Registered User
Join Date
Aug 2013
Posts
79
I tried a lot of things but percentages, exponents and square roots are too complex...

6. 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. Registered User
Join Date
Aug 2013
Posts
79

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. 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:
```<!--
http://www.officialniely.tk copying is piracy!!!
-->
<html>
<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;
width:31px;
height:23px;
}
.rowright {
background-color:#FF0000;
border: solid 2px;
width:30px;
height:25px;
}
.row2 {
background-color:#996600;
width:30px;
height:30px;
}
#clear {
background-color:#FFFF00;
width:30px;
height:30px;
}
#send {
background-image: url('');
height:82px;
width:70px;
}
#bottomrow { position:Relative; left:-17px; }
</style>

<script type="text/javascript">
// From:

// 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>

<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>```

9. 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.
Last edited by JMRKER; 10-31-2013 at 10:08 PM.

10. Registered User
Join Date
Aug 2013
Posts
79
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. 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.

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
•

"

"

X vBulletin 4.2.2 Debug Information

• Page Generation 0.11388 seconds
• Memory Usage 2,992KB
• Queries Executed 13 (?)
Template Usage (35):
• (6)bbcode_code
• (1)bbcode_html
• (2)bbcode_quote
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (11)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (11)postbit
• (11)postbit_onlinestatus
• (11)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (26):
• ./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/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (71):
• init_startup
• friendlyurl_resolve_class
• 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
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete