Easily Create a Custom Calculator

In this tutorial I'll show you how to make a custom web-based calculator. You'll be able to copy and paste the code, and modify it to make your calculater work however you like. Here's an example of what you'll be able to do:

Hungry Piranha Demo Calculator
Pick a Number:
Multiply by This Number:
Subtract This Number:
The answer is:

I've chosen to use 3 values as demonstrated above. You can choose to use as many values or variables as you like, and any formula you want, to create limitless possibilities. All you'll need to do is copy the code below, paste it where you'd like the calculator to appear on your page, and edit it for customizations. Here's the code:

<?php
if (isset($_POST['valuea'])) $valuea = $_POST['valuea'];
if (isset($_POST['valueb'])) $valueb = $_POST['valueb'];
if (isset($_POST['valuec'])) $valuec = $_POST['valuec'];
$answer = $valuea * $valueb - $valuec;

echo <<<_END
<form method='post' action='/make-a-website/online-calculator'>
<table border='0' width='500px' cellpadding='3' cellspacing='1' class="table">
<tr class="calcheading"><td colspan="2"><strong>Hungry Piranha Demo Calculator</strong></td></tr>
<tr class="calcrow"><td>Pick a Number:</td><td align="center"><input type='text' name='valuea' value="$valuea"/></td></tr>
<tr class="calcrow2"><td>Multiply by This Number:</td><td align="center"><input type='text' name='valueb' value="$valueb"/></td></tr>
<tr class="calcrow"><td>Subtract This Number:</td><td align="center"><input type='text' name='valuec' value="$valuec"/></td></tr>
<tr class="submit"><td colspan="2"><input type='submit' value='Calculate'/></td></tr>
_END;
?>

<tr class="calcrow">
<td><i>The answer is:</td>
<td align="center"><input type="text" value="<?php echo round($answer)?>"></td></i>
</tr>
</table>
</form>

Notice in the code above, that I've bolded all of the code you'll want to change. I've used valuea, valueb, and valuec for my value variables. You can add lines to the top third of the code to add additional variables. At the bottom of the top third of the code, you'll see the formula:

$answer = $valuea * $valueb - $valuec;

I've specified that the answer is valuea multiplied by valueb and then have subtracted valuec. You can change the formula to produce any results you'd like.

The second line in the second third of the code needs to point to the page you're putting the calculator on. My page is /make-a-website/online-calculator. You'll need to change that to the page your calculator is going on.

You should also be able to see, in bold, the text that's displayed in the calculator. Change the text appropriate for your calculator.

Finally, I'm using HTML tables to add form to my calculator, and the style of my table is determined by my CSS file. You can see the various table classes referenced in the above code, and here is what I'm using in my style.css file:

.table {
background: #bbbbbb;
}

.calcheading {
height: 30px;
background: url(images/navback.gif) repeat-x;

color: #ffffff;
font-size: 16px;
}

.calcrow {
height: 30px;
background: url(images/even-odd-back.gif) repeat-x;
}

.calcrow2 {
height: 30px;
background: #ffffff;
}

.submit {
height: 30px;
background: #bababa;
}

As you can see, I'm using gradient images for some of the table cell backgrounds. You can create your own gradient images, use CSS gradients, or simply specify solid colors.

The sky is the limit with this simple cut and paste code, so think outside of the box, and add valuable, engaging calculators to your website today!

If you have any questions, please feel free to contact me, and if you found this tutorial valuable, please share it with your friends.