Well, I found it that whenever I learn a language the first code I write is always a calculator. I have started taking tutorials on JavaScript few weeks ago to create my own blog, just for fun as I do software engineering on VB.NET platform mainly, that is my site of interest. However, web developing is always interesting to me and I also know that it has a very high level of hard-work and creativity included with it. I don't want to get to that much of details.

On the first day I learnt about using Textboxes, using their values, creating and using functions. Well after that our tutor asked us to do something with what we just learned. Then I wrote the very common 4 functions to do additions, subtractions, multiplications and divisions. Then took two textboxes to take input and another to show result. I also used 4 buttons for the previously mentioned 4 mathematical operations, clicking on each of them the corresponding function will be called. I know its very simple, but I enjoyed.

What I did is a following,

The code for the above calculator is as follows, I think there is nothing to explain here.

<html>

<head>

<title>JS Calc by Tanmay</title>

<script type="text/javascript">

function add(form)

{

form.result.value=parseFloat(form.a.value) + parseFloat(form.b.value)

}

function sub(form)

{

form.result.value=parseFloat(form.a.value) - parseFloat(form.b.value)

}

function multi(form)

{

form.result.value=parseFloat(form.a.value) * parseFloat(form.b.value)

}

function div(form)

{

form.result.value=parseFloat(form.a.value) / parseFloat(form.b.value)

}

</script>

</head>

<body>

<CENTER>

<TABLE WIDTH=600 BORDER=1 BORDERCOLOR=CORNSILK>

<TR><TD BGCOLOR=CORNSILK><center><h1><FONT COLOR=Orange>JavaScript Calculator</FONT> <sub><FONT COLOR=GREEN>By Tanmay</FONT></sub></h1></CENTER></TD></TR>

<TR><TD><CENTER>

<form name="form1" action="" method="get">

X = <input type="text" name="a" value="" align="right"><br>

Y = <input type="text" name="b" value="" align="center"><br><br><br>

<input type="button" name="acc_add" value="Addition" onclick="add(this.form)">

<input type="button" name="acc_sub" value="Subtract" onclick="sub(this.form)">

<input type="button" name="acc_multi" value="Multiply" onclick="multi(this.form)">

<input type="button" name="acc_div" value="Division" onclick="div(this.form)"><br><br><br>

Result = <input type="text" name="result" value="" align="center" ><br>

</form>

</CENTER></TD></TR>

</TABLE>

</CENTER>

</body>

</html>

On the first day I learnt about using Textboxes, using their values, creating and using functions. Well after that our tutor asked us to do something with what we just learned. Then I wrote the very common 4 functions to do additions, subtractions, multiplications and divisions. Then took two textboxes to take input and another to show result. I also used 4 buttons for the previously mentioned 4 mathematical operations, clicking on each of them the corresponding function will be called. I know its very simple, but I enjoyed.

What I did is a following,

## JavaScript Calculator |

X = Y = Result = |

The code for the above calculator is as follows, I think there is nothing to explain here.

<html>

<head>

<title>JS Calc by Tanmay</title>

<script type="text/javascript">

function add(form)

{

form.result.value=parseFloat(form.a.value) + parseFloat(form.b.value)

}

function sub(form)

{

form.result.value=parseFloat(form.a.value) - parseFloat(form.b.value)

}

function multi(form)

{

form.result.value=parseFloat(form.a.value) * parseFloat(form.b.value)

}

function div(form)

{

form.result.value=parseFloat(form.a.value) / parseFloat(form.b.value)

}

</script>

</head>

<body>

<CENTER>

<TABLE WIDTH=600 BORDER=1 BORDERCOLOR=CORNSILK>

<TR><TD BGCOLOR=CORNSILK><center><h1><FONT COLOR=Orange>JavaScript Calculator</FONT> <sub><FONT COLOR=GREEN>By Tanmay</FONT></sub></h1></CENTER></TD></TR>

<TR><TD><CENTER>

<form name="form1" action="" method="get">

X = <input type="text" name="a" value="" align="right"><br>

Y = <input type="text" name="b" value="" align="center"><br><br><br>

<input type="button" name="acc_add" value="Addition" onclick="add(this.form)">

<input type="button" name="acc_sub" value="Subtract" onclick="sub(this.form)">

<input type="button" name="acc_multi" value="Multiply" onclick="multi(this.form)">

<input type="button" name="acc_div" value="Division" onclick="div(this.form)"><br><br><br>

Result = <input type="text" name="result" value="" align="center" ><br>

</form>

</CENTER></TD></TR>

</TABLE>

</CENTER>

</body>

</html>

## Recommended

## Comments

## Contact Us