Calculator

index.html

<div id='main'>
  <br/>
  <h1 id='display'>
  </h1>
  <br>
  <div id='buttons'>
    <button class='num'>
    1
    </button>
    <button class='num'>
    2
    </button>
    <button class='num'>
    3
    </button>
    <button class='num'>
    4
    </button>
    <button class='num'>
    5
    </button>
    <button class='num'>
    6
    </button>
    <button class='num'>
    7
    </button>
    <button class='num'>
    8
    </button>
    <button class='num'>
    9
    </button>
    <button class='num'>
    0
    </button>
    <button class='point'>
    .
    </button>
    <button class='operator' value='+'>
    +
    </button>
    <button class='operator' value='-'>
    -
    </button>
    <button class='operator' value='*'>
    x
    </button>
    <button class='operator' value='/'>
    /
    </button>
    <button id="equalsign">
    =
    </button>
    <button id='clear'>
    C
    </button>
    <button id='allclear'>
    AC
    </button>
  </div>  
</div>  

script.js

function calculate() {
	var eArray = [];
  var number = '';
  $('.num').click(function(e) {
  	var temp = parseInt($(e.target).text());
    temp = temp.toString();
    number = number + temp;
    $('#display').html(number);
  });
  $('.point').click(function(e) {
  	number = number + ".";
    $('#display').html(number);
  });
  $('.operator').click(function(e) {
  	checkInput(number);
    number = '';
    var operatorValue = $(e.target).val();
    checkInput(operatorValue);
  }); 
  $('#equalsign').click(function() {
  	checkInput(number);
  	equals(eArray);
  });
  $('#clear').click(function() {
  	number = '';
    $('#display').html(number);
  });
  $('#allclear').click(function() {
  	number = '';
    eArray = [];
    $('#display').html('');
  });
 
  function checkInput(input) {
  	 if (eArray.length % 2 == 0 && !isNaN(input)) {
    	eArray.push(input);
   	 }
     if (eArray.length % 2 != 0 && isNaN(input)) {
    	eArray.push(input);
   	 }
     console.log(eArray);
   }
   
   function equals(arr) {
   	while (arr.length > 1) {
      var num1 = arr.shift();
      num1 = parseFloat(num1);
      var sign = arr.shift();
      var num2 = arr.shift();
      num2 = parseFloat(num2);  
      if (sign == "+") {
        var total = num1 + num2;
      }
      else if (sign == "-") {
       var total = num1 - num2;
      }
     	else if (sign == "*") {
        var total = num1 * num2;
     	}
     	else if (sign == "/") {
        var total = num1 / num2;
      }
      if (arr.length == 0) {
      	$('#display').html(total);
        eArray = [];
        eArray.push(total);
      }
      else { arr.unshift(total) };
    };
  }
};

calculate();

style.css

#main {
  width: 350px;
  height: 500px;
  background: #FDDDE3;
  margin: 0 auto;
  border-radius: 10px;
}
#buttons {
  text-align: center;
}
#display {
  height: 50px;
  background: #FDF0EA;
  margin: 10px;
  border-radius: 10px;
  font-family: Arial;
  padding: 10px;
}
button {
  width: 60px;
  height: 50px;
  margin: 10px;
  border-radius: 10px;
  background: #FDF0EA;
  font-size: 30px;
}