angular

Build a Angular Arithmetic Calculator Web App Using Pure CSS Framework in Browser Using Javascript Full Project For Beginners


 

 

 

Welcome folks today in this blog post we will be building a arithmetic calculator in angular using pure css framework in javascript.All the full source code of the application is given below.

 

 

 

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.3.0/pure-min.css"/>
<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 src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

@import "compass/css3";
 .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: 425px;
     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: 70px;
     height: 60px;
     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;
}
 .calc > div > button > .content {
     position: absolute;
     top: 0px;
     background: #ccc;
     border: 1px solid transparent;
     width: 70px;
     height: 60px;
     z-index: -1;
}
 .calc > div > button: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: 90px;
     height: 60px;
     border: 1px solid blue;
     top: -52px;
     left: -11px;
     position: absolute;
     z-index: 99;
     background: #42b8dd;
     font-size: 35px;
     text-align: center;
}
 .calc > div > button:active: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: 70px;
     height: 60px;
     border-top: 1px solid transparent;
     border-bottom: 1px solid blue;
     border-left: 1px solid blue;
     border-right: 1px solid blue;
     top: 0px;
     left: 0px;
     position: absolute;
     z-index: 99;
     background: #42b8dd;
}
 .pure-button-success {
     background: #42b8dd;
     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 {
}
*/

 

 

And now make a script.js file and copy paste the following code

 

 

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

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *