Sunday, May 22, 2011

JQuery Calculator




The image above is a jquery/javascript calculator developed in ASP.NET 4.0 web template. Here's the functions. I'wont be posting all codes since it will took up space in my post. I'll just post the sqrt() and a number scripts.

The ASPX markup uses plain css for centering and aligning the buttons and html controls. No asp.net server controls are involved. For the jquery processing, im using the id selector.
1:  /* show zero to textbox on page load */  
2:  $("#txtCalc").ready(function () {  
3:    $("#txtCalc").val("0");  
4:  });  
5:  //square root  
6:        $("#btnSqrt").click(function () {  
7:          var text = $("#txtCalc").val();  
8:          //if invalid input,do not execute codes below  
9:          if (text.search("Invalid") != -1) {  
10:            return;  
11:          }  
12:          if (text.length == 1) {  
13:            if (text == "0") {  
14:              return;  
15:            }  
16:            else //text is 3  
17:            {  
18:              var x = parseFloat($("#txtCalc").val());  
19:              var str = Math.sqrt(x);  
20:              $("#txtCalc").val(str);  
21:              result = str;  
22:              arrayComputation = "";  
23:              $("#labelArray").val("");  
24:            }  
25:          }  
26:          else { //length is two  
27:            if (text.indexOf("-") != -1) {  
28:              $("#txtCalc").val("Invalid Input");  
29:              return;  
30:            }  
31:            else {  
32:              var x = parseFloat($("#txtCalc").val());  
33:              var str = Math.sqrt(x);  
34:              $("#txtCalc").val(str);  
35:              result = str;  
36:              arrayComputation = "";  
37:              $("#labelArray").val("");  
38:            }  
39:          }  
40:          operatorPressed = "0";  
41:        });  
42:         /* NUMBER BUTTONS */  
43:        $("#btnZero").click(function () {  
44:          //conditions aron mu reset ang input  
45:          //if an operator is typed  
46:          if (operatorPressed == 1) {  
47:            $("#txtCalc").val("");  
48:            operatorPressed = 0;  
49:          }  
50:          var text = $("#txtCalc").val();  
51:          //if invalid input,do not execute codes below  
52:          if (text.search("Invalid") != -1) {  
53:            return;  
54:          }  
55:          if (text.length == 1) {  
56:            if (text != "0") {  
57:              var str = $("#txtCalc").val();  
58:              var newStr = str.concat($("#btnZero").attr("value"));  
59:              $("#txtCalc").val(newStr);  
60:            }  
61:          }  
62:          else { //length is two  
63:            var str = $("#txtCalc").val();  
64:            var newStr = str.concat($("#btnZero").attr("value"));  
65:            $("#txtCalc").val(newStr);  
66:          }  
67:        }); //end click button zero  
Make sure to register your jquery script in your asp.net content/master page.
 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">  
 <script type="text/javascript" src="Scripts/jquery-1.4.1.js" language="javascript">  
 </script>  

1 comments: