What language would be the best for making a simple web-based calculator that calculated as you typed?

Question

I have a simple calculator that takes base-10 numbers and makes them base-64:

<!DOCTYPE php> 
<html>
<head>
</head>
<body> 
<?php echo "Hello! Let's make an annotag!" ?>
<br/> 
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<label for="number">Enter your book's ISBN:</label> 
<input type="text" id="isbn" name="isbn" /> 
<input type="submit" value="submit" name="submit" /> 
<label for="number">Enter your book code:</label> 
<input type="text" id="bookCode" name="bookCode" /> 
<input type="submit" value="submit" name="submit" /> 
</form> 
<?php 
$isbn=$_POST['isbn']; 
$bookCode=$_POST['bookCode']; 
$br='<br/>'; //saves a little typing
echo 'ISBN: '.$isbn.$br;  
//these functions adapted from http://stackoverflow.com/questions/4964197/converting-a-number-base-10-to-base-62-a-za-z0-9 
function toBase($num, $b=64) {
  $base='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_';
  $r = $num  % $b ;
  $res = $base[$r];
  $q = floor($num/$b);
  while ($q) {
    $r = $q % $b;
    $q =floor($q/$b);
    $res = $base[$r].$res;
  }
  return $res;
}

function to10( $num, $b=64) {
  $base='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_';
  $limit = strlen($num);
  $res=strpos($base,$num[0]);
  for($i=1;$i<$limit;$i++) {
    $res = $b * $res + strpos($base,$num[$i]);
  }
  return $res;
}
if (isset($isbn)) { 
    echo 'Your bookcode is:  '.toBase($isbn).$br; 
}
if (isset($bookCode)) { 
    echo 'Your ISBN is: '.to10($bookCode).$br; 
}
?>
</body> 
</html>

What I'd like to do is make it so that the calculation was performed as the user typed, so that there could be two input boxes, and any change in one would effect a change in the other. Can I do that with php, or do I have to use something more dynamic?

javascript is probably the best way to go if you want real-time client interaction. — Orangepill, May 28 '13 at 05:23
You may find this interesting: http://stackoverflow.com/a/13840431/476 — deceze, May 28 '13 at 05:25
any language that runs on the client side, might it be flash, java, javascript, or even vbscript (IE only). Due to support, the best would be javascript. In the same sense, there might not be javascript support (unlikely), and then you can only go for the post and return. — Dave Chen, May 28 '13 at 05:26

score 2 · Answer 1 · answered May 28 '13 at 05:26

2

JavaScript in the main language used today in browsers. start here:

Getting Started with JavaScript on MDN

JavaScript Calculator

answered May 28 '13 at 05:26

Dory Zidon

10,497
2
25
39

morning dude, no need to be snappy..you can just suggest.. – Dory Zidon May 28 '13 at 05:31
sorry it's like midnight for me, +1 :) – Dave Chen May 28 '13 at 05:31
lol np..here is early morning :) – Dory Zidon May 28 '13 at 05:37

score 1 · Answer 2 · answered May 28 '13 at 05:26

1

For the best user experience javascript would be the way to go. To see how easy it is take a look here

answered May 28 '13 at 05:26

Orangepill

24,500
3
42
63

score 1 · Answer 3 · answered May 28 '13 at 05:26

1

I've got two things to comment right now.

If you want the calculator to be dynamic, do use Javascript and AJAX in your codes.
If you do not wish for a dynamic page, do stick to mere PHP and HTML as well as CSS.

Hope that explains.

answered May 28 '13 at 05:26

AJAX for a *calculator*? Seems a little overkill... :P – deceze May 28 '13 at 06:29
AJAX as in for the dynamics of the page. – May 28 '13 at 06:33

score 1 · Answer 4 · answered May 28 '13 at 05:44

Another version of calculator with some extra buttons

   <SCRIPT LANGUAGE="JavaScript">
    function addChar(input, character) {
    if(input.value == null || input.value == "0")
    input.value = character
    else
    input.value += character
    }
    function cos(form) {
    form.display.value = Math.cos(form.display.value);}
    function sin(form) {
    form.display.value = Math.sin(form.display.value);}
    function tan(form) {
    form.display.value = Math.tan(form.display.value);}
    function sqrt(form) {
    form.display.value = Math.sqrt(form.display.value);}
    function ln(form) {
    form.display.value = Math.log(form.display.value);}
    function exp(form) {
    form.display.value = Math.exp(form.display.value);}
    function sqrt(form) {
    form.display.value = Math.sqrt(form.display.value);}
    function deleteChar(input) {
    input.value = input.value.substring(0, input.value.length - 1)
    }
    function changeSign(input) {
    substring
    if(input.value.substring(0, 1) == "-")
    input.value = input.value.substring(1, input.value.length)
    else
    input.value = "-" + input.value
    }
    function compute(form)  {
    form.display.value = eval(form.display.value)}
    function square(form)  {
    form.display.value = eval(form.display.value) *
    eval(form.display.value)}
    function checkNum(str)  {
    for (var i = 0; i < str.length; i++) {
    var ch = str.substring(i, i+1)
    if (ch < "0" || ch > "9") {
    if (ch != "/" && ch != "*" && ch != "+" && ch !=
    "-" && ch != "."
    && ch != "(" && ch!= ")") {
    alert("invalid entry!")
    return false
             }
          }
       }
    return true
    }
    </SCRIPT>


    <BODY>

    <CENTER>
    <FORM>
    <input name="display" value="0" size="25"></td>
    <br>
    <input type="button" value="   exp  " onClick="if (checkNum(this.form.display.value)) { 
    exp(this.form) }">
    <input type="button" value="    7    " onClick="addChar(this.form.display, '7')">
    <input type="button" value="    8    " onClick="addChar(this.form.display, '8')">
    <input type="button" value="    9    " onClick="addChar(this.form.display, '9')">
    <input type="button" value="    /    " onClick="addChar(this.form.display, '/')">
    <br>
    <input type="button" value="   ln    " onClick="if (checkNum(this.form.display.value)) { 
    ln(this.form) }">
    <input type="button" value="    4    " onClick="addChar(this.form.display, '4')">
    <input type="button" value="    5    " onClick="addChar(this.form.display, '5')">
    <input type="button" value="    6    " onClick="addChar(this.form.display, '6')">
    <input type="button" value="    *    " onClick="addChar(this.form.display, '*')">
    <br>
    <input type="button" value="   sqrt  " onClick="if (checkNum(this.form.display.value)) {
    cos(this.form) }">
    <input type="button" value="    1    " onClick="addChar(this.form.display, '1')">
    <input type="button" value="    2    " onClick="addChar(this.form.display, '2')">
    <input type="button" value="    3    " onClick="addChar(this.form.display, '3')">
    <input type="button" value="    -    " onClick="addChar(this.form.display, '-')">
    <br>
    <input type="button" value="   sq    " onClick="if (checkNum(this.form.display.value)) { 
    square(this.form) }">
    <input type="button" value="    0    " onClick="addChar(this.form.display, '0')"> 
    <input type="button" value="    .    " onClick="addChar(this.form.display, '.')"> 
    <input type="button" value="   +/-   " onClick="changeSign(this.form.display)">
    <input type="button" value="    +    " onClick="addChar(this.form.display, '+')">
    <br>
    <input type="button" value="    (    " onClick="addChar(this.form.display, '(')"> 
    <input type="button" value="   cos   " onClick="if (checkNum(this.form.display.value)) { 
    cos(this.form) }">
    <input type="button" value="   sin   " onClick="if (checkNum(this.form.display.value)) {
    sin(this.form) }">
    <input type="button" value="   tan   " onClick="if (checkNum(this.form.display.value)) { 
    tan(this.form) }">
    <input type="button" value="    )    " onClick="addChar(this.form.display, ')')"> 
    <br>
    <input type="button" value="   Clear       " onClick="this.form.display.value = 0 ">
    <input type="button" value="   Back Space  " onClick="deleteChar(this.form.display)">
    <input type="button" value="   Enter       " name="enter" onClick="if (checkNum(this.form.display.value)) { 
    compute(this.form) }">
    </FORM>
    </CENTER>

score 0 · Answer 5 · answered May 28 '13 at 05:35

Use javascript its a goog language.
Here is a javascript calc as Dorn Zidon said.
JAVASCRIPT CALC
Javascript is better in some way than php.Javascript is client side script language
so it can not burden on your server.As well as javascript has some disadvantages are
also persent like some old browser does not support javascript and some other people
un-active the javascript own browser.If one of them is occur them your clac does not work.

What language would be the best for making a simple web-based calculator that calculated as you typed?

5 Answers5