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.










