An open source calculator developed for the Think Through Math product.
The math widget library has a few dependencies:
Acquire each dependency mentioned above.
The latest version of the math widget library can be downloaded via the links below:
The javascript-calculator library is available as a Bower component. Bower makes wonderfully easy to include external components in your project.
The calculator is written in CoffeeScript and styled with Sass. If, for some reason, you wish to either customize the calculator code or compile it in your own build pipeline, it should be straightforward to compile both the CoffeeScript and the Sass using your preferred methods. The build task defined in Gruntfile.js defines the calculator's build process.
Once downloaded, include the javascript-calculator dependencies and the javascript-calculator library itself in your site. The javascript-calculator library exports all of its functionality to a global thinkthroughmath object.
The calculator widget is meant to emulate a real-world calculator, like so:
There are three options to style the calculator: 1. Don't include any of the stylesheets provided, and write your own 2. Include javascript-calculator.css for the structure without any styling 3. Include javascript-calculator.css and javascript-calculator-theme.css for the styling you see in the examples on this page.
To render the calculator within a DOM element, use the build_widget method:
<div class="location-to-render-calculator"></div>
<script>
$(function(){
$(".location-to-render-calculator").each(function(){
thinkthroughmath.widgets.Calculator.build_widget($(this));
});
});
</script>
If the default button ordering doesn't work for you, you can specify the ordering like so:
<div class="location-to-render-calculator-with-fewer-buttons"></div>
<script>
$(".location-to-render-calculator-with-fewer-buttons").each(function(){
ttm.widgets.Calculator.build_widget($(this), ['0','1','2']);
});
</script>
The results look like this:
The default rendering includes all available options, and is equivalent to the JavaScript array:
defaultButtons = [
"square", "square_root", "exponent", "clear",
"pi", "lparen", "rparen", "division",
"7", "8", "9", "multiplication",
"4", "5", "6", "subtraction",
"1", "2", "3", "addition",
"0", "decimal", "negative", "equals"
]