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.