Build a Angular 12 Percentage Calculator of any Number in Browser Tool Using HTML5 & Javascript Full Project For Beginners

 

 

 

index.html

 

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<div class="container" ng-app="percentApp">
  <div class="row" ng-controller="HeaderCtrl">
    <h1>{{header}}</h1>
    <a href="http://www.petrusrex.com/" target="_blank"> {{mySite}}</a>
    <hr>
  </div>
  <div class="row" ng-controller="CalcCtrl">
    <div class="col-sm-2 col-xs-12">
      <!-- Percent Value -->
      <label for="percent">Percent Value (%) </label>
      <input type="text" id="percent" ng-change="calcValue()" ng-model="percentCalc.percentValW">
    </div>
    <div class="col-sm-1 col-sm-12">
      <h1 class="center-block">Of</h1>
    </div>
    <div class="col-sm-2">
      <label for="value">Number </label>
      <!-- Numeric Value -->
      <input type="text" id="Value" ng-change="calcValue()" ng-model="percentCalc.numericVal">
    </div>
    <div class="col-sm-1 col-xs-12">
      <h1>is</h1>
    </div>
    <div class="col-sm-1 col-xs-12 final">
      <h1>{{percentCalc.finalValue}}</h1>
    </div>
  </div>
  <div class="row margin-top" ng-controller="ImgCtrl">
    <div class="col-xs-12">
      <a href="http://www.petrusrex.com/" target="_blank">
      <img ng-src="{{img}}" class="center-block" alt="Petrus Rex Website" /></a>
    </div
  </div>
</div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

 

 

style.css

 

 

body {
	 background: url('https://www.dropbox.com/s/7zxkiuyghz7z3ss/black-background.jpg?raw=1');
}
 h1, span, a, a:hover, label {
	 color: #fff;
	 text-decoration: none;
	 position: relative;
	 padding-bottom: 5px;
}
 .row > a:before {
	 content: "";
	 position: absolute;
	 width: 100%;
	 height: 2px;
	 bottom: 0;
	 left: 0;
	 background-color: #fff;
	 visibility: hidden;
	 -webkit-transform: scaleX(0);
	 transform: scaleX(0);
	 -webkit-transition: all 0.3s ease-in-out 0s;
	 transition: all 0.3s ease-in-out 0s;
}
 div > a:hover:before {
	 visibility: visible;
	 -webkit-transform: scaleX(1);
	 transform: scaleX(1);
}
 input {
	 display: block;
}
 .final {
	 border-left: 1px solid #fff;
}
 .margin-top {
	 margin-top: 80px;
}

 

See also  Build a Money Future Investment Calculator in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

script.js

 

 

var app = angular.module('percentApp', []);

app.controller('HeaderCtrl', function($scope){
  $scope.header="Percentage Calculator" ;
  $scope.mySite="Petrus Rex"
});

app.controller('CalcCtrl', function($scope){
  $scope.percentCalc = {
    numericVal: 0,
    percentValW: 0,
    percentValDec: 0,
    finalValue: 0
  };
  $scope.img = 'https://www.dropbox.com/s/7pd2h61lwsi4imj/petrus-rex-crest.png?raw=1/';
  
    var convertPercent = function(){
      var percentNum = $scope.percentCalc.percentValW;
      var percentValDec = $scope.percentCalc.percentValDec;
        $scope.percentCalc.percentValDec = parseFloat(percentNum) / 100.0;
    };
    $scope.$watch('percentCalc.percentValW', convertPercent);
  
    var calcValue = function(){
      $scope.percentCalc.finalValue = $scope.percentCalc.percentValDec * $scope.percentCalc.numericVal;
    };
  
    $scope.$watch('percentCalc.percentValW + percentCalc.numericVal', calcValue);

  });

app.controller('ImgCtrl', function($scope){
  $scope.img='https://www.dropbox.com/s/7pd2h61lwsi4imj/petrus-rex-crest.png?raw=1' 
});

Leave a Reply