
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.
/* show zero to textbox on page load */
$("#txtCalc").ready(function () {
$("#txtCalc").val("0");
});
//square root
$("#btnSqrt").click(function () {
var text = $("#txtCalc").val();
//if invalid input,do not execute codes below
if (text.search("Invalid") != -1) {
return;
}
if (text.length == 1) {
if (text == "0") {
return;
}
else //text is 3
{
var x = parseFloat($("#txtCalc").val());
var str = Math.sqrt(x);
$("#txtCalc").val(str);
result = str;
arrayComputation = "";
$("#labelArray").val("");
}
}
else { //length is two
if (text.indexOf("-") != -1) {
$("#txtCalc").val("Invalid Input");
return;
}
else {
var x = parseFloat($("#txtCalc").val());
var str = Math.sqrt(x);
$("#txtCalc").val(str);
result = str;
arrayComputation = "";
$("#labelArray").val("");
}
}
operatorPressed = "0";
});
/* NUMBER BUTTONS */
$("#btnZero").click(function () {
//conditions aron mu reset ang input
//if an operator is typed
if (operatorPressed == 1) {
$("#txtCalc").val("");
operatorPressed = 0;
}
var text = $("#txtCalc").val();
//if invalid input,do not execute codes below
if (text.search("Invalid") != -1) {
return;
}
if (text.length == 1) {
if (text != "0") {
var str = $("#txtCalc").val();
var newStr = str.concat($("#btnZero").attr("value"));
$("#txtCalc").val(newStr);
}
}
else { //length is two
var str = $("#txtCalc").val();
var newStr = str.concat($("#btnZero").attr("value"));
$("#txtCalc").val(newStr);
}
}); //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>
wow!you're good...
ReplyDelete