Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
		<!-- Page Title -->
		<title>Calculator</title>

		<!-- META TAGS -->
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="robots" content="index, follow" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<meta content="text/html; charset=utf-8" http-equiv="content-type" />

		<!-- Favicon -->
		<link rel="shortcut icon" href="favicon.png" />

		<!-- Google Fonts -->
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,300,300italic,600italic,700,700italic,800,800italic" />

		<!-- CSS Stylesheets -->
		<link rel="stylesheet" type="text/css" href="css/style.css" />

		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<!-- BEGIN Wrapper -->
		<div id="wrapper">
			<!-- Hidden infos -->
			<input type="hidden" id="number_one" value="0" />
			<input type="hidden" id="number_two" value="0" />
			<input type="hidden" id="operator" value="+" />
			<input type="hidden" id="cancalculate" value="false" />
			<input type="hidden" id="operatorselected" value="false" />

			<!-- Result -->
			<input type="text" id="result" value="0" readonly />

			<!-- Buttons -->
			<div class="buttons">
				<input type="button" class="button-dark" value="CE" />
				<input type="button" class="button-dark" value="C" />
				<input type="button" class="button-dark" value="&lArr;" />
				<input type="button" class="button-green" value="&divide;" />
			</div>
			<div class="buttons">
				<input type="button" value="7" />
				<input type="button" value="8" />
				<input type="button" value="9" />
				<input type="button" class="button-green" value="X" />
			</div>
			<div class="buttons">
				<input type="button" value="4" />
				<input type="button" value="5" />
				<input type="button" value="6" />
				<input type="button" class="button-green" value="-" />
			</div>
			<div class="buttons">
				<input type="button" value="1" />
				<input type="button" value="2" />
				<input type="button" value="3" />
				<input type="button" class="button-green" value="+" />
			</div>
			<div class="buttons">
				<input type="button" value="" />
				<input type="button" value="0" />
				<input type="button" value="," />
				<input type="button" class="button-blue" value="=" />
			</div>
		</div>
		<!-- END Wrapper -->

		<!-- BEGIN Scripts -->
		<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
		<script type="text/javascript">
			// when a button was clicked
			$("input[type='button']").click(function() {
				var result = 0;

				if(isNumeric($(this).val())) {
					if($("#result").val().slice(-1) == ".") {
						var cal = 0;
						if(!$.parseJSON($("#operatorselected").val())) {
							cal = '' + $("#number_one").val() + $(this).val();
							$("#number_one").val(cal.toString());
						} else {
							cal = '' + $("#number_two").val() + $(this).val();
							$("#number_two").val(cal.toString());
							$("#cancalculate").val("true");
						}
						$("#result").val(cal.toString());
					} else {
						var value = 0;
						var cal = 0;
						if(!$.parseJSON($("#operatorselected").val())) {
							value = parseFloat($("#number_one").val());
							if(value == 0) {
								cal = parseFloat($(this).val());
							} else {
								cal = '' + value + parseFloat($(this).val());
							}
							$("#number_one").val(cal.toString());
						} else {
							value = parseFloat($("#number_two").val());
							if(value == 0) {
								cal = parseFloat($(this).val());
							} else {
								cal = '' + value + parseFloat($(this).val());
							}
							$("#number_two").val(cal.toString());
							$("#cancalculate").val("true");
						}
						$("#result").val(cal.toString());
					}
				}

				if(isOperator($(this).val())) {
					$("#operator").val($(this).val());
					$("#operatorselected").val("true");
				}

				if($(this).val().toLowerCase() == "c") {
					reset(true);
				}

				if($(this).val().toLowerCase() == ",") {
					var current = 0;
					if(!$.parseJSON($("#operatorselected").val())) {
						current = parseFloat($("#number_one").val()) + ".";
						$("#result").val(current);
						$("#number_one").val(current);
					} else {
						current = parseFloat($("#number_two").val()) + ".";
						$("#result").val(current);
						$("#number_two").val(current);
					}
				}

				if($(this).val().toLowerCase() == "ce") {
					if($.parseJSON($("#operatorselected").val())) {
						$("#result").val("0");
						$("#number_two").val("0");
					}
				}

				if($(this).val().toLowerCase() == "⇐") {
					var current = $("#result").val();
					if(current.length > 1) {
						$("#result").val(current.substring(0, current.length - 1));
					} else {
						$("#result").val("0");
					}

					if(!$.parseJSON($("#operatorselected").val())) {
						$("#number_one").val(parseFloat($("#result").val()));
					} else {
					}
				}

				if($(this).val() == "=") {
					if($.parseJSON($("#cancalculate").val())) {
						// calculation
						var operator = $("#operator").val().toLowerCase();
						if(operator == "+") {
							result = parseFloat($("#number_one").val()) + parseFloat($("#number_two").val());
						} else if(operator == "-") {
							result = parseFloat($("#number_one").val()) - parseFloat($("#number_two").val());
						} else if(operator == "x") {
							result = parseFloat($("#number_one").val()) * parseFloat($("#number_two").val());
						} else if(operator == "÷") {
							result = parseFloat($("#number_one").val()) / parseFloat($("#number_two").val());
						}
						$("#result").val(result);
						// reset
						reset(false);
					}
				}
			});

			// reset the calculator
			function reset(textreset) {
				if(textreset) {
					$("#result").val("0");
				}
				$("#number_one").val("0");
				$("#number_two").val("0");
				$("#cancalculate").val("false");
				$("#operatorselected").val("false");
			}

			// check if the variable a operator, returns bool
			function isOperator(string) {
				if(string == "+" || string == "-" || string.toLowerCase() == "x" || string == "÷") {
					return true;
				}
				return false;
			}

			// check if the variable numeric or not, returns bool
			function isNumeric(n) {
			  return !isNaN(parseFloat(n)) && isFinite(n);
			}
		</script>
		<!-- END Scripts -->
	</body>
</html>