infolink

Saturday, 8 March 2014

Calculator Tutorial in JavaScript


This tutorial is about a web base simple calculator which is created in HTML and JavaScript language. JavaScript is very simple and intelligent language. It is a scripting language based on client-side scripting. You can use this script in anywhere on HTML page.
This tutorial is covering all the simple calculator functionality, like Addition, Subtraction, division,
multiplication. Its functionality is similar to Windows calculator.

Calculator Tutorial in JavaScript:

 

 

Step 1:

In a first step you will design the calculator layout using simple HTML, means a text area for input and output, and some buttons for numeric and operator purpose like this.
Calculator in JavaScript
 Calculator in JavaScript

  HTML Code:

<html>
<head>
<title> Calculator Tutorial | developerqueries.blogspot.com </title>
</head>
<body>
<table>
<tr>
<td colspan="5">
<input id="temp_output" name="temp_output" value="" type="hidden" readonly="readonly">
</td>
</tr>
<tr>
<td colspan="5">
<input id="temp_oprtr" name="temp_oprtr" value="" type="hidden" readonly="readonly">
<input id="oprtr" name="oprtr" value="" type="hidden" readonly="readonly">
</td>
</tr>
<tr>
<td colspan="5">
<input id="output" name="output" value="" type="text" readonly="readonly">
</td>
</tr>
<tr>
<td><input type="button" id="seven" name="seven" value="7" /></td>
<td><input type="button" id="eight" name="eight" value="8" /></td>
<td><input type="button" id="nine" name="nine" value="9" /></td>
<td><input type="button" name="divider" value="/" /></td>
</tr>
<tr>
<td><input type="button" id="four" name="four" value="4" /></td>
<td><input type="button" id="five" name="five" value="5" /></td>
<td><input type="button" id="six" name="six" value="6" /></td>
<td><input type="button" name="multiplier" value="*" /></td>
</tr>
<tr>
<td><input type="button" id="one" name="one" value="1" /></td>
<td><input type="button" id="two" name="two" value="2"/></td>
<td><input type="button" id="three" name="three" value="3" /></td>
<td><input type="button" name="subtracter" value="-" /></td>
</tr>
<tr>
<td><input type="button" id="zero" name="zero" value="0" /></td>
<td><input type="button" value="C"/></td>
<td><input type="button" name="equal" value="=" /></td>
<td><input type="button" name="addition" value="+" /></td>
</tr>
</table>
</body>
</html>

Step 2:

In Step two you will write scripts to perform the calculator functionality using JavaScript. Here I use a function base approach, means for every purpose I write a function for example: for values input, for calculation of values etc. Now here is a code.

Functions for Input Purpose (Numbers):

function num_0()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("zero").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("zero").value;
}
}

function num_1()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("one").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("one").value;
}
}

function num_2()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("two").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("two").value;
}
}

function num_3()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("three").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("three").value;
}
}

function num_4()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("four").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("four").value;
}
}

function num_5()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("five").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("five").value;
}
}

function num_6()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("six").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("six").value;
}
}

function num_7()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("seven").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("seven").value;
}
}

function num_8()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value + document.getElementById("eight").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("eight").value;
}
}
function num_9()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value + document.getElementById("nine").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("nine").value;
}
}

Function for addition, subtraction, division, multiplication calculation:

function operator(optr_val)
{
                if(document.getElementById("temp_output").value=="")
                {
                                document.getElementById("temp_output").value = document.getElementById("output").value;
                                document.getElementById("temp_oprtr").value = optr_val;
                                document.getElementById("oprtr").value = optr_val;
                }
                else
                {
                                var val1 = document.getElementById("output").value;
                                var val2 = document.getElementById("temp_output").value;
                                if(document.getElementById("oprtr").value == "+")
                                {
                                                var result = parseInt(val2) + parseInt(val1);
                                                document.getElementById("temp_output").value = result;
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = optr_val;
                                                document.getElementById("oprtr").value = optr_val;
                                }
                                else if(document.getElementById("oprtr").value == "-")
                                {
                                                var result = parseInt(val2) - parseInt(val1);
                                                document.getElementById("temp_output").value = result;
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = optr_val;
                                                document.getElementById("oprtr").value = optr_val;
                                }
                                else if(document.getElementById("oprtr").value == "/")
                                {
                                                var result = parseInt(val2) / parseInt(val1);
                                                document.getElementById("temp_output").value = result;
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = optr_val;
                                                document.getElementById("oprtr").value = optr_val;
                                }
                                else if(document.getElementById("oprtr").value == "*")
                                {
                                                var result = parseInt(val2) * parseInt(val1);
                                                document.getElementById("temp_output").value = result;
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = optr_val;
                                                document.getElementById("oprtr").value = optr_val;
                                }
                }
}

Function for Equal (=) Operator:

function eql()
{
                if(document.getElementById("temp_output").value!="")
                {
                                var val1 = document.getElementById("output").value;
                                var val2 = document.getElementById("temp_output").value;
                                if(document.getElementById("oprtr").value == "+")
                                {
                                                var result = parseInt(val2) + parseInt(val1);
                                                document.getElementById("temp_output").value = "";
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = "";
                                                document.getElementById("oprtr").value = "";
                                }
                               
                                else if(document.getElementById("oprtr").value == "-")
                                {
                                                var result = parseInt(val2) - parseInt(val1);
                                                document.getElementById("temp_output").value = "";
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = "";
                                                document.getElementById("oprtr").value = "";
                                }
                                else if(document.getElementById("oprtr").value == "/")
                                {
                                                var result = parseInt(val2) / parseInt(val1);
                                                document.getElementById("temp_output").value = "";
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = "";
                                                document.getElementById("oprtr").value = "";
                                }
                                else if(document.getElementById("oprtr").value == "*")
                                {
                                                var result = parseInt(val2) * parseInt(val1);
                                                document.getElementById("temp_output").value = "";
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = "";
                                                document.getElementById("oprtr").value = "";
                                }
                }
}

Function for clear the text area:

function clear_val()
{
document.getElementById("output").value = "";
document.getElementById("temp_output").value = "";
document.getElementById("temp_oprtr").value = "";
document.getElementById("oprtr").value = "";
}

Put these all Functions between JavaScript tags in the HTML page. And on click event of every button call the function according to the button functionality.

Here is the final Code of Calculator tutorial in JavaScript.

just copy and past this code in html file. 

<html>
<head>
<title> Calculator Tutorial | developerqueries.blogspot.com </title>

<!-- Javascript Function for clear value -->
<script type="text/javascript">
function clear_val()
{
document.getElementById("output").value = "";
document.getElementById("temp_output").value = "";
document.getElementById("temp_oprtr").value = "";
document.getElementById("oprtr").value = "";
}

function num_0()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("zero").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("zero").value;
}
}

function num_1()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("one").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("one").value;
}
}

function num_2()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("two").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("two").value;
}
}

function num_3()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("three").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("three").value;
}
}

function num_4()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("four").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("four").value;
}
}

function num_5()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("five").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("five").value;
}
}

function num_6()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("six").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("six").value;
}
}

function num_7()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value +  document.getElementById("seven").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("seven").value;
}
}

function num_8()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value + document.getElementById("eight").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("eight").value;
}
}
function num_9()
{
if(document.getElementById("temp_oprtr").value == "")
{
document.getElementById("output").value = document.getElementById("output").value + document.getElementById("nine").value;
}
else
{
document.getElementById("temp_oprtr").value = "";
document.getElementById("output").value = document.getElementById("nine").value;
}
}


function operator(optr_val)
{
                if(document.getElementById("temp_output").value=="")
                {
                                document.getElementById("temp_output").value = document.getElementById("output").value;
                                document.getElementById("temp_oprtr").value = optr_val;
                                document.getElementById("oprtr").value = optr_val;
                }
                else
                {
                                var val1 = document.getElementById("output").value;
                                var val2 = document.getElementById("temp_output").value;
                                if(document.getElementById("oprtr").value == "+")
                                {
                                                var result = parseInt(val2) + parseInt(val1);
                                                document.getElementById("temp_output").value = result;
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = optr_val;
                                                document.getElementById("oprtr").value = optr_val;
                                }
                                else if(document.getElementById("oprtr").value == "-")
                                {
                                                var result = parseInt(val2) - parseInt(val1);
                                                document.getElementById("temp_output").value = result;
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = optr_val;
                                                document.getElementById("oprtr").value = optr_val;
                                }
                                else if(document.getElementById("oprtr").value == "/")
                                {
                                                var result = parseInt(val2) / parseInt(val1);
                                                document.getElementById("temp_output").value = result;
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = optr_val;
                                                document.getElementById("oprtr").value = optr_val;
                                }
                                else if(document.getElementById("oprtr").value == "*")
                                {
                                                var result = parseInt(val2) * parseInt(val1);
                                                document.getElementById("temp_output").value = result;
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = optr_val;
                                                document.getElementById("oprtr").value = optr_val;
                                }
                }
}

function eql()
{
                if(document.getElementById("temp_output").value!="")
                {
                                var val1 = document.getElementById("output").value;
                                var val2 = document.getElementById("temp_output").value;
                                if(document.getElementById("oprtr").value == "+")
                                {
                                                var result = parseInt(val2) + parseInt(val1);
                                                document.getElementById("temp_output").value = "";
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = "";
                                                document.getElementById("oprtr").value = "";
                                }
                               
                                else if(document.getElementById("oprtr").value == "-")
                                {
                                                var result = parseInt(val2) - parseInt(val1);
                                                document.getElementById("temp_output").value = "";
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = "";
                                                document.getElementById("oprtr").value = "";
                                }
                                else if(document.getElementById("oprtr").value == "/")
                                {
                                                var result = parseInt(val2) / parseInt(val1);
                                                document.getElementById("temp_output").value = "";
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = "";
                                                document.getElementById("oprtr").value = "";
                                }
                                else if(document.getElementById("oprtr").value == "*")
                                {
                                                var result = parseInt(val2) * parseInt(val1);
                                                document.getElementById("temp_output").value = "";
                                                document.getElementById("output").value = result;
                                                document.getElementById("temp_oprtr").value = "";
                                                document.getElementById("oprtr").value = "";
                                }
                }
}
</script>
<!--------------- End --------------------->

</head>
<body>
<table>
<tr>
<td colspan="5">
<input id="temp_output" name="temp_output" value="" type="hidden" readonly="readonly">
</td>
</tr>
<tr>
<td colspan="5">
<input id="temp_oprtr" name="temp_oprtr" value="" type="hidden" readonly="readonly">
<input id="oprtr" name="oprtr" value="" type="hidden" readonly="readonly">
</td>
</tr>
<tr>
<td colspan="5">
<input id="output" name="output" value="" type="text" readonly="readonly">
</td>
</tr>
<tr>
<td><input type="button" id="seven" name="seven" onclick="num_7()" value="7" /></td>
<td><input type="button" id="eight" name="eight" value="8" onclick="num_8()" /></td>
<td><input type="button" id="nine" name="nine" value="9" onclick="num_9()"/></td>
<td><input type="button" name="divider" value="/" onclick="operator(this.value)" /></td>
</tr>
<tr>
<td><input type="button" id="four" name="four" value="4" onclick="num_4()" /></td>
<td><input type="button" id="five" name="five" value="5" onclick="num_5()" /></td>
<td><input type="button" id="six" name="six" value="6" onclick="num_6()" /></td>
<td><input type="button" name="multiplier" value="*" onclick="operator(this.value)" /></td>
</tr>
<tr>
<td><input type="button" id="one" name="one" value="1" onclick="num_1()" /></td>
<td><input type="button" id="two" name="two" value="2" onclick="num_2()" /></td>
<td><input type="button" id="three" name="three" value="3" onclick="num_3()" /></td>
<td><input type="button" name="subtracter" value="-" onclick="operator(this.value)" /></td>
</tr>
<tr>
<td><input type="button" id="zero" name="zero" value="0" onclick="num_0()" /></td>
<td><input type="button" onclick="clear_val()" value="C"/></td>
<td><input type="button" name="equal" value="=" onclick="eql()" /></td>
<td><input type="button" name="addition" value="+" onclick="operator(this.value)" /></td>
</tr>
</table>
</body>
</html>

Hope this Tutorial wills Helpful for you all.
Posted by at 11:47
Labels: , , , ,

1 comment:

  1. suman6 October 2018 at 20:38

    nice article .thank you for sharing useful information.
    web programming tutorial
    welookups

    ReplyDelete

Subscribe to: Post Comments (Atom)