Creating A Simple Calculator with jQuery

A simple lightweight jQuery plugin used to create a customizable calculator on your webpage/app.

How to use it:

1. Load the necessary jQuery library and the jQuery calculator plugin in the web page.

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="calculator.js"></script>

2. Create the Html for a calculator as follows.

<div class="calculator">
  <input type="text" readonly>
  <div class="row">
    <div class="key">1</div>
    <div class="key">2</div>
    <div class="key">3</div>
    <div class="key last">0</div>
  </div>
  <div class="row">
    <div class="key">4</div>
    <div class="key">5</div>
    <div class="key">6</div>
    <div class="key last action instant">cl</div>
  </div>
  <div class="row">
    <div class="key">7</div>
    <div class="key">8</div>
    <div class="key">9</div>
    <div class="key last action instant">=</div>
  </div>
  <div class="row">
    <div class="key action">+</div>
    <div class="key action">-</div>
    <div class="key action">x</div>
    <div class="key last action">/</div>
  </div>
</div>

3. The calculator is fully styleable via CSS. Add the following CSS snippet into your CSS file and change the styles to fit your needs.

*,
*:after,
*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

*:before,
*:after {
  display: table-cell;
  content: '';
}

*:after { clear: both; }

body { font-family: helvetica, arial, sans-serif; }

.container {
  margin: 0 auto;
  width: 350px;
}

.calculator {
  padding: 10px;
  margin-top: 20px;
  background-color: #ccc;
  border-radius: 5px;
  /*this is to remove space between divs that are inline-block*/
  font-size: 0;
}

.calculator > input[type=text] {
  width: 100%;
  height: 50px;
  border: none;
  background-color: #eee;
  text-align: right;
  font-size: 30px;
  padding-right: 10px;
}

.calculator .row { margin-top: 10px; }

.calculator .key {
  width: 78.7px;
  display: inline-block;
  background-color: black;
  color: white;
  font-size: 1rem;
  margin-right: 5px;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.calculator .key:hover { cursor: pointer; }

.key.last { margin-right: 0px; }

.key.action { background-color: #646060; }

4. Setup the calculator at the beginning of the calculator.js

runningTotal : '',	
currentVal : '',
setCurrentVal: false,
executeAction: '',
display: '',

---

This awesome jQuery plugin is developed by idesi. For more Advanced Usages, please check the demo page or visit the official website.