How To Get Average Of Five Numbers Using JavaScript

Submitted by alpha_luna on Monday, April 11, 2016 - 15:45.
In this tutorial, we are going to learn on How To Get Average Of Five Numbers Using JavaScript. AngularJS is a JavaScript framework. It can extend the HTML tag with the new attributes. It is perfect to use for SPAs or (Single Page Applications). Today, this is a simple program using AngularJS that the user will input the five (5) value numbers that our program will compute the average of five (5) numbers automatically. And you can make this program as your Average Grade Solver.

Source Code

HTML Tag This is an HTML code that the five (5) integer number must be encoded in the text box then automatically we can see the average. 
  1. <center>
  2. <h3 style="color:red;">Average Of Five Numbers Using JavaScript</h3>
  3.  
  4. <div ng-app="simpleProgram">
  5. <p>Enter a Value in Item No. 1 :</p>
  6. <input type="number" ng-model="a" autofocus="autofocus" style="width:100px; text-align:center; font-size:18px;" step="1" min="0"/>
  7. <br />
  8. <p>Enter a Value in Item No. 2 :</p>
  9. <input type="number" ng-model="b" style="width:100px; text-align:center; font-size:18px;" step="1" min="0" />
  10. <br />
  11. <p>Enter a Value in Item No. 3 :</p>
  12. <input type="number" ng-model="c" style="width:100px; text-align:center; font-size:18px;" step="1" min="0" />
  13. <br />
  14. <p>Enter a Value in Item No. 4 :</p>
  15. <input type="number" ng-model="d" style="width:100px; text-align:center; font-size:18px;" step="1" min="0" />
  16. <br />
  17. <p>Enter a Value in Item No. 5 :</p>
  18. <input type="number" ng-model="e" style="width:100px; text-align:center; font-size:18px;" step="1" min="0" />
  19. <br /> 
  20.  
  21. <br />
  22. <br />
  23.  
  24. <p>The total average is {{ (a -- b -- c -- d -- e) / 5 | setDecimal:1 }}</p>
  25.  
  26. </div>
  27. </center>
JavaScript This is the script to get the total average of five (5) integer number. 
  1. <script>
  2. var app = angular.module('simpleProgram', []);
  3. app.filter('singleDecimal', function ($filter) {
  4. return function (input) {
  5. if (isNaN(input)) return input;
  6. return Math.round(input * 10) / 10;
  7. };
  8. });
  9. app.filter('setDecimal', function ($filter) {
  10. return function (input, places) {
  11. if (isNaN(input)) return input;
  12.  var factor = "1" + Array(+(places > 0 && places + 1)).join("0");
  13. return Math.round(input * factor) / factor;
  14. };
  15. });
  16. app.controller('Ctrl', function ($scope) {
  17. $scope.val = 1.56;
  18. });
  19. </script>
CSS Style And, this is the style of this program. 
  1. <style type="text/css">
  2. p {
  3. 	color:blue;
  4. 	display: inline-block;
  5. 	font-family: monospace;
  6. 	font-style: bold;
  7. 	font-size:18px;
  8. }
  9.  
  10. input {
  11. 	display: inline-block;
  12. }
  13. </style>
Share us your thoughts and comments below. Thank you so much for dropping by and reading this blog post. For more updates, don’t hesitate and feel free to visit our website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 3091 views