DotNetOcean: 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:-

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">

<title>Om Namah Shivaya</title>

.style1

{

width: 141px;

}

</style>

</head>

<body>

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>

Calculator

</div>

<tr>

<tr>

<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 />

<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>

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

<table>

<tr>

<td>

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

Text="<--" 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 :-

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

Labels

Sunday, October 28

Create your own Calculator By Using Jquery

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? .

No comments:

Post a Comment

.