My First Use of JavaScript : A Basic Calculator.

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,

JavaScript CalculatorBy Tanmay

X =
Y =

Result =

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

<html>
<title>JS Calc by Tanmay</title>
<script type="text/javascript">
{
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>

<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_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>

JOIN THE COMMUNITY

Like & Share with people you care

No SPAM, only email notification if new posts were published.