Skip to content

Instantly share code, notes, and snippets.

@CarterTsai
Last active December 27, 2015 18:39
Show Gist options
  • Save CarterTsai/7370944 to your computer and use it in GitHub Desktop.
Save CarterTsai/7370944 to your computer and use it in GitHub Desktop.
A Pen by CarterTsai.
<div class="calc" ng-app ng-controller="MainCtrl">
<input ng-model="button.val"
ng-init="button.val=0"
value="{{button.val}}"
disabled="disable"
/>
<div>
<button class="pure-button pure-button-success"
ng-repeat="button in buttons"
ng-click="calc(button)"
>
<span ng-bind=" button"></span>
<div class="content" ng-bind=" button"></div>
</button>
</div>
</div>
<div class="pop-button"></div>
function MainCtrl($scope) {
$scope.buttons = ['1','2','3','4','5',
'6','7','8','9','0',
'+','-','*','/','Mod',
'=','C'];
$scope.operator = "+";
$scope.operand = 0;
$scope.tmp = 0;
$scope.calc = function(val) {
switch (val) {
case '1': case '2': case '3':
case '4': case '5': case '6':
case '7': case '8': case '9':
case '0':
$scope.operand += val;
$scope.button.val = +$scope.operand;
break;
case '+': case '-': case '*':
case '/': case 'Mod':
$scope.operator = val;
$scope.tmp = $scope.operand;
$scope.operand = '';
break;
case 'C':
$scope.operator = "+";
$scope.operand = +0;
$scope.tmp = +0;
$scope.button.val = 0;
break;
default:
// =
// operandL operator operandR = result
if($scope.operator === '+')
$scope.button.val = (+$scope.tmp) + (+$scope.operand);
else if($scope.operator === '-')
$scope.button.val = (+$scope.tmp) - (+$scope.operand);
else if($scope.operator === '*')
$scope.button.val = (+$scope.tmp) * (+$scope.operand);
else if($scope.operator === '/')
$scope.button.val = (+$scope.tmp) / (+$scope.operand);
else
$scope.button.val = (+$scope.tmp) % (+$scope.operand);
$scope.operand = $scope.button.val;
break;
}
}
}
@import "compass/css3";
$button-width: 70px;
$button-height: 60px;
$offset :40px;
.calc {
border: 1px solid #ccc;
width: 470px;
height: auto;
display:block;
overflow:auto;
padding-top: 30px;
padding-bottom: 25px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 30px;
}
.calc {
position: relative;
left: 20%;
top: 10px;
}
.calc > input {
position: relative;
width: $button-width*5+5*15;
height: 50px;
border: 1px solid;
margin-left: 15px;
font-size: 30px;
text-align: right;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-right: 10px;
}
.calc > div > button {
position: relative;
width: $button-width;
height: $button-height;
margin-left: 19px;
margin-top: 20px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 25px;
text-align : center;
box-shadow: 5px 4px 5px black;
&>.content {
position: absolute;
top : 0px;
background: #ccc;
border: 1px solid transparent;
width: $button-width;
height: $button-height;
z-index: -1;
}
$border-color: blue;
&:active {
&>.content {
display: block;
border-top-left-radius: 0px;
border-top-right-radius: 30px;
border-bottom-right-radius:30px;
border-bottom-left-radius: 30px;
content:"";
width: $button-width+($offset/2);
height: $button-height;
border: 1px solid $border-color ;
top: -($button-height)+8;
left: -11px;
position: absolute;
z-index: 99;
background: #42b8dd;
font-size:35px;
text-align : center;
}
&:after {
display: block;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
content:"";
width: $button-width;
height: $button-height;
border-top: 1px solid transparent;
border-bottom: 1px solid $border-color;
border-left: 1px solid $border-color;
border-right: 1px solid $border-color;
top:0px;
left: -0px;
position: absolute;
z-index: 99;
background: #42b8dd;
}
}
}
.pure-button-success {
background: rgb(66, 184, 221);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
color: white;
padding: 15px 0;
}
/*.pop-button {
top : 120px;
position: absolute;
width: $button-width;
height: $button-height;
border: 1px solid #ccc;
}*/
/* button:active {
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment