In this article I would like to share with you a sample program that I wrote using AngularJS one of the most popular javascript framework today. What does the program will do is to ask the user to give five numbers and then it will find the sum of the five numbers that is being provided by the user. What is good about this program is that it uses buttons to add the sum of numbers and clear button to clear the content of the text box. I hope you will find my work useful.
Add me at Facebook my address is 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: left;
font-family: "arial";
font-style: bold;
size: 16;
};
</style>
<script type="text/javascript" src="angular.js"></script>
<body bgcolor="lightgreen">
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.add=function(a,b,c,d,e)
{
$scope.result=parseInt(a)+parseInt(b)+parseInt(c)+parseInt(d)+parseInt(e);
}
$scope.clear_all=function()
{
$scope.a = null;
$scope.b = null;
$scope.c = null;
$scope.d = null;
$scope.e = null;
}
});
</script>
<br><br>
<h3>Addition of Five Numbers in AngularJS</h3>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<p>Enter a Value in Item No. 1 :
<input type="text" ng-model="a" placeholder="enter a number" autofocus 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><br>
<br><br>
<p><input type="button" ng-click="add(a,b,c,d,e)" value="ADD">
<input type="button" ng-click="clear_all(this)" value="CLEAR"></p>
<br><br>
<p> Total Sum is {{result}}. </p>
<div>
</div>
</html>
No comments:
Post a Comment