Building an Advanced Calculator with vanilla PHP

In this post I go through the steps of building an advanced calculator with PHP. What makes it so advanced. Well it can do more than just add and subtract two numbers. Lets get to it.

Design

The calculator we build have all nine digits and the basic functions. We create a five by four grid using a table with the basic functions on the right. The top of the calculator has a history and a display bars.

So we have a table with different inputs creating this layout.

   <tr>
      <td style="width: 30px;"><input name="ce" type="submit" value="CE"/></td>
      <td style="width: 30px;"><input name="c" type="submit" value="C"/></td>
      <td style="width: 30px;"><input name="back" type="submit" value="←"/></td>
      <td style="width: 30px;"><button name="divide" type="submit" value="/">÷</button></td>
    </tr>
    <tr>
      <td><input type="submit" name="7" value="7"/></td>
      <td><input type="submit" name="8" value="8"/></td>
      <td><input type="submit" name="9" value="9"/></td>
      <td><input type="submit" name="minus" value="-"/></td>
    </tr>
    <tr>
      <td><input type="submit" name="4" value="4"/></td>
      <td><input type="submit" name="5" value="5"/></td>
      <td><input type="submit" name="6" value="6"/></td>
      <td><input type="submit" name="times" value="x"/></td>
    </tr>

Every button and input is of type submit. Every time you press the button the form submits.

Getting the user input

Every time the user presses a button we need to get what button was pressed. We check our super global $_POST to find out what happened.

if(isset($_POST)){
  if(isset($_POST['input'])){
    $input = json_decode($_POST['input']); // get previous user input
  }
  foreach ($_POST as $key => $value){
    if($key == 'equal'){
       $currentValue = calculateInput($input); // do calculations
       $input = [];
       $input[] = $currentValue;
    }else if($key == "c"){
      $input = [];
      $currentValue = 0;
    }else if($key == "ce"){
      array_pop($input);
    }elseif($key =='back'){
      $lastPointer = count($input) - 1;
      if(is_numeric($input[$lastPointer])){
        array_pop($input);
      }
    }else if($key != 'input'){
      $input[] = $value; // save user input
    }
  }
}

Whether or not you can tell there is alot going on in the code above. We are doing a few things I will list them below.

• Get previous user input data (we need to keep a record of the user input)
• Check for all the POSTED data
• Find out if the key is the equal symbol ( we need to take action here)
• Add to the input array (the input array is where we store user input)
• We have special cases that we need to check for like C and CE functions

The main thing to note is that the $value is being added to the input array. The input array contains our user input before the equal button is pressed.

A basic user input will then consists of numbers and symbols. In order to get the final figure, I had to loop through the array and filter the symbols and calculate the values.

Calculating for the Calculator

To calculate the user input we need to loop through the array but before we do this we need to convert our indivual numbers to whole numbers. What do I mean by this. If the user inputs two fives. This will be saved in our array as two separate fives. We need to make this number into 55.

We also have to do this for decimal points. If the user enters 2.0 we need to join these numbers together before proceeding.

So the code above does the following

• Checks if the current value is numeric or a point (.)
• When the value is numeric or a point concatenate the value
• If the value is not numeric save the $char variable to the $arr and clear the $char variable.
• At the end if the $char variable is not empty add the contents to the $arr array.

The $arr array is our new converted array. This is what we use to calculate the user input.

Now we need to calculate the user input since we have a properly formatted array we can proceed.

The code above does the following

• Check whether values is a number or a symbol
• If an action exists perform the action else set the current value
• Check the type of action to perform and performs it on the current value

The last value of $current will be our final output.

I explain the whole process of conversion and calculation in this short video.

So our calculator is working we can calculate a whole array of values.

Special Circumstances

So we have some special cases to note. The CE, C, backspace are special cases that we deal with according. I left out the plus/minus you can add that in. It might be more complicated than you think.

If the key press is C we clear the input and start from fresh. If the key pressed is CE we remove the last value in our user input. Finally if the key pressed is the BACK arrow we check to see if the value is numeric. If it is numeric we remove it with array_pop. BACK action only removes numbers.

Conclusion

Thats the end of our calculator. You can add more features to it. You can add history, make the plus/minus symbol work. You can also add error checking and validation.

The full video where I built this can be found below. The code is here.