Simple jQuery and HTML Calculator
File Size: | 4.12 KB |
---|---|
Views Total: | 2399 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simple online calculator app built with JavaScript (jQuery) and HTML table.
How to use it:
1. Add the calculator buttons to an HTML table as follows:
<table> <tr> <td colspan="4"><input id="display" name="display" disabled></input> </td> </tr> <tr> <td><button id="button1" value="1">1</button></td> <td><button id="button2" value="2">2</button></td> <td><button id="button3" value="3">3</button></td> <td><button id="addButton">+</button></td> </tr> <tr> <td><button id="button4" value="4">4</button></td> <td><button id="button5" value="5">5</button></td> <td><button id="button6" value="6">6</button></td> <td><button id="subtractButton">-</button></td> </tr> <tr> <td><button id="button7" value="7">7</button></td> <td><button id="button8" value="8">8</button></td> <td><button id="button9" value="9">9</button></td> <td><button id="multiplyButton">*</button></td> </tr> <tr> <td><button id="clearButton">C</button></td> <td><button id="button0" value="0">0</button></td> <td><button id="equalsButton">=</button></td> <td><button id="divideButton">÷</button></td> </tr> </table>
2. Load the JavaScript calc.js
after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/calc.js"></script>
3. Apply CSS styles to the calculator.
button { font-size: 200%; width: 80px; height: 80px; font: normal 40pt Tahoma; border-radius: 5pt; } input { font-size: 40px; width: 330px; height: 80px; text-align: right; border-radius: 5pt; color: black; }
4. Override the default variables if needed.
// variable buffer used to store all recent calculations var buffer = ''; // variable to store the last operation var lastOperador = ''; // variable to store the last calculation var lastCalc = ''; // default display selector var display = $('#display');
This awesome jQuery plugin is developed by saimanmoreno. For more Advanced Usages, please check the demo page or visit the official website.