HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link rel="stylesheet" href="calculatorstyles.css">
<script src="calculator.js"></script>
</head>

<body>
<div id="main">
<form>
<div class="row">
<input id="output" type="text" value="" readonly>
<input class="button" type="button" value="clr" onClick="clearit()">
</div>
<div class="row">
<input class="button" type="button" value="7" onClick="getNumber('7')">
<input class="button" type="button" value="8" onClick="getNumber('8')">
<input class="button" type="button" value="9" onClick="getNumber('9')">
<input class="button" type="button" value="*" onClick="getOperator('*')">
</div>
<div class="row">
<input class="button" type="button" value="4" onClick="getNumber('4')">
<input class="button" type="button" value="5" onClick="getNumber('5')">
<input class="button" type="button" value="6" onClick="getNumber('6')">
<input class="button" type="button" value="/" onClick="getOperator('/')">
</div>
<div class="row">
<input class="button" type="button" value="1" onClick="getNumber('1')">
<input class="button" type="button" value="2" onClick="getNumber('2')">
<input class="button" type="button" value="3" onClick="getNumber('3')">
<input class="button" type="button" value="-" onClick="getOperator('-')">
</div>
<div class="row">
<input class="button" type="button" value="0" onClick="getNumber('0')">
<input class="button" type="button" value="." onClick="getNumber('.')">
<input class="button" type="button" value="=" onClick="calculate()">
<input class="button" type="button" value="+" onClick="getOperator('+')">
</div>
</form>

</div>
</body>
</html>

Stylesheet

body {
font-family: arial, sans-serif;
font-size: 14px;
color: #000;
background-color: #235;
}

#main {
margin-top:20px;
padding-top:20px;
width: 240px;
height: 340px;
background-color: #aaa;
margin-left:auto;
margin-right:auto;
border-top:solid 3px #eee;
border-left:solid 3px #eee;
border-bottom:solid 3px #444;
border-right:solid 3px #444;
border-radius:20px;
}

#output {
padding-right:8px;
width:140px;
height:50px;
text-align:right;
border-top:solid 2px #444;
border-left:solid 2px #444;
outline: solid 1px #000;
}

.row{
width:224px;
height:50px;
padding:8px;
margin-left:0px;
margin-right:0px;
background-color:#aaa;
}

.button {
width: 40px;
height: 40px;
margin-left:8px;
font-weight: bold;
background-color: #a98;
border-top:solid 3px #fed;
border-left:solid 3px #fed;
border-bottom:solid 3px #432;
border-right:solid 3px #432;
border-radius:8px;
}

.button:active {
border-top:solid 3px #432;
border-left:solid 3px #432;
border-bottom:solid 3px #fed;
border-right:solid 3px #fed;
}

Javascript

var calc = [];
var n=0;
calc[n]="";
function getNumber(char){
calc[n] += char;
showOutput();
}

function getOperator(char){
n++;
calc[n] = char;
showOutput();
n++;
calc[n]="";
}

function calculate(){
var num = parseFloat(calc[0]);
num=Math.round(num*1000)/1000;
for(n=1;n<calc.length-1;n+=2){
var operator=calc[n];
if(operator=="+") num+=parseFloat(calc[n+1]);
if(operator=="-") num-=parseFloat(calc[n+1]);
if(operator=="*") num*=parseFloat(calc[n+1]);
if(operator=="/") num/=parseFloat(calc[n+1]);
}
num=Math.round(num*1000)/1000;
calc[n]="=";
n++;
calc[n]=num;
showOutput();
}

function clearit(){
for(n=0;n<calc.length;n++){
calc[n]="";
}
n=0;
showOutput();
}
function showOutput(){
if (calc.join(" ").length<24){
document.getElementById("output").value = calc.join(" ");
}
else {
document.getElementById("output").value = calc.join(" ").substring(calc.join(" ").length-22, calc.join(" ").length);
}
}