How To Create A Calculator In PHP
In this php tutorial, we will see how to create a simple web-based calculator using PHP and JavaScript.
This application allow users to do Basic Operations (+, -, /, *, √, ^):
Addition (+): It can add two numbers together.
Subtraction (-): It can subtract one number from another.
Multiplication (*): It can multiply two numbers.
Division (/): It can divide one number by another. It also checks for division by zero.
Square Root (√): It can calculate the square root of a single number.
Power (^): It can raise one number to the power of another.
Project Source Code:
<?php
$result = "";
$error_msg = "";
if(isset($_POST['num1']) && isset($_POST['num2']) && isset($_POST['operation']))
{
// Retrieve user's input from the form
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
$operation = $_POST['operation'];
// Validate user's input
if(!is_numeric($num1) || !is_numeric($num2) && !($operation == "sqrt"))
{
$error_msg = "Please enter valid numbers";
}
elseif($operation == "div" && $num2 == 0)
{
$error_msg = "Cannot divide by zero";
}
else
{
// Perform the calculation based on the user's input
switch($operation)
{
case "add":
$result = $num1 + $num2;
break;
case "sub":
$result = $num1 - $num2;
break;
case "mul":
$result = $num1 * $num2;
break;
case "div":
$result = $num1 / $num2;
break;
case "sqrt":
$result = sqrt($num1);
break;
case "pwr":
$result = pow($num1, $num2);
break;
default:
$error_msg = "Invalid operation";
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="UTF-8">
<style>
*{ box-sizing:border-box; }
body{ background-color:#f2f2f2; font-family:Arial, sans-serif; font-size:14px; }
#container{ width:400px; margin:50px auto; padding:20px; background-color:#fefefe;
border-radius:5px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); }
h1{ text-align:center; margin-bottom:25px; }
input[type=text]{ width:100%; padding:10px; border:none; border-radius:3px;
margin-bottom:20px; font-size:16px; color:#333; background-color:#f2f2f2;
box-shadow:inset 0px 1px 2px rgba(0,0,0,0.1); }
label{ display:inline-block; width:45%; font-size:16px; padding:10px; }
input[type=submit]{ display:inline-block; padding:10px 20px; border:none; border-radius:3px; width:100%;
cursor:pointer; background-color:#4caf50; color:#fff; font-size:16px;
transition: all 0.3s ease; }
input[type=submit]:hover{ background-color:#3e8e41; }
p{ margin-top:20px; font-size:24px; font-weight:bold; color:#fff; text-align:center; }
.result{ background-color:#999; border:1px solid #555; padding:10px;
margin:10px 0; text-align:center; }
</style>
</head>
<body>
<div id="container">
<h1>PHP Calculator</h1>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
<input type="text" name="num1" id="num1" placeholder="Enter first number">
<input type="text" name="num2" id="num2" placeholder="Enter second number">
<br><br>
<label><input type="radio" name="operation" value="add"> Addition(+)</label>
<label><input type="radio" name="operation" value="sub"> Substraction(-)</label>
<label><input type="radio" name="operation" value="mul"> Multiplication(*)</label>
<label><input type="radio" name="operation" value="div"> Division(/)</label>
<label><input type="radio" name="operation" value="sqrt"> Square Root(√)</label>
<label><input type="radio" name="operation" value="pwr"> Power(^)</label>
<br>
<div><p style="color:red; font-size:18px; " ><?php echo $error_msg; ?></p></div>
<br>
<input type="submit" value="Calculate">
</form>
<div class="result">
<p>Result: <span id="result" style="cursor:pointer;"><?php echo $result; ?></span></p>
</div>
</div>
<script>
const result = document.getElementById("result");
const num1 = document.getElementById("num1");
result.addEventListener('click', function(){
num1.value = result.innerHTML;
});
</script>
</body>
</html>
Code Explanation:
PHP Code: - Defines two variables, $result and $error_msg, for displaying calculation results and error messages.
-Checks for the presence of 'num1', 'num2', and 'operation' values in the POST request.
- Retrieves and processes these values, including validation and calculation based on user input.
- Validates whether 'num1' and 'num2' are numeric and if the 'operation' is valid.
- Performs calculations based on the selected operation (addition, subtraction, multiplication, division, square root, or power), assigning the result to $result.
- In case of validation errors, assigns an error message to $error_msg.
- Finally, the calculated result or error message is displayed on the HTML page.
JavaScript Code: A simple JavaScript function is used to make the result clickable.
When clicked, it copies the result to the 'num1' input field. This could be used for further calculations.
OUTPUT:
Download Projects Source Code