Table of Contents

Even or Odd Checker with AngularJS: Simple Implementation and Tutorial

Rumman Ansari August 05, 2024 372 views

Assignment: Even or Odd with AngularJS

1. Even or Odd with AngularJS

In index.html, there are 2 input fields that accept two numbers, and display the sum and difference (result) of those numbers.

Write a function odd_even, that takes the result as input, and returns the text odd or even, based on the logic.

Expected Result:

100

100+ 11 = 111 which is an odd number

100 1189 which is odd number -

Solution

index.html


  <!-- Hmtl -->
<html>
<head>
<script src="lib/angularjs/angular.min.js"></script>
<script src="lib/angularjs/angular-mocks.js"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h2 id="article-heading-3">Odd or Even!</h2>
<input type="number" ng-model="number1"><br><br>
<input type="number" ng-model="number2"><br><br>
{{number1}} + {{number2}} = <span style="color:green" type="text">{{number1 + number2}}</span> which is an
<span ng-bind="odd_even(number1 + number2)"></span> number

<br><br>
{{number1}} - {{number2}} = <span style="color:green" type="text">{{number1 - number2}}</span> which is 
<span ng-bind="odd_even(number1 + number2)"></span> number
<br><br>


</div>

</body>
</html>

index.js


// Add your code here
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.odd_even = function(result) {
        if (result % 2 === 0) {
            return "even";
        } else {
            return "odd";
        }
    };
});

If you will run above code, you will get below output.