I am working on a form and aiming to develop a 'completion progress tracker'. The idea is that for every input field that is filled in, 10 points will be added to an array. When all ten inputs are completed, the text '100% complete' will be displayed. Conversely, if data is removed from any input, 10 points will be deducted from the array.
To break it down, my goal is:
Monitor changes in certain items
If an item meets a specific criteria (e.g., X length), add 10 points to the array
If an item no longer meets the criteria, subtract 10 points from the array
Calculate the total score of the array
I have been experimenting with $scope.$watch and various array methods like pop(), splice(), but I am struggling to make it work seamlessly with clean and DRY code.
Below is a simplified version of what I have tried so far (outside of the main app, focusing on just three items).
controller:
$scope.userName = 'homer';
$scope.userDescription = 'I really like...';
$scope.userUrl = 'http://something.com'
$scope.theArray = [];
$scope.$watch('userName + userDescription + userUrl', function(){
$scope.theTotal = 0;
if($scope.userName.length >= 3) {
//$scope.theArray.pop(10);
//$scope.theArray.splice(1,1);
$scope.theArray.push(10);
}
// Checks username length
if($scope.userName.length < 3) {
console.info('oh no!');
$scope.theArray.pop(10);
}
// Checks user description length
if($scope.userDescription.length > 3) {
$scope.theArray.push(10);
}
// Checks URL length
if($scope.userUrl.length > 3) {
$scope.theArray.push(10);
}
var x = 0;
while (x < $scope.theArray.length) {
$scope.theTotal += $scope.theArray[x];
x++;
}
console.log($scope.theArray)
});
template:
<input type="text" ng-model="userName" placeholder="name" />
<input type="text" ng-model="userDescription" placeholder="description" />
<input type="url" ng-model="userUrl" placeholder="url" />
<p>userName length: {{userName.length}}</p>
<p>userDescription length: {{userDescription.length}}</p>
<p>userURL length: {{userUrl.length}}</p>
<br/>
<p><strong>completion: {{theTotal}}</strong></p>
It's evident that this current implementation has flaws as the array continuously adds points regardless of meeting the desired criteria. To tackle this issue, I acknowledge the behavior of $scope.$watch triggering changes. Is there a method to control the push() operation on the array?
Although combining pop() and push() somewhat resolves the issue, it lacks elegance and does not align with the intended functionality. How can I overcome this challenge? Should I rethink my approach with $scope.$watch and array methods or consider a different strategy altogether?