amfischer/app.js

## app.js
$(document).ready(function() {

	function convertToCode(str) {
		var arr = str.split("");
		var divideSymbol = decodeURI("%C3%B7");

		var converted = arr.map(function(e) {
			return (e == "x") ? e = "*" : (e == divideSymbol) ? e = "/" : e;
		});

		return converted.join("");
	}

	function deleteButton(str) {
		var arr = str.split("");

		if (str === "** E R R O R **") {
			return "0";
		}

		if (arr.length === 1) {
			arr.pop();
			arr.push("0");
		} else {
			arr.pop();
		}
		return arr.join("");
	}

	$(".button-box").click(function() {
		var currentValue = $("input").val();
		var jsCode = convertToCode(currentValue);

		switch (this.innerHTML) {
			case "AC":
				$("input").val(0).css("text-align", "right");;
				break;
			case "del":
				$("input").val(deleteButton(currentValue)).css("text-align", "right");
				break;
			case "=":
				try {
					$("input").val(eval(jsCode)).css("text-align", "right");;
				} catch(e) {
					$("input").val("** E R R O R **").css("text-align", "center");
				}
				break;
			default:
				switch (currentValue) {
					case "0":
					case "** E R R O R **":
						$("input").val(this.innerHTML).css("text-align", "right");;
						break;
					default:
						$("input").val(currentValue + this.innerHTML);
				}
		}

	});
});

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JS - Calculator</title>

	<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<div class="container">
		<h2>JavaScript Calculator</h2>
		<div class="col clearfix">
			<input type="text" maxlength="15" value="0" readonly>
			<div class="button-box operator">(</div>
			<div class="button-box operator">)</div>
			<div class="button-box operator">del</div>
			<div class="button-box operator">AC</div>
			<div class="button-box">7</div>
			<div class="button-box">8</div>
			<div class="button-box">9</div>
			<div class="button-box operator">&divide</div>
			<div class="button-box">4</div>
			<div class="button-box">5</div>
			<div class="button-box">6</div>
			<div class="button-box operator">x</div>
			<div class="button-box">1</div>
			<div class="button-box">2</div>
			<div class="button-box">3</div>
			<div class="button-box operator">-</div>
			<div class="button-box">0</div>
			<div class="button-box">.</div>
			<div class="button-box equals">=</div>
			<div class="button-box operator">+</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
	<script src="app.js"></script>

</body>
</html>

## styles.css
/*====================
	BASE STYLES
=====================*/

* {
	box-sizing: border-box;
}

h2 {
	text-align: center;
	font-family: 'Special Elite', cursive;
	font-size: 4em;
}


/*====================
	CONTAINER STYLES
=====================*/

.container {
	margin: 7% 30%;
}

.col {
	width: 75%;
	margin: 10% auto;
	font-family: 'Boogaloo', cursive;
}

.clearfix {
	content: "";
	display: table;
	clear: both;
}

/*====================
	CUSTOM STYLES
=====================*/

input {
	border: 1px solid blue;
	border-radius: 4px;
	margin: 5px auto;
	padding: 1px 10px;
	font-size: 3em;
	text-align: right;
	width: 100%;

}

.button-box {
	float: left;
	width: 23%;
	margin: 2% 1%;
	border: 1px solid #c6c6c6;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	font-size: 3em;
	padding: .15em;
}

.button-box:hover {
	background-color: #e1d3c1;
	border: 1px solid black;
}

.operator {
	background-color: #b3b3b3;
}

.operator:hover {
	background-color: #7d7d7d;
}

.equals {
	border: 1px solid #3079ed;
	background-color: #4d90fe;
	color: white;
}

.equals:hover {
	background-color: #3564b1;
}
	$(document).ready(function() {

	function convertToCode(str) {
	var arr = str.split("");
	var divideSymbol = decodeURI("%C3%B7");

	var converted = arr.map(function(e) {
	return (e == "x") ? e = "*" : (e == divideSymbol) ? e = "/" : e;
	});

	return converted.join("");
	}

	function deleteButton(str) {
	var arr = str.split("");

	if (str === " E R R O R ") {
	return "0";
	}

	if (arr.length === 1) {
	arr.pop();
	arr.push("0");
	} else {
	arr.pop();
	}
	return arr.join("");
	}

	$(".button-box").click(function() {
	var currentValue = $("input").val();
	var jsCode = convertToCode(currentValue);

	switch (this.innerHTML) {
	case "AC":
	$("input").val(0).css("text-align", "right");;
	break;
	case "del":
	$("input").val(deleteButton(currentValue)).css("text-align", "right");
	break;
	case "=":
	try {
	$("input").val(eval(jsCode)).css("text-align", "right");;
	} catch(e) {
	$("input").val(" E R R O R ").css("text-align", "center");
	}
	break;
	default:
	switch (currentValue) {
	case "0":
	case " E R R O R ":
	$("input").val(this.innerHTML).css("text-align", "right");;
	break;
	default:
	$("input").val(currentValue + this.innerHTML);
	}
	}

	});
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>JS - Calculator</title>

	<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="container">
	<h2>JavaScript Calculator</h2>
	<div class="col clearfix">
	<input type="text" maxlength="15" value="0" readonly>
	<div class="button-box operator">(</div>
	<div class="button-box operator">)</div>
	<div class="button-box operator">del</div>
	<div class="button-box operator">AC</div>
	<div class="button-box">7</div>
	<div class="button-box">8</div>
	<div class="button-box">9</div>
	<div class="button-box operator">&divide</div>
	<div class="button-box">4</div>
	<div class="button-box">5</div>
	<div class="button-box">6</div>
	<div class="button-box operator">x</div>
	<div class="button-box">1</div>
	<div class="button-box">2</div>
	<div class="button-box">3</div>
	<div class="button-box operator">-</div>
	<div class="button-box">0</div>
	<div class="button-box">.</div>
	<div class="button-box equals">=</div>
	<div class="button-box operator">+</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
	<script src="app.js"></script>

	</body>
	</html>
	/*====================
	BASE STYLES
	=====================*/

	* {
	box-sizing: border-box;
	}

	h2 {
	text-align: center;
	font-family: 'Special Elite', cursive;
	font-size: 4em;
	}


	/*====================
	CONTAINER STYLES
	=====================*/

	.container {
	margin: 7% 30%;
	}

	.col {
	width: 75%;
	margin: 10% auto;
	font-family: 'Boogaloo', cursive;
	}

	.clearfix {
	content: "";
	display: table;
	clear: both;
	}

	/*====================
	CUSTOM STYLES
	=====================*/

	input {
	border: 1px solid blue;
	border-radius: 4px;
	margin: 5px auto;
	padding: 1px 10px;
	font-size: 3em;
	text-align: right;
	width: 100%;

	}

	.button-box {
	float: left;
	width: 23%;
	margin: 2% 1%;
	border: 1px solid #c6c6c6;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	font-size: 3em;
	padding: .15em;
	}

	.button-box:hover {
	background-color: #e1d3c1;
	border: 1px solid black;
	}

	.operator {
	background-color: #b3b3b3;
	}

	.operator:hover {
	background-color: #7d7d7d;
	}

	.equals {
	border: 1px solid #3079ed;
	background-color: #4d90fe;
	color: white;
	}

	.equals:hover {
	background-color: #3564b1;
	}