A-J-C/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
        <link rel="stylesheet" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="calculator">
            <div id="total">
            </div>
            <div id="operators">
                <a>+</a>
                <a>-</a>
                <a>&divide;</a>
                <a>&times;</a>
            </div>
            <div id="side">
                <a id="sq">^</a>
                <a id="sqrt">√</a>
                <a id="decimal">.</a>
                <a id="equals">=</a>
            </div>
            <div id="numbers">
                <a>1</a>
                <a>2</a>
                <a>3</a>
                <a>4</a>
                <a>5</a>
                <a>6</a>
                <a>7</a>
                <a>8</a>
                <a>9</a>
                <a id="clear">C</a>
                <a>0</a>
                <a id="clearall">AC</a>
            </div>
        </div>
    </body>
</html>

## script.js
$(document).ready(function(){
	var testNumLength = function(number) {
        if (number.length > 9) {
            totaldiv.text(number.substr(number.length-9,9));
            if (number.length > 15) {
                number = "";
                totaldiv.text("Err");
            }
        }
    };
	var number = "";
    var newnumber = "";
    var operator = "";
    var totaldiv = $("#total");
    totaldiv.text("0");
    $("#numbers a").not("#clear,#clearall").click(function(){
		number += $(this).text();
		totaldiv.text(number);
		testNumLength(number);
    });
   $("#operators a, #side a").not("#equals, #decimal").click(function(){
        if ($(this).attr('id') === 'sqrt') {
            operator = "sqrt";
            $("#equals").click();
            return;
        }
        operator = $(this).text();
        newnumber = number;
        number = "";
        totaldiv.text("0");
    });
    $("#clear,#clearall").click(function(){
		number = "";
		totaldiv.text("0");
		if ($(this).attr("id") === "clearall") {
			newnumber = "";
		}
    });
    //Add your last .click() here!
    $("#equals").click(function(){
    	if (operator === "+"){
    		number = (parseInt(number, 10) + parseInt(newnumber,10)).toString(10);
    	} else if (operator === "-"){
    		number = (parseInt(newnumber, 10) - parseInt(number,10)).toString(10);
    	} else if (operator === "÷"){
    		number = (parseInt(newnumber, 10) / parseInt(number,10)).toString(10);
    	} else if (operator === "×"){
    		number = (parseInt(newnumber, 10) * parseInt(number,10)).toString(10);
    	}
    	totaldiv.text(number);
    	testNumLength(number);
    	number = "";
    	newnumber = "";
    });
});

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

#calculator {
	background-color: #999;
	width: 310px;
	height: 460px;
	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: 46px;
	height: 45px;
	font-size: 39px;
	padding: 2px;
	margin: 5px 6px;
}

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

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

#side {
	width: 49px;
	float: right;
}

#side a {
	width: 40px;
	height: 40px;
	float: right;
	font-size: 32px;
	padding: 10px;
	margin: 5px;
}

a#equals {
	padding-top: 50px;
	height: 100px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Calculator</title>
	<link rel="stylesheet" href="style.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script src="script.js"></script>
	</head>
	<body>
	<div id="calculator">
	<div id="total">
	</div>
	<div id="operators">
	<a>+</a>
	<a>-</a>
	<a>÷</a>
	<a>×</a>
	</div>
	<div id="side">
	<a id="sq">^</a>
	<a id="sqrt">√</a>
	<a id="decimal">.</a>
	<a id="equals">=</a>
	</div>
	<div id="numbers">
	<a>1</a>
	<a>2</a>
	<a>3</a>
	<a>4</a>
	<a>5</a>
	<a>6</a>
	<a>7</a>
	<a>8</a>
	<a>9</a>
	<a id="clear">C</a>
	<a>0</a>
	<a id="clearall">AC</a>
	</div>
	</div>
	</body>
	</html>
	$(document).ready(function(){
	var testNumLength = function(number) {
	if (number.length > 9) {
	totaldiv.text(number.substr(number.length-9,9));
	if (number.length > 15) {
	number = "";
	totaldiv.text("Err");
	}
	}
	};
	var number = "";
	var newnumber = "";
	var operator = "";
	var totaldiv = $("#total");
	totaldiv.text("0");
	$("#numbers a").not("#clear,#clearall").click(function(){
	number += $(this).text();
	totaldiv.text(number);
	testNumLength(number);
	});
	$("#operators a, #side a").not("#equals, #decimal").click(function(){
	if ($(this).attr('id') === 'sqrt') {
	operator = "sqrt";
	$("#equals").click();
	return;
	}
	operator = $(this).text();
	newnumber = number;
	number = "";
	totaldiv.text("0");
	});
	$("#clear,#clearall").click(function(){
	number = "";
	totaldiv.text("0");
	if ($(this).attr("id") === "clearall") {
	newnumber = "";
	}
	});
	//Add your last .click() here!
	$("#equals").click(function(){
	if (operator === "+"){
	number = (parseInt(number, 10) + parseInt(newnumber,10)).toString(10);
	} else if (operator === "-"){
	number = (parseInt(newnumber, 10) - parseInt(number,10)).toString(10);
	} else if (operator === "÷"){
	number = (parseInt(newnumber, 10) / parseInt(number,10)).toString(10);
	} else if (operator === "×"){
	number = (parseInt(newnumber, 10) * parseInt(number,10)).toString(10);
	}
	totaldiv.text(number);
	testNumLength(number);
	number = "";
	newnumber = "";
	});
	});
	body, div, a {
	padding:0;
	margin:0;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	}

	#calculator {
	background-color: #999;
	width: 310px;
	height: 460px;
	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: 46px;
	height: 45px;
	font-size: 39px;
	padding: 2px;
	margin: 5px 6px;
	}

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

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

	#side {
	width: 49px;
	float: right;
	}

	#side a {
	width: 40px;
	height: 40px;
	float: right;
	font-size: 32px;
	padding: 10px;
	margin: 5px;
	}

	a#equals {
	padding-top: 50px;
	height: 100px;
	}