Design code for above design (Default.aspx)

<head runat="server">
    <title>Calculator</title>   
//java script file
    <script src="calculation.js" type="text/javascript"></script>
   
//css for clear and close button
    <style type="text/css">
        #btnClear
        {
            z-index1;
            left322px;
            top344px;
            height:38px;
            positionabsolute;
        }
        #btnClose
        {
            z-index1;
            left398px;
            top344px;
            height:38px;
            positionabsolute;
        }
    </style>
   
</head>
<body onload="Page_Load()">
   
  
        <input id="btn0" type="button" value="0" style="position:absolutetop287pxleft339pxheight38pxwidth39px;" onclick="btn_Click(0)"/>
        <input id="btn9" type="button" value="9" style="position:absolutetop231pxleft394pxheight38pxwidth39px;" onclick="btn_Click(9)"/>
        <input id="btn8" type="button" value="8" style="position:absolutetop231pxleft340pxheight38pxwidth39px;" onclick="btn_Click(8)"/>
        <input id="btn7" type="button" value="7" style="position:absolutetop232pxleft283pxheight38pxwidth39px;" onclick="btn_Click(7)"/>
        <input id="btn6" type="button" value="6" style="position:absolutetop173pxleft395pxheight38pxwidth39px;" onclick="btn_Click(6)"/>
        <input id="btn5" type="button" value="5" style="position:absolutetop175pxleft339pxheight38pxwidth39px;" onclick="btn_Click(5)"/>
        <input id="btn4" type="button" value="4" style="position:absolutetop175pxleft282pxheight38pxwidth39px;" onclick="btn_Click(4)"/>
        <input id="btn3" type="button" value="3" style="position:absolutetop114pxleft394pxheight38pxwidth39px;" onclick="btn_Click(3)"/>
        <input id="btn2" type="button" value="2" style="position:absolutetop115pxleft339pxheight38pxwidth39px;" onclick="btn_Click(2)"/>
        <input id="btn1" type="button" value="1" style="position:absolutetop116pxleft283pxheight38pxwidth39px;" onclick="btn_Click(1)"/>
       
        <input id="btnEqual" type="button" value="=" style="position:absolutetop285pxleft394pxheight38pxwidth39px;" onclick="btnEqual_Click()"/>
        <input id="btnDec" type="button" value="." style="position:absolutetop286pxleft285pxheight38pxwidth39px;" onclick="btnDec_Click()"/>
        <input id="btnSub" type="button" value="-" style="position:absolutetop173pxleft451pxheight38pxwidth39px;" onclick="btnSub_Click()"/>
        <input id="btnDiv" type="button" value="/" style="position:absolutetop284pxleft449pxheight38pxwidth39px;" onclick="btnDiv_Click()"/>
        <input id="btnAdd" type="button" value="+" style="position:absolutetop114pxleft448pxheight38pxwidth39px;" onclick="btnAdd_Click()"/>
        <input id="btnMul" type="button" value="x" style="position:absolutetop229pxleft449pxheight38pxwidth39px;" onclick="btnMul_Click()"/>
 
        <input id="txtValue" type="text" style="position:absolutetop80pxleft284pxwidth201pxtext-align:right;"/>
        <input id="btnClose" type="button" value="Close" onclick="btnClose_Click()" /><input id="btnClear"
            type="button" value="Clear" onclick="btnClear_Click()"/>
   
</body>

 

 JavaScript code for the above design(Calculation.js)

 

//initilizing values
//val to store value
var val=0;
//enumerated operator
var operators = { "Add":1, "Sub":2, "Mul":3, "Div":4, "Equal":5 };
//to check for operator clicked
var operator_clicked = 0;
//to chech whether number button is pressed nor not
var pressed;
//to check whether decinal button is pressed or not
var dec_pressed;
 
//equal function, which is called in every operators function
function equal()
{
    switch (operator_clicked)
    {
        case operators.Add:
//converting value of text box and adding it to val.
            val= (val + parseFloat(document.getElementById("txtValue").value));
            break;
        case operators.Sub:
            val= (val - parseFloat(document.getElementById("txtValue").value));
            break;
        case operators.Mul:
            val= (val * parseFloat(document.getElementById("txtValue").value));
            break;
        case operators.Div:
            val= (val / parseFloat(document.getElementById("txtValue").value));
            break;
        default:
            if (txtValue.Text!= "")
                val= parseFloat(document.getElementById("txtValue").value);
            else
                val= 0;
                break;
    }
//displaying the value of val in text box.
    document.getElementById("txtValue").value =val;
//setting decimal pressed to false
    dec_pressed = false;
//setting number button pressed to false
    pressed = false;
}
 
//function called on page load
        function Page_Load()
        {
//initilizing values
                val= 0;
                operator_clicked= 0;
                pressed= false;
                dec_pressed= false;
                document.getElementById("txtValue").value= "0";
        }
 
//this is called on ever number button clicked event
        function btn_Click(a)
        {
//checking whether number button is pressed for the first time after any
//operator button click or page load or not.
            if (pressed==false)
                document.getElementById("txtValue").value= "";
//setting value of pressed to true
            pressed= true;
//concatinating argument value to value of text box.
            document.getElementById("txtValue").value += a;
        }
 
//this function is called on add button clicked
       function btnAdd_Click()
        {
//equal() function is called
            equal();
//setting operator_clicked value to value of operator.Add ie. 1
            operator_clicked=operators.Add;                 
        }
 
        function btnSub_Click()
        {
            equal();
            operator_clicked= operators.Sub;         
        }
 
        function btnMul_Click()
        {
            equal();
            operator_clicked= operators.Mul;          
        }
 
        function btnDiv_Click()
        {
            equal();
            operator_clicked= operators.Div;    
        }
 
        function btnEqual_Click()
        {
            equal();           
            val= 0;
            operator_clicked= operators.Equal;
        }
 
//function called when clear button is pressed
        function btnClear_Click()
        {
//setting everything to its initial value.
            document.getElementById("txtValue").value= "";
            val= 0;
            operator_clicked= 0;
            pressed= false;
            dec_pressed= false;
        }
 
//this function is called when close button is clicked
        function btnClose_Click()
        {
//this will close the current window.
           window.close();
        }
 
//function called when decimal button is pressed
        function btnDec_Click()
        {
//checking whether number button is pressed or not
            if (pressed== false)
                document.getElementById("txtValue").value= "";
//checking whether decimal point already exist or not
            if (dec_pressed== false)
            {
                if (document.getElementById("txtValue").value== "")
                    document.getElementById("txtValue").value= "0.";
                else
                    document.getElementById("txtValue").value+= ".";
            }
//setting dec_pressed and pressed to true
            dec_pressed= true;
            pressed= true;
        }
Screen shot

 

 

  Modified On Nov-30-2017 04:19:33 AM
  1. Hi, I'm trying to build a calculator just like a design of you but I also try to run it on via a web service(WSDL). So could you show me how to add this to my code? Thanks.
  1. Hi Akif,

    You can create four method in WebService and call them in your application. Like you can create Add(), Delete() etc and

    register that web service in you site then at the click event of Add button call Add() method from web service. By doing this you can perform it.

    If you have any further query about it then you can join mindstick forum for technical support.

  1. i tried the code to copy and run it on visual studio it can run only the design of a calculator are appering i had doubt that from where you are entering the numbers into  text box the code was not written.... 

Leave Comment