Простое приложение AngularJS для подсчета количества литров краски


Я создал простой угловой приложение JS для расчета литров краски нужно, чтобы покрасить потолок в комнате.

Я предполагаю, что один галлон охватывает 350 квадратных футов и использовать его как константу. Кроме того, я собрал подсчет литров до ближайшего целого числа. Теперь мой код кажется слишком простым).

Я буду благодарен за советы как можно усложнить эту задачу с использованием AngularJS или следующую версию угловой.

angular.module('my-App', [])
 .controller('paintCalculatorController', function($scope){
  $scope.length = 0;
  $scope.width = 0;
  const squareFeetForOneGallon = 350;
  $scope.square = function(){
   return $scope.length * $scope.width;
  }
  $scope.countGallon = function(){
   return Math.ceil($scope.length * $scope.width / squareFeetForOneGallon);
  }
 });
form{
 background-color: #f1f1f1;
 border-radius: 5px;
 }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div class="container text-center mx-auto mt-4 p-4"  style="width: 500px" ng-app="my-App" ng-controller="paintCalculatorController">
 <h3>Room ceiling area</h3>
  <form class="inline-form mt-3 py-3">
  <label>Length: </label>
  <input style="width:90px" type="number" ng-model="length" value="" name="" min="0" oninput="validity.valid||(value='');">
  <span> feet</span>
  <span class="ml-2 mr-2 font-weight-bold"> X </span>
  <label>Width : </label>
  <input style="width:90px" type="number" ng-model="width" value="" name="" min="0" oninput="validity.valid||(value='');">
  <span> feet</span>
    </form>
 <h4 class="mt-3">You will need to purchase {{countGallon()}} gallons of
 paint to cover {{square()}} square feet.</h4>
</div>
</body>



Комментарии