Create a calculator using the jquery – onlinecode
In this post we will give you information about Create a calculator using the jquery – onlinecode. Hear we will give you detail about Create a calculator using the jquery – onlinecodeAnd how to use it also give you demo for it if it is necessary.
Today, I am going to share with you how we can create a calculator using jquery. why we create a calculator using jquery because many peoples base is not strong in jquery. so I have created this article and this article will be helpful who people them want to increase knowledge in jquery.
I have created a calculator view site using the bootstrap. I have used addition, subtraction, multiplication, and division operation in this calculator. whenever we enter a numeric value at the first time after then we apply operation then it is calling to particular operation function then we enter a numeric value at the second time and then we press the equal button it will return the two value calculation data.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Calculator using jquery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.btn { margin: 4px; width: 54px;}
.top{ margin-top:50px;}
.calc{ border:1px solid #E4ECFA; padding:15px 10px; }
</style>
<script>
$("document").ready(function () {
var key = null;
$(".clean").click(function () {
$('.input').val("");
});
$(".Show").click(function () {
var EText = $('#Result').val();
if (EText != "0") {
var val1 = EText;
var ButtonVal = $(this);
var val2 = ButtonVal.text();
var Res = val1 + val2;
$('#Result').val(Res);
} else {
$('#Result').val();
}
});
$(function (e) {
var interRes = null;
var operator;
$('.operators').click(function (e) {
var value1 = $('#Result').val();
if (interRes != null) {
var result = ApplyOperation(interRes, value1, operator);
interRes = result;
} else {
interRes = value1;
}
operator = $(this).text();
$('input').val("");
});
$('#Result').keypress(function (e) {
if ((e.keyCode == 61)) {
var op = operator;
var res;
var value2 = $('#Result').val();
if ((value2 != "")) {
var data = value2.split("+");
if (data.length > 2) res = ApplyOperation(interRes, data[data.length - 1], op);
else res = ApplyOperation(interRes, data[1], op);
} else {
res = interRes;
}
$('#Result').val(res);
interRes = null;
} else if ((e.keyCode == 43) || (e.keyCode == 45) || (e.keyCode == 42) || (e.keyCode == 47)) {
var value1 = $('#Result').val();
var inter = (interRes != null);
if (inter) {
var op = operator;
var data = value1.split("+");
if (data.length > 2) {
operator = String.fromCharCode(e.keyCode);
result = ApplyOperation(interRes, data[data.length - 1], op);
interRes = result;
} else {
operator = String.fromCharCode(e.keyCode);
result = ApplyOperation(interRes, data[1], op);
interRes = result;
}
} else {
interRes = value1;
}
operator = String.fromCharCode(e.keyCode);
$('.input').text("");
}
});
$('#Calculate').click(function (e) {
var op = operator;
var res;
var value2 = $('#Result').val();
if ((value2 != "")) {
res = ApplyOperation(interRes, value2, op);
} else {
res = interRes;
}
$('#Result').val(res);
interRes = null;
});
});
function ApplyOperation(value1, value2, operator) {
var res;
switch (operator) {
case "+":
res = addition(value1, value2);
break;
case "-":
res = subtraction(value1, value2);
break;
case "*":
res = multiplication(value1, value2);
break;
case "/":
res = division(value1, value2);
break;
}
return res;
}
function addition(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var total = a + b;
return total;
}
function subtraction(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var sub = a - b;
return sub;
}
function multiplication(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var product = a * b;
return product;
}
function division(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var divi = a / b;
return divi;
}
});
</script>
</head>
<body>
<div >
<div >
<div > </div>
<div >
<div >
<div >
<input id="Result" />
</div>
</div>
<div >
<div >
<button id="ClearAll" type="reset" value="CE" >CE</button>
<button id="Clear" type="reset" value="C" >C</button>
</div>
</div>
<div >
<div >
<button id="One" type="button" value="1" >1</button>
<button id="Two" type="button" value="2" >2</button>
<button id="Three" type="button" value="3" >3</button>
<button id="Sub" type="button" value="-" >-</button>
</div>
</div>
<div >
<div >
<button id="Four" type="button" value="4" >4</button>
<button id="Five" type="button" value="5" >5</button>
<button id="six" type="button" value="6" >6</button>
<button id="Mul" type="button" value="*" >*</button>
</div>
</div>
<div >
<div >
<button id="Seven" type="button" value="7" >7</button>
<button id="Eight" type="button" value="8" >8</button>
<button id="Nine" type="button" value="9" >9</button>
<button id="Divide" type="button" value="/" >/</button>
</div>
</div>
<div >
<div >
<button id="Zero" type="button" value="0" >0</button>
<button id="Dot" type="button" value="." >.</button>
<button id="Calculate" type="button" value="=" >=</button>
<button id="Add" type="button" value="+" >+</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>I have shared demo. So you can click on Button and show the demo.
Hope this code and post will helped you for implement Create a calculator using the jquery – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs