Press "Enter" to skip to content

Calculator App With jQuery and Bootstrap | SimpleCalculadora

SimpleCalculadora is a simple, nice-looking, and highly configurable calculator app for your next web design project, built with jQuery framework and Bootstrap.

jquery calculator github, formula builder jquery, calculator in jquery, jquery calculation form example, javascript neumorphism style calculator plugin

How to make use of it:

1. Requires jQuery library and Bootstrap 3 framework loaded in your document.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.1.4.min.js"></script>

2. Load SimpleCalculadorajQuery.css and SimpleCalculadorajQuery.js into the document.

<link rel="stylesheet" href="SimpleCalculadorajQuery.css">
<script src="SimpleCalculadorajQuery.js"></script>

3. Create a container item for the calculator.

<div id="demo"></div>

4. Call the function to create a virtual calculator inside the container you just created.

$("#demo").Calculadora();

5. Options available to customize the calculator.

// custom header html
TituloHTML:'<a class="btn-block btn3d btn btn-success" href=" " target="_blank">Calculadora</a>',

// buttons
Botones:["7","8","9","+","4","5","6","-","3","2","1","*","0",".","=","/"],

// Arithmetic operators
Signos:["+", "-", "*", "/"],

// CSS Classes
ClaseBtns1: 'primary',
ClaseBtns2: 'success',
ClaseBtns3: 'warning',
ClaseColumnas:'col-md-3 mbottom',
ClaseBotones:'btn3d btn-lg btn-block btn btn-',
txtSalida:idInstancia+'txtResultado',
ClasetxtSalida:'form-control txtr',
InputBorrar:idInstancia+'Borrar',
ClaseInputBorrar:'btn3d btn btn-danger btn-lg btn-block',
EtiquetaBorrar:'Borrar'

customizable calculator application with jquery, SimpleCalculadora Plugin/Github


See Demo And Download

Official Website(oscaruhp): Click Here

This superior jQuery/javascript plugin is developed by oscaruhp. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.