Simple jQuery and HTML Calculator is a simple online calculator application built with JavaScript (jQuery) and an HTML table.

Must Read: Calculator App With jQuery and Bootstrap | SimpleCalculadora

Simple Calculator Program Using jQuery Details

How to make use of it:

1. Add the calculator buttons to the 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">&#247;</button></td>
  </tr>
</table>

2. Load 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 default variables if necessary.

// 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');

See Demo And Download

Official Website(saimanmoreno): Click Here

This superior jQuery/javascript plugin is developed by saimanmoreno. For extra Advanced Usage, please go to the official website.