Skip to content

Instantly share code, notes, and snippets.

@bidego

bidego/calculatorjs.markdown

Last active October 24, 2017 23:41
Show Gist options
  • Save bidego/bc7be8f8906bd9fe52d716d08bb9f21e to your computer and use it in GitHub Desktop.
Save bidego/bc7be8f8906bd9fe52d716d08bb9f21e to your computer and use it in GitHub Desktop.
Download ZIP
CalculatorJS
Raw
calculatorjs.markdown
Raw
index.html
<body ng-app="calculatorApp">
<div class="container" ng-controller="StartUpController" ng-keypress="escribirTeclado($event)">
<div class="calculadora">
<hgroup>
<h1>JS Calculator</h1>
<h3>by <a href="https://codepen.io/bidego/" target="_blank">bidego</a></h3>
</hgroup>
<form>
<hgroup class="visor">
<h6 ng-bind="acumulador.operacion"></h6>
<h2 ng-bind="acumulador.total"></h2>
</hgroup>
<div class="botones">
<div ng-repeat="boton in boton">
<button ng-click="escribir(boton.respuesta)">{{boton.boton}}</button>
</div>
</div>
</form>
</div>
</div>
</body>
Raw
script.js
var calculatorAppModule = angular.module("calculatorApp", []);
calculatorAppModule.factory('Boton', function(){
var boton = {};
boton.query = ()=>{
return [
{ boton: 'AC', respuesta: 'fullReset' },
{ boton: 'C', respuesta: 'reset' },
{ boton: 0, respuesta: 0 },
{ boton: 1, respuesta: 1 },
{ boton: 2, respuesta: 2 },
{ boton: 3, respuesta: 3 },
{ boton: 4, respuesta: 4 },
{ boton: 5, respuesta: 5 },
{ boton: 6, respuesta: 6 },
{ boton: 7, respuesta: 7 },
{ boton: 8, respuesta: 8 },
{ boton: 9, respuesta: 9 },
{ boton: '.', respuesta: '.' },
{ boton: '+', respuesta: '+' },
{ boton: '-', respuesta: '-' },
{ boton: 'x', respuesta: '*' },
{ boton: '/', respuesta: '/' },
{ boton: '=', respuesta: '=' }
];
};
return boton;
});
calculatorAppModule.controller('StartUpController',
function($scope, Boton) {
$scope.acumulador = { total : 0, operacion: 0, ultimoTotal: 0, ultimaOp: 0 }
$scope.escribir = function(e) {
if(e === 'reset') {
$scope.acumulador.total = $scope.acumulador.ultimo;
$scope.acumulador.operacion = $scope.acumulador.ultimaOp;
}
else if(e === 'fullReset') {
$scope.acumulador.total = 0;
$scope.acumulador.operacion = 0;
$scope.acumulador.ultimo = 0;
$scope.acumulador.ultimaOp = 0;
}
else if($scope.acumulador.total === 0 && $scope.acumulador.operacion === 0) {
$scope.acumulador.total = e.toString();
$scope.acumulador.operacion = e.toString();
}
else if($scope.acumulador.total === 0 ) {
$scope.acumulador.total = e.toString();
}
else if(e === '=') {
if($scope.acumulador.ultimo!=$scope.acumulador.total) {
$scope.acumulador.operacion = '('+$scope.acumulador.operacion+')';
$scope.acumulador.ultimaOp = $scope.acumulador.operacion;
$scope.acumulador.total = eval($scope.acumulador.total);
$scope.acumulador.ultimo = $scope.acumulador.total;
}
else return;
}
else if(!isNaN(e)) {
$scope.acumulador.total += e.toString();
$scope.acumulador.operacion += e.toString();
}
else if(!isNaN($scope.acumulador.total.toString()[$scope.acumulador.total.toString().length-1])) {
$scope.acumulador.total += e.toString();
$scope.acumulador.operacion += e.toString();
}
}
$scope.boton = Boton.query();
$scope.escribirTeclado = function(e) {
e = e || window.event;
var charCode = e.charCode || e.keyCode,
character = String.fromCharCode(charCode);
if(charCode>=42 && charCode <= 57) {
$scope.escribir(character)
}
else if(charCode == 13) {
e.preventDefault();
$scope.escribir('=');
}
};
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Oleo+Script|Press+Start+2P');
body {
background-color:#aaa;
}
.container {
margin:auto;
}
.calculadora {
background-color: #bcbcbc;
width:320px;
margin:auto;
border-radius:20px;
padding: 15px 0 15px;
border-bottom: 5px solid #333;
box-shadow: 10px 10px 5px #000;
transform: rotate3d(1, -1, -1, 2deg) translateZ(200px) rotate(1deg) skewX(-10deg);
margin-top:10vh;
}
.container > .calculadora > hgroup {
color:#eee;
margin: auto;
width:300px;
text-align:center;
}
.container > .calculadora > hgroup > h1,.container > .calculadora > hgroup > h3 {
text-shadow: 1px 1px 1px #333;
margin:0;
}
.container > hgroup > h3 {
font-family: 'Oleo Script', cursive;
}
a {
text-decoration:none;
color: #cdf;
}
a:hover {
text-decoration:none;
color: #bce;
transition: all 0.4s ease;
}
.visor {
font-family: 'Press Start 2P', cursive;
border-radius: 7px;
background: linear-gradient(#cdcdcd, #cecece);
border:1px solid #bbb;
border-top:3px solid #555;
margin:25px auto 3px;
padding-top:2px;
width:259px;
height:50px;
text-align: right;
}
h2,h6 {
margin:0;
padding:0;
max-width:259px;
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
}
h6 {
color:#999;
}
.botones {
margin: auto;
width:300px;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.botones div {
height: 35px;
margin: 6px 5px;
flex: -2 1 20%;
}
.botones div button {
color: White;
font-size:1em;
border-radius: 10%;
border-bottom: 2px solid black;
background: linear-gradient(#aaa, #666, #ddd);
width:35px;
height:40px;
cursor:pointer;
}
.botones div:nth-of-type(1) button,.botones div:nth-of-type(2) button {
background: linear-gradient(#c00, #700, #fdd);
}
.botones div button:active {
transform:translateY(2px) scale(0.95);
}
.botones div button:focus {
outline:none
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment