Calculator Web App

A calculator web app for your iPhone It features less options than your current calculator and doesn't work so well either. Simply add this page to your Home Screen.

HTML

<body>
		
		<div id="wrapper">

			<div id="calculator">
				<!-- Screen and clear key -->
				<div class="top">
					<span class="clear">C</span>
					<div class="screen"></div>
				</div>
				
				<div class="keys">
					<!-- operators and other 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>

			<div id="about">
				<h1>A calculator web app for your iPhone</h1>
				<p>It features <strong>less options</strong> than your current calculator and <strong>doesn't work so well</strong> either.</p>
				<p>Simply add this page to your Home Screen. </p>

			</div>

		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

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

	</body>

CSS

/* Basic reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	/* Better text styling */
	font-family: 'Open Sans', sans-serif;
	font-size: 25px;
	font-weight: 300;
}

body {
	background: #565656;
}

#about h1 {
	color: #FFF0F5;
	font-size: 1.6rem;
	font-weight: 600;
	padding-bottom: 25px;
}

#about p {
	color: #FFF0F5;
	font-size: .8rem;
	padding-bottom: 10px;
}

strong {
	font-size: .8rem;
	font-weight: 600;
}

#wrapper {
	width: 750px;
	margin: auto;
}

#about {
	width: 300px;
	margin: 100px 30px;
	padding-top: 50px;

	display: block;
	float: left;
}

#calculator {
	width: 305px;
	height: auto;
	margin: 100px 30px;
	padding: 35px 20px 45px;
	
	background: brown;
	border-radius: 15px;

	display: block;
	float: left;
}

/* Numbers Field */
.top span.clear {
	float: left;
}

/* Buttons */
.top .screen {
	height: 66px;
	width: 180px;
	overflow: hidden;
	float: right;
	padding: 0 10px;
		
	/* Typography */
	font-size: 30px;
	line-height: 58px;
	color: #FFF0F5;
	text-align: right;
	letter-spacing: 2px;
}

/* Clear floats */
.keys, .top {overflow: hidden;}

/* Applying same to the keys */
.keys span, .top span.clear {
	float: left;
	position: relative;
	top: 0;
	
	cursor: pointer;
	
	width: 61px;
	height: 61px;
	
	border-radius: 50%;



	margin: 0 7px 11px 0;
	padding-top: 11px;
	
	color: #c1c1c1;
	line-height: 36px;
	text-align: center;
	
	/* prevent selection of text inside keys */
	user-select: none;
	
	/* Smoothing out hover and active states using css3 transitions */
	transition: all 0.3s ease;
}

/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
	background: #FFF0F5;
	margin-right: 0;
}

.keys span.eval {
	background: #f1ff92;
	color: #888e5f;
}

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

/* Some hover effects */
.keys span:hover,
.keys span.operator:hover, 
.keys span.eval:hover, 
.top span.clear:hover {
    box-shadow: none;
	color:...

JavaScript

// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

// Add onclick event to all the keys and perform operations
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;
		
		// Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
		// If clear key is pressed, erase everything
		if(btnVal == 'C') {
			input.innerHTML = '';
			decimalAdded = false;
		}
		
		// If eval key is pressed, calculate and display the result
		else if(btnVal == '=') {
			var equation = inputVal;
			var lastChar = equation[equation.length - 1];
			
			// Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
			equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
			
			// Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
			if(operators.indexOf(lastChar) > -1 || lastChar == '.')
				equation = equation.replace(/.$/, '');
			
			if(equation)
				input.innerHTML = eval(equation);
				
			decimalAdded = false;
		}
		
		// Basic functionality of the calculator is complete. But there are some problems like 
		// 1. No two operators should be added consecutively.
		// 2. The equation shouldn't start from an operator except minus
		// 3. not more than 1 decimal should be there in a number
		
		// We'll fix these issues using some simple checks
		
		// indexOf works only in IE9+
		else if(operators.indexOf(btnVal) > -1) {
			// Operator is clicked
			// Get the last character from the equation
			var lastChar = inputVal[inputVal.length - 1];
			
			// Only add operator...