JavaScript Calculator

In this example below you will see how to do a JavaScript Calculator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 31H0B1eV, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 31H0B1eV ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title> JavaScript Calculator</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="calculator">  
  <div class="top">
      <span class="clear">C</span>
      <div class="screen"></div>
  </div>	
  <div class="keys">    
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span class="operator">+</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span class="operator">-</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span class="operator">÷</span>
    <span>0</span>
    <span>.</span>
    <span class="eval">=</span>
    <span class="operator">x</span>
  </div>
</div>
  <script src='http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/31H0B1eV/javascript-calculator-dMGNQe */
@import url(https://fonts.googleapis.com/css?family=Inconsolata);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	font-family: 'Inconsolata', Monaco, Consolas, monospace;
  font-size: 1.2rem;
}

html {
	background: #FFFFFF;
}

#calculator {
	width: 325px;
	height: auto;
	
	margin: 100px auto;
	padding: 20px 20px 9px;
	
	background: #536DFE;
	box-shadow: 0px 4px #536DFE, 0px 10px 15px rgba(83, 109, 254, 1);
}

.top span.clear {
	float: left;
}

.top .screen {
	height: 40px;
	width: 212px;
	
	float: right;
	
	padding: 0 10px;
	
	background: #536DFE;
	box-shadow: inset 0px 4px rgba(83, 109, 254, 1);
	box-shadow: 0px 4px #536DFE, 0px 5px 5px #FFFFFF;
	
	font-size: 1.5rem;
	line-height: 40px;
	color: #FFFFFF;
	text-align: right;
	letter-spacing: .1rem;
}

.keys, .top {overflow: hidden;}

.keys span, .top span.clear {
	float: left;
	position: relative;
	top: 0;
	
	cursor: pointer;
	
	width: 66px;
	height: 36px;
	
	background: white;
	box-shadow: 1px 2px rgba(114, 114, 114, 1);
	
	margin: 0 7px 11px 0;
	
	color: #212121;
	line-height: 36px;
	text-align: center;
	
	-webkit-user-select: none;
	
	   -moz-user-select: none;
	
	    -ms-user-select: none;
	
	        user-select: none;
	
	transition: all 0.2s ease;
}

.keys span.operator {
	background: rgba(255, 205, 210, 1);
	margin-right: 0;
}

.keys span.eval {
	background: #FFFFFF;
	box-shadow: 1px 2px rgba(114, 114, 114, 1);
	color: #888e5f;
}

.top span.clear {
	background: #D32F2F;
	box-shadow: 0px 2px #D32F2F;
	color: white;
}

.keys span:hover {
	background: #607D8B;
	color: white;
}

.keys span.eval:hover {
	background: #abb850;
	color: #ffffff;
}

.top span.clear:hover {
	background: #f68991;
	color: white;
}

.keys span:active {
	box-shadow: 0px 0px #6b54d3;
	top: 4px;
}

.keys span.eval:active {
	box-shadow: 0px 0px #717a33;
	top: 4px;
}

.top span.clear:active {
	top: 4px;
	box-shadow: 0px 0px #d3545d;
}


/*Downloaded from https://www.codeseek.co/31H0B1eV/javascript-calculator-dMGNQe */
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

for(var i = 0; i < keys.length; i++) {
	keys[i].onclick = function(e) {
		// Get the input and button values
		var input = document.querySelector('.screen');
		var inputVal = input.innerHTML;
		var btnVal = this.innerHTML;
		if(btnVal == 'C') {
			input.innerHTML = '';
			decimalAdded = false;
		}
		
		else if(btnVal == '=') {
			var equation = inputVal;
			var lastChar = equation[equation.length - 1];
			equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
			if(operators.indexOf(lastChar) > -1 || lastChar == '.')
				equation = equation.replace(/.$/, '');
			
			if(equation)
				input.innerHTML = eval(equation);
				
			decimalAdded = false;
		}
		else if(operators.indexOf(btnVal) > -1) {
			var lastChar = inputVal[inputVal.length - 1];
			
			if(inputVal != '' && operators.indexOf(lastChar) == -1) 
				input.innerHTML += btnVal;
			
			else if(inputVal == '' && btnVal == '-') 
				input.innerHTML += btnVal;
			
			if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
				input.innerHTML = inputVal.replace(/.$/, btnVal);
			}
			
			decimalAdded =false;
		}		
		else if(btnVal == '.') {
			if(!decimalAdded) {
				input.innerHTML += btnVal;
				decimalAdded = true;
			}
		}
		
		else {
			input.innerHTML += btnVal;
		}
		e.preventDefault();
	} 
}

Comments