Sunday, October 28

Create your own Calculator By Using Jquery


Introduction:-

                  Here I have explained how to create one calculator using jquery.

Description:-

                  In my previous article I have explained Image cropping using jquery ,Differnt types of jQuery combobox in Asp.net ,How to calculated Value difference between two dates using JQuery? .


Here I am going to create a simple web page which will looks like a calculator having all similar features. For this I have taken few buttons and labels control. I am preparing this calculator by using JQuery.

I have provided here lots of functionality which is generally used in a calculator. This calculator is having all the basic operators. It is most important that along with calculator functionality there must be a proper design. By the way design has the vital role in a application.

I have written some inline style which is not recommended, you just put these CSS into a file and call that style sheet to your page.

For this you should have the jQuery plug-in inside your application or you can use any online plug-in for it. Then take one .aspx page and follow the below process.

 
Here is my Design View Of My Page:-
Design View


Here take a look on my Solution with Jquery Plugins:-
Sample Solution view by shibashish mohanty




My Source Code:-


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="calculator.aspx.cs" Inherits="calculator" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <title>Om Namah Shivaya</title>

    <style type="text/css">

        .style1

        {

            width: 141px;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <script type="text/javascript">

        function Calculate() {

            var Value = $("#<%=labelFormula.ClientID%>").text();

            var calculatedValue = eval(Value);

            $("#<%=labelFormula.ClientID%>").text(calculatedValue);

            return false;

        }

        function ButtonClick(btn) {

            $("#<%=labelError.ClientID%>").text('');

            var hiddenValue = $("#<%=hiddenBtnID.ClientID%>").val().split('+');

            var buttonText = $(btn).val();

            var old = $("#<%=labelFormula.ClientID%>").text();

            var FormLastChar = old.substr(old.length - 1);

            if ((buttonText == '+' || buttonText == '-' || buttonText == '*' || buttonText == '/' || buttonText == '^' || buttonText == '%' || buttonText == '.') && (FormLastChar == '+' || FormLastChar == '-' || FormLastChar == '*' || FormLastChar == '/' || FormLastChar == '^' || FormLastChar == '%' || FormLastChar == '.')) {

                if (buttonText != FormLastChar) {

                    old = old.slice(0, -1);

                    old = old + buttonText;

                    $("#<%=labelFormula.ClientID%>").text(old);

                    var SetHdnValue = $("#<%=hiddenBtnID.ClientID%>").val();

                    var Setbuttons = SetHdnValue.split('+');

                    var SetNewHiddenValue;

                    SetNewHiddenValue = Setbuttons[0];

                    for (var i = 1; i < Setbuttons.length - 1; i++) {

                        SetNewHiddenValue = SetNewHiddenValue + '+' + Setbuttons[i];

                    }

                    SetNewHiddenValue = SetNewHiddenValue + '+' + btn.id;

                    $("#<%=hiddenBtnID.ClientID%>").val(SetNewHiddenValue);

                }

                return false;

            }

            else if (hiddenValue.length > 0 && hiddenValue[0] != '' && hiddenValue[hiddenValue.length - 1].indexOf("Dbtn") >= 0&& btn.id.indexOf("Dbtn")> = 0) {

                $("#<%=labelError.ClientID%>").text('This is a Invalid Entry !');

                return false;

            }

            else {

                var CalculatorFormula = $("#<%=labelFormula.ClientID%>").text() + $(btn).val();

                $("#<%=labelFormula.ClientID%>").text(CalculatorFormula);

                var hdnValue;

                if ($("#<%=hiddenBtnID.ClientID%>").val() == '') {

                    hdnValue = btn.id;

                }

                else {

                    hdnValue = $("#<%=hiddenBtnID.ClientID%>").val() + '+' + btn.id;

                }

                $("#<%=hiddenBtnID.ClientID%>").val(hdnValue);

                return false;

            }

        }

        function Backspacefunctionality(btn) {

            var SetHdnValue = $("#<%=hiddenBtnID.ClientID%>").val();

            var Setbuttons = SetHdnValue.split('+');

            if (Setbuttons.length > 0 && Setbuttons[0] != '') {

                var ToReplaceValue = $("#" + Setbuttons[Setbuttons.length - 1] + "").val();

                var FirstValue = $("#<%=labelFormula.ClientID%>").text();

                FirstValue = FirstValue.slice(0, -(ToReplaceValue.length));

                $("#<%=labelFormula.ClientID%>").text(FirstValue);

                var SetNewHiddenValue;

                if (Setbuttons.length > 1) {

                    SetNewHiddenValue = Setbuttons[0];

                    for (var i = 1; i < Setbuttons.length - 1; i++) {

                        SetNewHiddenValue = SetNewHiddenValue + '+' + Setbuttons[i];

                    }

                }

                else {

                    SetNewHiddenValue = '';

                }

                $("#<%=hiddenBtnID.ClientID%>").val(SetNewHiddenValue);

                $("#<%=labelError.ClientID%>").text('');

            }

            return false;

        }   

    </script>

    <div style="width: 307px">

        <div style="width: 100%; float: left; height: 22px; background-color: #5D92B1; text-align: center;">

            Calculator

        </div>

        <table style="width: 98%; float: left">

            <tr>

                <td colspan="2">

                    <table style="width: 101%; margin-top: 4px; margin-bottom: 10px">

                        <tr>

                            <td class="style1">

                                <div style="color: #333333; font-family: Arial; font-size: 14px; font-weight: normal;

                                    width: 100%; height: 50px; text-align: right; border: 1px Solid #66CCCC; background-color: White;">

                                    <asp:Label ID="labelFormula" runat="server" Style="padding-right: 4px"></asp:Label>

                                    <br />

                                    <br />

                                    <asp:Label ID="labelError" runat="server" Style="padding-right: 4px; color: Red; font-style: italic;

                                        font-size: 12px"></asp:Label>

                                </div>

                                <asp:HiddenField ID="hiddenBtnID" runat="server" />

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

            <tr>

                <td style="width: 100px">

                    <asp:PlaceHolder ID="plcNumberPad" runat="server">

                        <table>

                            <tr>

                                <td>

                                    <asp:Button ID="btnBackSpace" runat="server" CssClass="button" OnClientClick="return Backspacefunctionality(this)"

                                        Text="&lt;--" ToolTip="Backspacefunctionality" />

                                </td>

                                <td>

                                    <asp:Button ID="btnBrckStart" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="(" />

                                </td>

                                <td>

                                    <asp:Button ID="btnBrckClose" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text=")" />

                                </td>

                                <td>

                                    <asp:Button ID="btnPower" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="^" />

                                </td>

                            </tr>

                            <tr>

                                <td>

                                    <asp:Button ID="btn7" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="7" />

                                </td>

                                <td>

                                    <asp:Button ID="btn8" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="8" />

                                </td>

                                <td>

                                    <asp:Button ID="btn9" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="9" />

                                </td>

                                <td>

                                    <asp:Button ID="btnMod" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="%" />

                                </td>

                            </tr>

                            <tr>

                                <td>

                                    <asp:Button ID="btn4" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="4" />

                                </td>

                                <td>

                                    <asp:Button ID="btn5" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="5" />

                                </td>

                                <td>

                                    <asp:Button ID="btn6" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="6" />

                                </td>

                                <td>

                                    <asp:Button ID="btnDiv" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="/" />

                                </td>

                            </tr>

                            <tr>

                                <td>

                                    <asp:Button ID="btn1" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="1" />

                                </td>

                                <td>

                                    <asp:Button ID="btn2" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="2" />

                                </td>

                                <td>

                                    <asp:Button ID="btn3" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="3" />

                                </td>

                                <td>

                                    <asp:Button ID="btnMul" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Style="font-size: 16px" Text="*" />

                                </td>

                            </tr>

                            <tr>

                                <td>

                                    <asp:Button ID="btn0" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="0" />

                                </td>

                                <td>

                                    <asp:Button ID="btnPoint" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Style="font-size: 16px" Text="." />

                                </td>

                                <td>

                                    <asp:Button ID="btnPlus" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="+" />

                                </td>

                                <td>

                                    <asp:Button ID="btnMinus" runat="server" CssClass="button" OnClientClick="return ButtonClick(this)"

                                        Text="-" />

                                </td>

                                <td>

                                    <asp:Button ID="btnEqual" runat="server" CssClass="button" OnClientClick="return Calculate()"

                                        Text="=" />

                                </td>

                            </tr>

                        </table>

                    </asp:PlaceHolder>

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

                 After Run The Page it will Display As :-

Sample Calculator by shibashish mohanty

This is all about a sample calculator which is covering all the basic functionalities with a beautiful interface. you can change the style sheet according to your requirements.
Hope you will like this article.
Keep coding……
 
Thanks
     Shibashish Mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty