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.

 

 

 

Get Started

 

 

 

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

 

See also  Join 20 Angular Freelancers Whatsapp Group Invite Links For Node.js and Javascript Programmers and Developers in 2021-22 | Best Angular Freelancer Whatsapp Groups Invite Links For Programmers

 

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

Leave a Reply