I created a simple Angular JS application for calculation gallons of paint needed to paint the ceiling of a room.
I assume one gallon covers 350 square feet and use it as a constant. Also, I round up a counting of the gallons to the next whole number. Now my code seems to me too simple).
I will be grateful for advice as it is possible to complicate this task with the use of AngularJS or next version of Angular.
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>1 Answer 1
Feedback
The code looks pretty good, and thus I only found a few things that I could change (listed below). I like how the bootstrap text-center class can be applied once to affect all sub-elements.
Suggestions
CSS
Move the in-line styles to the stylesheet to reduce redundancy - e.g. the number inputs have a specific width, which can be put into a CSS rule-set, like this example:
input[type="number"] {
width: 90px;
}
Or apply a class name to those elements and utilize that class name in the selector. Also, the width of the container (i.e. 500px) can be moved into a rule-set.
JavaScript
Declaring the Constant
The idiomatic way of declaring a constant in AngularJS is to use .constant() and use dependency injection to inject that constant in the controller.
.constant('SQUARE_FEET_FOR_ONE_GALLON', 350)
Then that value will be available for injection in the controller (this example uses the implicit format:
.controller('paintCalculatorController', function($scope, SQUARE_FEET_FOR_ONE_GALLON){
If nobody else is planning to work on this small amount of code with you, then using a plain JavaScript constant should be fine.
Slight redundancy
Gerrit0 is correct in the comment: "maybe using $scope.square in $scope.countGallon"
The function countGallon() can be updated to updated to utilize the count() function. The formula for the square footage likely won't change anytime soon, but if it did, then that could be updated in a single place instead of both places. This complies with the Don't Repeat Yourself principle.
return Math.ceil($scope.count() / squareFeetForOneGallon);
Explore related questions
See similar questions with these tags.
$scope.squarein$scope.countGallon. \$\endgroup\$