Skip to content

Instantly share code, notes, and snippets.

@harshitanand

harshitanand/Realtime Calculator.markdown

Created February 29, 2016 08:36
Show Gist options
  • Save harshitanand/630cab974082bf657d37 to your computer and use it in GitHub Desktop.
Save harshitanand/630cab974082bf657d37 to your computer and use it in GitHub Desktop.
Download ZIP
Realtime Calculator
Raw
index.html
<html ng-app="myapp">
<body ng-controller="calculator">
<div id="calculator">
<!-- Screen and clear key-->
<div class="top"><span class="clear" ng-click="expr='0'">C</span>
<div>
<input type="text" class="screen" ng-model="expr"/>
</div>
</div>
<div class="keys">
<!-- operators and other keys-->
<span ng-click="eval('7')">7</span>
<span ng-click="eval('8')">8</span>
<span ng-click="eval('9')">9</span>
<span class="operator" ng-click='eval("+")'>+</span>
<span ng-click="eval('4')">4</span>
<span ng-click="eval('5')">5</span>
<span ng-click="eval('6')">6</span>
<span class="operator" ng-click='eval("-")'>-</span>
<span ng-click="eval('1')">1</span>
<span ng-click="eval('2')">2</span>
<span ng-click="eval('3')">3</span>
<span class="operator" ng-click='eval("/")'>/</span>
<span ng-click="eval(0)">0</span>
<span ng-click='eval(".")'>.</span>
<span class="eval" ng-click="calculate()">=</span>
<span class="operator" ng-click='eval("*")'>*</span>
</div>
</div>
<div class="repeater-container">
<h1> Calculation Logs </h1>
<div vs-repeat='10' vs-scroll-parent=".repeater-container">
<div ng-repeat="log in logs | orderBy:'-$id'" class="well">
<span>{{log.data}}</span>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
angular.module "myapp",['firebase']
.constant "db_url","https://intense-fire-9469.firebaseio.com/RealtimeCalculator/logs/"
.controller "calculator", ($scope, $firebaseArray, db_url)->
## Storing In DB -> Firebase
logs = new Firebase(db_url)
$scope.logs = $firebaseArray(logs)
# Calculator Logic started
$scope.expr = '0'
$scope.eval = (val)->
if $scope.expr is '0'
$scope.expr = val
else
$scope.expr += val
$scope.calculate = ->
ex = $scope.expr
time = new Date().valueOf()
$scope.expr = eval($scope.expr)
res = ex+" = "+$scope.expr
$scope.logs.$add({
id: time,
data: res
})
# End of calculator logic
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.0.2/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="http://kamilkp.github.io/angular-vs-repeat/angular-vs-repeat.js"></script>
Raw
style.css
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* Better text styling */
font: bold 14px Arial, sans-serif;
}
/* Finally adding some IE9 fallbacks for gradients to finish things up */
/* A nice BG gradient */
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
}
/* Using box shadows to create 3D effects */
#calculator {
float: left;
width: 325px;
height: auto;
margin: 100px auto;
margin-left: 300px;
padding: 20px 20px 9px;
background: #808080;
background: linear-gradient(#808080, #808080);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/* Top portion */
.top span.clear {
float: left;
}
/* Inset shadow on the screen to create indent */
.top .screen {
height: 40px;
width: 212px;
float: right;
padding: 0 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/* Typography */
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}
/* Clear floats */
.keys, .top {overflow: hidden;}
/* Applying same to the keys */
.keys span, .top span.clear {
float: left;
position: relative;
top: 0;
cursor: pointer;
width: 66px;
height: 36px;
background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
margin: 0 7px 11px 0;
color: #888;
line-height: 36px;
text-align: center;
/* prevent selection of text inside keys */
user-select: none;
/* Smoothing out hover and active states using css3 transitions */
transition: all 0.2s ease;
}
/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
background: #FFF0F5;
margin-right: 0;
}
.keys span.eval {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
}
.top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
/* Some hover effects */
.keys span:hover {
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}
.keys span.eval:hover {
background: #abb850;
box-shadow: 0px 4px #717a33;
color: #ffffff;
}
.top span.clear:hover {
background: #f68991;
box-shadow: 0px 4px #d3545d;
color: white;
}
/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}
.keys span.eval:active {
box-shadow: 0px 0px #717a33;
top: 4px;
}
.top span.clear:active {
top: 4px;
box-shadow: 0px 0px #d3545d;
}
.repeater-container{
background: #029931;
overflow-y: auto;
width: 325px;
height: 400px;
float: right;
margin-right: 300px;
margin-top: 70px;
text-align: center;
}
.well{
margin-left: 20px;
margin-right: 20px;
background: #F5882F;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/slate/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
@harshitanand
Copy link
Author

A realtime calculator app with firebase

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment