Simple Material Design Calculator With jQuery - calculator.js

calculator.js is a simple-to-use, Material Design styled calculator web app built using jQuery and Bootstrap framework.

Installation:

# NPM
$ npm install material_calculator --save

# Bower
$ bower install material_calculator

How to use it:

1. Load the required style sheets in the document's head section.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="creative.min.css">

2. The primary HTML structure for the calculator.

<div class="col-md-4 col-md-offset-4 calculator" align="center">
  <div class="row displayBox">
    <p class="displayText" id="display">0</p>
  </div>
  <div class="row numberPad">
    <div class="col-md-9">
      <div class="row">
        <button class="btn clear hvr-back-pulse" id="clear">C</button>
        <button class="btn btn-calc hvr-radial-out" id="sqrt">√</button>
        <button class="btn btn-calc hvr-radial-out hvr-radial-out" id="square">x<sup>2</sup></button>
      </div>
      <div class="row">
        <button class="btn btn-calc hvr-radial-out" id="seven">7</button>
        <button class="btn btn-calc hvr-radial-out" id="eight">8</button>
        <button class="btn btn-calc hvr-radial-out" id="nine">9</button>
      </div>
      <div class="row">
        <button class="btn btn-calc hvr-radial-out" id="four">4</button>
        <button class="btn btn-calc hvr-radial-out" id="five">5</button>
        <button class="btn btn-calc hvr-radial-out" id="six">6</button>
      </div>
      <div class="row">
        <button class="btn btn-calc hvr-radial-out" id="one">1</button>
        <button class="btn btn-calc hvr-radial-out" id="two">2</button>
        <button class="btn btn-calc hvr-radial-out" id="three">3</button>
      </div>
      <div class="row">
        <button class="btn btn-calc hvr-radial-out" id="plus_minus">&#177;</button>
        <button class="btn btn-calc hvr-radial-out" id="zero">0</button>
        <button class="btn btn-calc hvr-radial-out" id="decimal">.</button>
      </div>
    </div>
    <div class="col-md-3 operationSide">
      <button id="divide" class="btn btn-operation hvr-fade">÷</button>
      <button id="multiply" class="btn btn-operation hvr-fade">×</button>
      <button id="subtract" class="btn btn-operation hvr-fade">−</button>
      <button id="add" class="btn btn-operation hvr-fade">+</button>
      <button id="equals" class="btn btn-operation equals hvr-back-pulse">=</button>
    </div>
  </div>
</div>

3. Load jQuery library and the jQuery calculator.js script at the end of the document. That's it.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/calculate.js"></script>

Change log:

2019-05-24

• Fixed bug, when dividing by 0

2018-01-21

• Better message

2018-01-17

• Bugfix

2017-10-19

• v1.2.9

---

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