Build a JavaScript Calculator

Demo: https://blog.kimconnect.com/wp-content/projects/calculator.html

HTML Code:

<link href='//fonts.googleapis.com/css?family=Bungee' rel='stylesheet'>
<div class='container'>
  <div id='calculator'>

    <!-- TITLE -->

    <div id='title' class='text-center'>
      <h5><b>Simple Calculator</b></h5>
    </div>

    <!-- ENTRY BOX -->

    <div id='entrybox' class='text-right'>
      <div id='entry'>
        <p id='result'>0</p>
      </div>
      <div id='history'>
        <p id='log'>0</p>
      </div>
    </div>

    <!-- BUTTONS -->

    <div id='buttons'>

      <button class='red btn-danger' value='ac'>AC</button>
      <button class='red btn-danger' value='back'>&#8678;</button>
      <button class="btn-primary" value='/'>&divide;</button>
      <button class="btn-primary"value='*'>x</button>
      <button class="btn-info"value='7'>7</button>
      <button class="btn-info"value='8'>8</button>
      <button class="btn-info"value='9'>9</button>
      <button class="btn-primary"value='-'>-</button>
      <button class="btn-info"value='4'>4</button>
      <button class="btn-info"value='5'>5</button>
      <button class="btn-info"value='6'>6</button>
      <button class="btn-primary" value='+'>+</button>
      <button class="btn-info"value='1'>1</button>
      <button class="btn-info"value='2'>2</button>
      <button class="btn-info"value='3'>3</button>
      <button class="btn-info"id='zeroButton' value='0'>0</button>
      <button class="btn-info"value='.'>.</button>
      <button class="btn-primary"id='equalButton' value='='>=</button>

    </div>
    <!-- end buttons -->
  </div>
  <!-- end calculator -->
</div>
<footer><a>Free Code Camp Rocks!</a></footer>

CSS Code:

body {
  font-family: 'Bungee';
	background-image: url(http://wallup.net/wp-content/uploads/2016/01/167565-abstract-dark-black_background-digital_art-artwork.png);
	background-size: 100%;
}

#calculator {
  height: 440px;
  width: 300px;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  border: 2px solid #908b85;
  border-radius: 20px;
  box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #89847e;
}

#title {
  padding-top: 10px;
  padding-bottom: 10px;
}

#entrybox {
  width: 85%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #b4b39d;
  border-radius: 6px;
  background-color: yellow;
	overflow: auto;
}

#entry {
  margin-right: 10px;
  font-size: 35px;
}

#buttons {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  display: inline-block;
  width: 280px;
  height: auto;
  margin-top: 15px;
  margin-left: 15px;
}

button {
  border-radius: 8px;
  border: none;
  background-color: #3a3a3a;
  margin: 0 4px 10px 8px;
  height: 40px;
  width: 50px;
  box-shadow: 0px 3px 0px 0px #222121, inset -1px -3px 10px 1px #515151;
	font-weight: bold;
}

.btn-info{
	color: black;	
}

.btn-info:hover{
	color: yellow;
	font-size:110%;
}

button:active {
  transform: translate(0px, 3px);
  box-shadow: none;
}

.row {
  margin-top: 20px
}

#topAdjust {
  margin-top: -52px;
}

#equalButton {
  position: absolute;
  margin-left: 12px;
  margin-top: -50px;
  height: 90px;
}

#zeroButton {
  width: 117px;
}

.red {
  font-size: 14px;
  background-color: #a72d45;
  box-shadow: 0px 3px 0px 0px #671c2a;
}

footer {
  font-family: 'Arial Black';
	color: white;	
  position: relative;
  font-size: 16px;
  font-weight: normal;
  margin-top: 20px;
	margin-left: auto;
	margin-right:auto;
  width: 300px;
  height: 40px;
	text-align: center;
}

button,
button:hover,
button:active,
button:visited {
  text-decoration: none !important;
  outline: none !important;
}

a,
a:hover,
a:active,
a:visited {
  color: #922031;
  text-decoration: none !important;
  outline: none !important;
}

#history {
  /*transform: translate(-13px, -17px);*/
  position: relative;
  height: 10px;
  bottom: 17px;
  margin-right: 14px;
  color: #8b8b7b;
  font-size: 12px;
}

JavaScript Code:

$(document).ready(function() {
	// Declare variables
	var entry="";
	var memory=[];
	var result=0;
	var operator = /(\+|-|\*|\/|=)/g;
	var digit = /[0-9]/;
	var doubleDot = /(\..\.)/;
	var isDigit, isOperator, isDot, isAC, isBack;
	var isLastDigit, isLastOperator, isLastDot;
	isLastDigit=isLastOperator=isLastDot=false;
	
	// Function: obtain key press
	$("button").click(function(){
		entry	= $(this).attr("value");		
		checkEntry();
		displayCurrent();	
		checkRules();
		displayHistory();
			
	})
	
// flag the input with the appropriate entry type	
	function checkEntry(){
		entry.match(digit)===null? isDigit=false : isDigit=true
		entry.match(operator)===null|entry.match(operator)===undefined? isOperator=false : isOperator=true
		entry==="."?isDot=true:isDot=false
		entry==="ac"?isAC=true:isAC=false
		entry==="back"?isBack=true:isBack=false
		// console.log(isBack);
			
		if (memory.length>0){
			memory[memory.length-1].match(digit)===null? isLastDigit=false :  isLastDigit=true
			memory[memory.length-1].match(operator)===null | memory[memory.length-1].match(operator)===undefined? isLastOperator=false :  isLastOperator=true		
			memory[memory.length-1].match(/(\.)/g) ? isLastDot=true :  isLastDot=false
		}	
//		console.log(isLastDot);
		
		if(memory[memory.length-1]=="="){
			memory=[];
			memory.push(result);
			}

	}
	
	// Function: check key press against rules
	function checkRules(){				
		if (isAC){
			memory=[];
			displayHistory();
			result=0;
			displayCurrent();
//			console.log(entry);
		} else if (isBack){
			if(memory.length>0){
				memory.pop();
				displayHistory();
				displayCurrent();
			}
		} else if (entry=="="){
			getResult();	
		}	else if (isOperator){
			if (isLastOperator&&memory.length>1) {memory[memory.length-1]=entry;}
			else if (memory.length==0&&entry!=="-"){} else {memory.push(entry);}
		} else if (isDot){
			if (memory.length==0) {memory.push("0."); }
			else if (result!=0&&isLastDot){$("#result").text("Wrong Key");}
			else if (!isLastDot&&isLastDigit) {memory[memory.length-1]+=entry;}			
			else {memory.push(entry);}
		} 
//		else if (memory[memory.length-1]=="." | memory[memory.length-1] % 1 == 0){console.log("strange");}
		else { 
			// Assuming isDigit
//			console.log(isLastDigit);
			if (memory.length==0) {memory.push(entry);}
			else if (memory.length==1&&memory[0]=="-"){memory[0]="-"+entry;}
			else if (isLastDigit) {memory[memory.length-1]+=entry;}
			else {memory.push(entry); }
		}
		
	}
	
	// Function: display current button being pushed
	function displayCurrent(){		
		if (memory.length>0){
			$("#result").text(result);
		}	else {$("#result").text("0");}			
	}
	
	// Function: display history
	function displayHistory(){
		if (memory.length>0&&memory[memory.length-1]=="="){
				$("#history").text(result);
				}
		else if (memory.length>0){
			$("#history").text(memory.join(""));
			}	
		else {$("#history").text("0");}	
	}
		
	// Function: getResult
	function getResult(){
//		console.log(memory);
//		Please keep in mind that the eval() function isn't the most efficient
// It has vulnerabilities; thus, another method should be used to replace this function
		result=eval(memory.join(""));
		if (result%1!==0){
			result = result.toString();  // this neat little trick will ommit all non-significant trailing zeros after the decimal point
		}
		memory.push("=");
		$("#result").text(result);
//		$("#history").text(memory.join(""));
	}
		
})