How to make a free web based calculator for your website

Web programming topics
Post Reply
User avatar
Neo
Site Admin
Site Admin
Posts: 2642
Joined: Wed Jul 15, 2009 2:07 am
Location: Colombo

How to make a free web based calculator for your website

Post by Neo » Tue Feb 09, 2010 6:40 pm

Use the following Java Script to have a simple calculator in your web site.

Code: Select all

<html>
<head>
<title>Web Based Calculator</title>
</head>
<body>

<script language="javascript">
<!-- hide this script tag's contents from old browsers
function addChar(input, character)
{
if(input.value == null || input.value == "0")
input.value = character
else
input.value += character
}
function deleteChar(input)
{
input.value = input.value.substring(0, input.value.length - 1)
}
function changeSign(input)
{
// could use input.value = 0 - input.value, but let's show off substring
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
input.value = "-" + input.value
}
function compute(form) 
{
form.display.value = eval(form.display.value)
}
function square(form) 
{
form.display.value = eval(form.display.value) * eval(form.display.value)
}
function checkNum(str) 
{
for (var i = 0; i < str.length; i++) {
var ch = str.substring(i, i+1)
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-" 
&& ch != "(" && ch!= ")") {
alert("invalid entry!")
return false
}
}
}
return true
}
<!-- done hiding from old browsers -->
</script>
<form>
<div align="center"><center><table border="5" align="center"
bordercolordark="#800000" bgcolor="#C0C0C0">
<tr align="center">
<td colspan="4"><table border="3" width="250">

<tr>
<td align="center" width="236"><input name="display" value="0" size="32"></td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td><input type="button" value="    7    " onClick="addChar(this.form.display, '7')"> </td>
<td><input type="button" value="    8    " onClick="addChar(this.form.display, '8')"> </td>
<td><input type="button" value="    9    " onClick="addChar(this.form.display, '9')"> </td>
<td><input type="button" value="    /     " onClick="addChar(this.form.display, '/')"> </td>
</tr>
<tr align="center">

<td><input type="button" value="    4    " onClick="addChar(this.form.display, '4')"> </td>
<td><input type="button" value="    5    " onClick="addChar(this.form.display, '5')"> </td>
<td><input type="button" value="    6    " onClick="addChar(this.form.display, '6')"> </td>
<td><input type="button" value="    *    " onClick="addChar(this.form.display, '*')"> </td>
</tr>
<tr align="center">
<td><input type="button" value="    1    " onClick="addChar(this.form.display, '1')"> </td>
<td><input type="button" value="    2    " onClick="addChar(this.form.display, '2')"> </td>
<td><input type="button" value="    3    " onClick="addChar(this.form.display, '3')"> </td>
<td><input type="button" value="     -    " onClick="addChar(this.form.display, '-')"> </td>

</tr>
<tr align="center">
<td><input type="button" value="    0    " onClick="addChar(this.form.display, '0')"> </td>
<td><input type="button" value="     .    " onClick="addChar(this.form.display, '.')"> </td>
<td><input type="button" value="   +/-   " onClick="changeSign(this.form.display)"> </td>
<td><input type="button" value="    +    " onClick="addChar(this.form.display, '+')"> </td>
</tr>
<tr align="center">
<td><input type="button" value="    (    " onClick="addChar(this.form.display, '(')"> </td>
<td><input type="button" value="     )    " onClick="addChar(this.form.display, ')')"> </td>
<td><input type="button" value="   sq    "
onClick="if (checkNum(this.form.display.value))
{ square(this.form) }"> </td>

<td><input type="button" value="    <-   " onClick="deleteChar(this.form.display)"> </td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="      Enter      " name="enter"
onClick="if (checkNum(this.form.display.value))
{ compute(this.form) }"> </td>
<td colspan="2"><input type="button" value="         C          "
onClick="this.form.display.value = 0 "> </td>
</tr>
</table>
</center></div>
</form>

</body>
</html>

User avatar
Rksk
Major
Major
Posts: 730
Joined: Thu Jan 07, 2010 4:19 pm
Location: Rathnapura, Sri Lanka

Re: How to make a free web based calculator for your website

Post by Rksk » Tue Mar 09, 2010 12:25 pm

There is a scientific calculator for free.
http://neil.fraser.name/software/hp-35/
User avatar
Neo
Site Admin
Site Admin
Posts: 2642
Joined: Wed Jul 15, 2009 2:07 am
Location: Colombo

Re: How to make a free web based calculator for your website

Post by Neo » Tue Mar 09, 2010 1:29 pm

That's nice. The only problem is, it requires Java.
Post Reply

Return to “Web programming”