Creating A Simple Calculator with jQuery
File Size: | 32.9 KB |
---|---|
Views Total: | 24244 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.