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.