Bootstrap Calculator
An elaborate fiddle simulating the functionality of a calculator using Bootstrap styling.
HTML
<div class="col-lg-12">
<div class="page-header">
<h1 id="navbar"> Bootstrap Calculator</h1>
</div>
<div class="bs-component">
<div class="row enter-stage-south">
<div id="fiddleHook"></div>
</div>
<br/>
<br/>
</div>
</div>
'+',
'-',
'%',
'x',
'C',
'/',
'+/-'],
buttonTypes: [
'warning',
'success'],
buttons: [{
row: 1,
col: 0,
text: 'C',
type: 'success'
}, {
row: 1,
col: 1,
text: '+/-',
type: 'success'
}, {
row: 1,
col: 2,
text: '%',
type: 'success'
}, {
row: 1,
col: 3,
text: '/',
type: 'warning'
}, {
row: 2,
col: 0,
text: '7',
type: 'success'
}, {
row: 2,
col: 1,
text: '8',
type: 'success'
}, {
row: 2,
col: 2,
text: '9',
type: 'success'
}, {
row: 2,
col: 3,
text: 'x',
type: 'warning'
}, {
row: 3,
col: 0,
text: '4',
type: 'success'
}, {
row: 3,
col: 1,
text: '5',
type: 'success'
}, {
row: 3,
col: 2,
text: '6',
type: 'success'
}, {
row: 3,
col: 3,
text: '-',
type: 'warning'
}, {
row: 4,
col: 0,
text: '1',
type: 'success'
}, {
row: 4,
col: 1,
text: '2',
type: 'success'
}, {
CSS
.enter-stage-south {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slide-up;
-webkit-animation-name: slide-up;
}
@-moz-keyframes slide-up {
from {
margin-top: 100%;
}
to {
margin-top: 0%;
}
}
@-webkit-keyframes slide-up {
from {
margin-top: 100%;
}
to {
margin-top: 0%;
}
}
JavaScript
(function (app, $, undefined) {
"use strict";
app.store = app.store || {
operations: [
'+',
'-',
'%',
'x',
'C',
'/',
'+/-'],
buttonTypes: [
'warning',
'success'],
buttons: [{
row: 1,
col: 0,
text: 'C',
type: 'success'
}, {
row: 1,
col: 1,
text: '+/-',
type: 'success'
}, {
row: 1,
col: 2,
text: '%',
type: 'success'
}, {
row: 1,
col: 3,
text: '/',
type: 'warning'
}, {
row: 2,
col: 0,
text: '7',
type: 'success'
}, {
row: 2,
col: 1,
text: '8',
type: 'success'
}, {
row: 2,
col: 2,
text: '9',
type: 'success'
}, {
row: 2,
col: 3,
text: 'x',
type: 'warning'
}, {
row: 3,
col: 0,
text: '4',
type: 'success'
}, {
row: 3,
col: 1,
text: '5',
type: 'success'
}, {
row: 3,
col: 2,
text: '6',
type: 'success'
}, {
row: 3,
col: 3,
text: '-',
type: 'warning'
}, {
row: 4,
col: 0,
text: '1',
type: 'success'
}, {
row: 4,
col: 1,
text: '2',
type: 'success'
}, {
row: 4,
col: 2,
text: '3',
type: 'success'
}, {
row: 4,
col: 0,
text: '+',
type: 'warning'
}, {
row:...