<?php
$form = "";
$solution = "display:none;";
if(isset($_POST["operand1"], $_POST["operand2"], $_POST["operation"])) {
switch ($_POST["operation"]) {
case 'Add':
$calc = $_POST["operand1"] + $_POST["operand2"];
$operand1 = "1st Addend is ".$_POST["operand1"];
$operand2 = "2nd Addend is ".$_POST["operand2"];
$result = "The Sum is ".$calc;
break;
case 'Subtract':
$calc = $_POST["operand1"] - $_POST["operand2"];
$operand1 = "Minuend is ".$_POST["operand1"];
$operand2 = "Subtrahend is ".$_POST["operand2"];
$result = "The Difference is ".$calc;
break;
case 'Multiply':
$calc = $_POST["operand1"] * $_POST["operand2"];
$operand1 = "Multiplicand is ".$_POST["operand1"];
$operand2 = "Multiplier is ".$_POST["operand2"];
$result = "The Product is ".$calc;
break;
case 'Divide':
$calc = $_POST["operand1"] / $_POST["operand2"];
$operand1 = "Dividend is ".$_POST["operand1"];
$operand2 = "Divisor is ".$_POST["operand2"];
$result = "The Qoutient is ".$calc;
break;
}
$form = "display:none;";
$solution = "";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Online Arithmetic Calculator in PHP</title>
<style>
*, html {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
h1 {
font-size: 40px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
margin-bottom: 20px;
text-align: center;
}
label {
font-size: 20px;
}
.container {
margin-top: 15vh;
padding: 10px;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
}
.wrapper {
display: block;
margin: 0 auto 10px;
width: 300px;
}
input {
padding: 5px;
font-size: 14px;
}
table {
margin-left: 30px;
}
.operations table td label,
.operations table td input {
cursor: pointer;
}
button {
padding: 8px;
width: 90px;
}
.border {
padding: 50px;
border: 1px solid #000;
}
.border h2 {
font-size: 25px;
margin-bottom: 5px;
}
.border p {
margin-bottom: 5px;
}
</style>
</head>
<body>
<main class="container">
<div style="<?= $form; ?>">
<h1>My Online Arithmetic Calculator in PHP</h1>
<h3 align='center'> Jake Rodriguez Pomperada, MAED-IT,MIT </h3>
<br><br>
<form action="" method="post">
<div class="wrapper">
<label for="">Operand #1: </label>
<input type="number" name="operand1" placeholder="Enter a number" required>
</div>
<div class="wrapper">
<label for="">Operand #2: </label>
<input type="number" name="operand2" placeholder="Enter a number" required>
</div>
<div class="wrapper operations">
<label>Choose Operation:</label>
<table>
<tr>
<td>
<input type="radio" name="operation" id="Add" value="Add" checked>
<label for="Add">- Add</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="operation" id="Subtract" value="Subtract">
<label for="Subtract">- Subtract</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="operation" id="Multiply" value="Multiply">
<label for="Multiply">- Multiply</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="operation" id="Divide" value="Divide">
<label for="Divide">- Divide</label>
</td>
</tr>
</table>
</div>
<div class="wrapper">
<button type="submit">Submit</button>
</div>
</form>
</div>
<div class="border" style="<?= $solution; ?>">
<h2>Hello!</h2>
<p>You sent the following values:</p>
<p><?= $operand1; ?></p>
<p><?= $operand2; ?></p>
<p><?= $result; ?></p>
</div>
</main>
</body>
</html>
.png)
.png)
