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 Calculator By Tanmay






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>


Author: Tanmay Chakrabarty

Tanmay Chakrabarty is a former CSE student, currently working as a Senior Software Engineer with 5+ years of experience in the field of Web Application development in PHP+MySQL platform with strong skills in Javascript, JQuery, JQuery UI and CSS. He tries to write notes every week but fails due to heavy loads of duty.

Recommended Recommends

Comments

Contact Us