calculator with keyboard input

by christophe De Pauw

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!DOCTYPE html>
		<title>Calculator</title>
	<body>
		<div id="calculator">
			<div id="total">
			</div>
			<div id="operators">
				<a>6% AK< 25.44</a>
				<a>6% AK> 25.44</a>
				<a>6% niet specialiteit</a>
				<a>6% socialiteit</a>
				<a>12%</a>
				<a>21% groep 31</a>
				<a>21% groep 32</a>
			</div>
			<div id="numbers">
				<a id="one">1</a>
				<a id="two">2</a>
				<a id="three">3</a>
				<a id="four">4</a>
				<a id="five">5</a>
				<a id="six">6</a>
				<a id="seven">7</a>
				<a id="eight">8</a>
				<a id="nine">9</a>
				<a id="decimal">.</a>
				<a id="zero">0</a>
				<a id="clearall">AC</a>
			</div>
		</div>
		<div id="copyright">
		Versie 0.3
		</div>
	</body>
</html>

CSS

body, div, a {
    padding:0;
    margin:0;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

#calculator {
	background-color: #999;
	width: 310px;
	height: 710px;
	border: 3px black solid;
	margin: 10px auto;
	padding: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

#calculator a {
	display: block;
    float: left;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    background: -moz-linear-gradient(top, #EDEDED, #DCDCDC);
    background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#DCDCDC));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EDEDED', endColorstr='#DCDCDC');
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
    border-radius: 10px;
    color: black;
}

#numbers, #operators {
	margin: auto;	
}

#operators a {
	width: 280px;
	height: 35px;
	font-size: 25px;
	padding: 2px;
	margin: 5px 6px;
}

#numbers a {
	width: 50px;
	height: 45px;
	font-size: 30px;
	padding: 10px;
	margin: 5px 15px;
}

#total {
    height: 60px;
    width: 300px;
    margin:auto;
    background-color:white;
    margin-bottom: 5px;
    text-align: right;
    font-size: 50px;
    padding: 0px 5px;
}

a:hover{
    background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#EDEDED));
    background: -moz-linear-gradient(top,  #DCDCDC,  #EDEDED);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#EDEDED');
}

#copyright {
	text-align: center;
	font-size: 10px;
	font-family: Helvetica;

JavaScript

$(document).ready(function(){
	var testNumLength = function(number) {
        if (number.length > 10) {
            totaldiv.text(number.substr(number.length-10,10));
            if (number.length > 9) {
                number = "";
                totaldiv.text("Te groot");
            }
        } 
    };
	function roundToTwo(number) {    
    return +(Math.round(number + "e+2")  + "e-2");
	}
	
	var number = "";
    var newnumber = "";
    var operator = "";
    var totaldiv = $("#total");
    totaldiv.text("0");
    $("#numbers a").not("#clearall").click(function(){
		number += $(this).text();
		totaldiv.text(number);
		testNumLength(number);
    });
    $("#operators a").click(function(){
		operator = $(this).text();
		newnumber = number;
		if (operator === "6% AK< 25.44"){
    		number = (newnumber * 1.536);
			number = roundToTwo(number).toString();
    	} else if (operator === "6% AK> 25.44"){
			number = ((+newnumber + 7.44) * 1.06);
			number = roundToTwo(number).toString();
    	} else if (operator === "6% niet specialiteit"){
			number = (newnumber * 1.526);
			number = roundToTwo(number).toString();
    	} else if (operator === "6% socialiteit"){
			number = (newnumber * 2.12);
			number = roundToTwo(number).toString();
    	} else if (operator === "12%"){
			number = (newnumber * 1.611);
			number = roundToTwo(number).toString();
    	} else if (operator === "21% groep 31"){
			number = (newnumber * 1.7668);
			number = roundToTwo(number).toString();
    	} else if (operator === "21% groep 32"){
			number = (newnumber * 1.7908);
			number = roundToTwo(number).toString();
    	}
		totaldiv.text(number);
    });
    $("#clearall").click(function(){
		number = "";
		totaldiv.text("0");
		if ($(this).attr("id") === "clearall") {
			newnumber = "";
		}
    });
    
	//Add keyboard input
	$(document).keypress(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode === 49) {
            $("#one").click();
   ...