Responsive & Mobile-friendly jQuery Calculator Plugin

Calc is a tiny calculator plugin built on top of jQuery and Bootstrap 3 that creates a responsive, mobile-friendly calculator App for desktop & mobile devices.

See also:

• jQuery Easy Calculator Plugin
• jQuery Based Inline Calculator Inside Input Field - Calculadora

How to use it:

1. Load the latest version of Twitter Bootstrap 3 framework in the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> 

2. Load the jQuery calc plugin in the document. Make sure you have jQuery library loaded.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.calc.js"></script>

3. Markup Html structure for the calculator App.

<div id="calculator">
<div class="row">
<div class="col-sm-12">
<div class="well result"> 0 </div>
</div>
<div class="digits">
<div class="col-xs-3">
<div class="well digit">7</div>
</div>
<div class="col-xs-3">
<div class="well digit">8</div>
</div>
<div class="col-xs-3">
<div class="well digit">9</div>
</div>
<div class="col-xs-3">
<div class="well digit">+</div>
</div>
<div class="col-xs-3">
<div class="well digit">4</div>
</div>
<div class="col-xs-3">
<div class="well digit">5</div>
</div>
<div class="col-xs-3">
<div class="well digit">6</div>
</div>
<div class="col-xs-3">
<div class="well digit">-</div>
</div>
<div class="col-xs-3">
<div class="well digit">1</div>
</div>
<div class="col-xs-3">
<div class="well digit">2</div>
</div>
<div class="col-xs-3">
<div class="well digit">3</div>
</div>
<div class="col-xs-3">
<div class="well digit">&times;</div>
</div>
<div class="col-xs-3">
<div class="well digit">0</div>
</div>
<div class="col-xs-3">
<div class="well digit">.</div>
</div>
<div class="col-xs-3">
<div class="well digit">=</div>
</div>
<div class="col-xs-3">
<div class="well digit">&divide;</div>
</div>
</div>
</div> 
</div>

4. A little bit CSS codes to style the digits and result.

.digits .well {
text-align: center;
cursor: pointer;
font-weight: bold;
font-size: 2em;
}
.result {
text-align: right;
font-weight: bold;
font-size: 2em;
}

Change log:

2014-05-09

• added clear function

---

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