jsFiddle/Gist demo - jQuery UI Calculator

jsFiddle demo hosted on Gist using jQuery UI to render a calculator author(s): Gary Smith

HTML

<script src="/js/empty.js"></script>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="https://raw.github.com/gist/1669828/112ac65229c74a1298b1cffc89b48b6ee9d6ee59/jquery-ui-calculator.js"></script>
<div id="container">
<div id="calc"></div>
</div>

CSS

.ui-calculator { width:9.65em; }
.ui-calculator-container { padding:.2em .2em 0; }
.ui-calculator-display { width:12.3em; padding:.3em; margin-bottom:.3em; font-size:0.7em; overflow:auto; }
.ui-calculator-numberpad, .ui-calculator-functionpad { width:7em; float:left; }
.ui-calculator-functionpad { width:2em; }
.ui-calculator li { float:left; margin:0 .2em .2em 0; }
.ui-calculator-button { display:block; width:2em; height:1.2em; padding:.3em 0 .5em; text-align:center; border:0; }
.ui-calculator-button-wide { width:4.3em; }
.ui-calculator-icon { margin:.2em auto; }

JavaScript

$(document).ready(function() {
	$("#calc").calculator();		
});