Jaya's Blog.......................: Create a Simple Calculator using JavaScripts and HTML

Hi readers today I'm going to tell you how to create a simple calculator.
I wrote this code using html, javascript and css. It require only a little knowledge about those languages. So hop you enjoy.

<html>



<head>

<title>

My Simple Calculator

</title>

<script>

function Addition()
{
val =parseInt(form1.value1.value)+parseInt(form1.value2.value);
Display(val);
}

function Subscription()
{
val =parseInt(form1.value1.value)-parseInt(form1.value2.value);
Display(val);
}

function Multiplication()
{
val =parseInt(form1.value1.value)*parseInt(form1.value2.value);
Display(val);
}

function Divition()
{
val =parseInt(form1.value1.value)/parseInt(form1.value2.value);
Display(val);
}

function Display(val)
{
form1.answer.value="";
if(!form1.value1.value =="" && !form1.value2.value=="")
form1.answer.value = String(val);
}

function Empty()
{
if(form1.value1.value =="")
{
defaultVal = prompt("Enter both values","Enter Here");
form1.value1.value = defaultVal;
}

else if(form1.value2.value=="")
{
defaultVal = prompt("Enter both values","Enter Here");
form1.value2.value = defaultVal;
}
form1.value1.value.focus();
form1.value2.value.focus();
}
</script>

</head>

<body>

<form name="form1">

<table align="center" cellspacing="20" border="0" style=" background-color: GreenYellow; border-width: 3px; border-color:#000000;border-style: solid;">

<tr>

<th colspan="4"><u> My Simple Calculator</u></th>

</tr>

<tr >

<td colspan="2">value1:</td>

<td colspan="2">value2:</td>

</tr>

<tr >

<td colspan="2"><input type="textbox" name="value1" style="background-color:

GreenYellow;color:OrangeRed;border:3px double Green;"></td>

<td colspan="2"><input type="textbox" name="value2" style="background-color:
GreenYellow;color:OrangeRed;border:3px double Green;"></td>

</tr>

<tr>

<td><input type="button" value="Add" onclick="Addition()" onBlur="Empty()" style="background-color: OrangeRed;color:GreenYellow;border:3px double Orange;"></td>

<td><input type="button" value="Minus" onclick="Subscription()" onBlur="Empty()" style="background-color: OrangeRed;color:GreenYellow;border:3px double Orange;"></td>

<td><input type="button" value="Multiply" onclick="Multiplication()" onBlur="Empty()" style="background-color: OrangeRed;color:GreenYellow;border:3px double Orange;"></td>

<td><input type="button" value="Divide" onclick="Divition()" onBlur="Empty()" style="background-color: OrangeRed;color:GreenYellow;border:3px double Orange;"></td>

</tr>

<tr >
<td colspan="3">Answer:<input type="textbox" name="answer" style="background-color: GreenYellow;color:OrangeRed;border:3px double Green;"></td>

<td><input type="button" value="Reset" onclick="Reset()" onBlur="Empty()" style="background-color: OrangeRed;color:GreenYellow;border:3px double Orange;"></td>

</tr>

</table>

</form>

</body>

</html>

At the end if you code correctly you will get the above interface on your browser.

If you have any problem just leave a comment

Good Luck