A Pen by CarterTsai.

angular-Calculator.markdown

angular Calculator

A Pen by CarterTsai on CodePen.

License.

index.html

<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>

script.js

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;
    }
  }
}

style.scss

@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 { 
  
}*/