A Pen by Harshit Anand on CodePen.
Created
February 29, 2016 08:36
-
-
Save harshitanand/630cab974082bf657d37 to your computer and use it in GitHub Desktop.
Realtime Calculator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A realtime calculator app with firebase