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







<link rel="stylesheet" href=""/>
<div class="container" ng-app="percentApp">
  <div class="row" ng-controller="HeaderCtrl">
    <a href="" target="_blank"> {{mySite}}</a>
  <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 class="col-sm-1 col-sm-12">
      <h1 class="center-block">Of</h1>
    <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 class="col-sm-1 col-xs-12">
    <div class="col-sm-1 col-xs-12 final">
  <div class="row margin-top" ng-controller="ImgCtrl">
    <div class="col-xs-12">
      <a href="" target="_blank">
      <img ng-src="{{img}}" class="center-block" alt="Petrus Rex Website" /></a>
    <script src=""></script>
    <script src=""></script>






body {
	 background: url('');
 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






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 = '';
    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){

Leave a Reply