Simple jQuery and HTML Calculator

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

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:

    <td colspan="4"><input id="display" name="display" disabled></input>
    <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>
    <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>
    <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>
    <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>

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.