A simple program that I wrote using AngularJS as my JavaScript framework that will ask the user to give five numbers and then the program will compute for the average value of all five numbers. This program is very simple because I'm still learning AngularJS generally.
If you have some questions please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
<html>
<head>
<title> Avergage of Five Numbers in AngularJS </title>
</head>
<style>
p,h3 {
color:blue;
display: inline-block;
float: left;
clear: left;
width: 380px;
text-align: right;
font-family: "arial";
font-style: bold;
size: 16;
};
input {
display: inline-block;
float: left;
}
</style>
<script type="text/javascript" src="angular.js"></script>
<body bgcolor="yellow">
<script>
var app = angular.module('myApp', []);
app.filter('singleDecimal', function ($filter) {
return function (input) {
if (isNaN(input)) return input;
return Math.round(input * 10) / 10;
};
});
app.filter('setDecimal', function ($filter) {
return function (input, places) {
if (isNaN(input)) return input;
var factor = "1" + Array(+(places > 0 && places + 1)).join("0");
return Math.round(input * factor) / factor;
};
});
app.controller('Ctrl', function ($scope) {
$scope.val = 1.56;
});
</script>
<br><br>
<h3>Average of Five Numbers in AngularJS</h3>
<div ng-app="myApp">
<p>Enter a Value in Item No. 1 :
<input type="text" ng-model="a" placeholder="enter a number" size="15"/>
</p><br>
<p>Enter a Value in Item No. 2 :
<input type="text" ng-model="b" placeholder="enter a number" size="15"/>
</p><br>
<p>Enter a Value in Item No. 3 :
<input type="text" ng-model="c" placeholder="enter a number" size="15"/>
</p><br>
<p>Enter a Value in Item No. 4 :
<input type="text" ng-model="d" placeholder="enter a number" size="15"/>
</p><br>
<p>Enter a Value in Item No. 5 :
<input type="text" ng-model="e" placeholder="enter a number" size="15"/>
</p><br>
<br><br>
<p>The total average is {{ (a -- b -- c -- d -- e) / 5 | setDecimal:1 }}</p>
</div>
</html>
