Join the social network of Tech Nerds, increase skill rank, get work, manage projects...

• # Simple Calculator using Html and jQuery

• 0
• 0
• 0
• 0
• 0
• 0
• 0
• 0
• 2.55k
Comment on it

### Simple Calculator using Html and jQuery:

We can create a basic calculator using Html, Css and jQuery. When user will click digits then it will store in either crntStore or btnVal variable. When user will click a arithmetic operation button then the arithmetic operation will take place and the result will shown in input field.

JQuery Code:

``````\$('.btnClick1 button').click(function() {
if (!\$(this).hasClass("action")) {
if (!operation) {
if (!\$(this).hasClass("del")) {
crntStore += \$(this).text();
}
else {
crntStore=crntStore.substr(0, crntStore.length - 1);
}
}else{
if (!\$(this).hasClass("del")) {
btnVal += \$(this).text();
}else
{
btnVal=btnVal.substr(0, btnVal.length - 1);
}
}
}
else if (!\$(this).hasClass("result")) {
operation=true;
action = \$(this).text();
}else{
if (\$(this).text()=='cl') {
\$("input").val("");
crntStore="";
btnVal="";
operation = false;
action ='';
}else{
btnVal = calculate(action);
}
}
display(btnVal);
});``````

When user click on the buttons we have performed  operations according to the value it contains.

Firstly we have checked whether the clicked button is number button or arithmetical operator button or result button.

If the button clicked is a number then the value is added to a crntStore variable.

If the button is an arithmetical then  we have made "operation = true".

If the user again click the number buttons then the value is now added to btnVal variable accordingly.

Lastly on the click of equal button we have called a function calculate() which perform the arithmetical operations that we have selected. If the button is clear then all the values are cleared or reset.

When the user clicks the backspace button then it deletes the last digits from the number we have entered in input tag.

``````function calculate(val)
{
switch (val) {
case '+':
method = parseFloat(crntStore)+ parseFloat(btnVal);
// console.log(method);
break;
case '-':
method = parseFloat(crntStore)- parseFloat(btnVal);
break;
case '*':
method = parseFloat(crntStore)*parseFloat(btnVal);
break;
case '/':
method = parseFloat(crntStore)/parseFloat(btnVal);
break;
}
return method;
}``````

This functions perform the arithmetical operation that we have selected and returns the result.

``````function display(val){
val == '' ? \$("input").val(crntStore) : \$("input").val(val);
}``````

This function displays the value in the input box.

You can check working demo of calculator from https://jsfiddle.net/o9ya6wxc/4/

you can see html and css code from the jsfiddle link which is given above.

## 0 Comment(s)

OR
OR
Register

OR
Fill out the form below and instructions to reset your password will be emailed to you:
Fill out the form below and reset your password:

• Hire
• Post Projects

### Post Projects

• All at 0 Cost ....
• Post Tech Job
• Select Best Bidder
• Track the Project
• Approve Work and Pay safely
• Browse Nerds
• Work
• Find Projects Find Projects
• UI Design and UX
• Software Engineering
View more...
View less...
• Marketing
• General
• Manage
• Company Company

### Manage Company

• All at 0 Cost ....
• Manage Company and Employee Profiles
• Use Online Project Management Tools for Free
• Company wide Employee Productivity Reports
• Knowledge Sharing and Collaboration Tools
• Get Sales Lead and Bid for Tech Projects
• Send Invoices and Receive Payment Safely
• Learn
• Nerd Digest Nerd Digest
• UI Design and UX
• Software Engineering
View more...
View less...
• Marketing
• General
• Tech Q & A Tech Q & A
• UI Design and UX
• Software Engineering
View more...
View less...
• Marketing
• General