Week-3 Assignment(WT)
NAME:R. Santhosh
H.T.NO:2203A51190
1. 1. Develop Angular JS program that allows user to input their first
name and last name and display their full name.
Note: The default values for first name and last name may be included
in the program.
CODE:
<html>
<head>
<title>AngularJS Name Display</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.mi
n.js"></script>
</head>
<body ng-app="nameApp" ng-controller="NameController">
<div>
<h1>Display Full Name</h1>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" ng-model="firstName">
<br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" ng-model="lastName">
<h2>Your Full Name: {{ firstName + ' ' + lastName }}</h2>
</div>
<script>
var app = angular.module("nameApp", []);
app.controller("NameController", function($scope)
$scope.firstName = "Pavan";
$scope.lastName = "Putta";
});
</script>
</body>
</html>
OUTPUT:
2. Develop an Angular JS application that displays a list of shopping
items. Allow users to add and remove items from the list using directives
and controllers.
Note: The default values of items may be included in the program.
CODE:
<!DOCTYPE html>
<html ng-app="shoppingApp">
<head>
<title>AngularJS Shopping List</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"><
/script>
</head>
<body ng-controller="ShoppingController">
<div>
<h1>Shopping List</h1>
<input type="text" ng-model="newItem" placeholder="Add new item">
<button ng-click="addItem()">Add Item</button>
<ul>
<li ng-repeat="item in shoppingList">
{{ item }}
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul>
</div>
<script>
var app = angular.module("shoppingApp", []);
app.controller("ShoppingController", function($scope) {
$scope.shoppingList = ["Apples", "Bread", "Milk", "Cheese"];
$scope.addItem = function() {
if ($scope.newItem) {
$scope.shoppingList.push($scope.newItem);
$scope.newItem = "";
}
};
$scope.removeItem = function(index) {
$scope.shoppingList.splice(index, 1);
};
});
</script>
</body>
</html>
OUTPUT:
3. Develop a simple Angular JS calculator application that can perform
basic mathematical operations (addition, subtraction,
multiplication, division) based on user input.
CODE:
<!DOCTYPE html>
<html ng-app="calculatorApp">
<head>
<title>AngularJS Calculator</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.mi
n.js"></script>
</head>
<body ng-controller="CalculatorController">
<div>
<h1>Simple Calculator</h1>
<input type="number" ng-model="number1"
placeholder="Number 1">
<select ng-model="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="number" ng-model="number2"
placeholder="Number 2">
<br><br>
<button ng-click="calculate()">Calculate</button>
<div ng-if="result !== undefined">
Result: {{ number1 }} {{ getOperationSymbol() }} {{ number2 }} =
{{ result }}
</div>
</div>
<script>
var app = angular.module("calculatorApp", []);
app.controller("CalculatorController", function($scope) {
$scope.calculate = function() {
var num1 =
parseFloat($scope.number1); var num2
= parseFloat($scope.number2);
switch ($scope.operation)
{ case 'add':
$scope.result = num1 + num2;
break;
case 'subtract':
$scope.result = num1 - num2;
break;
case 'multiply':
$scope.result = num1 * num2;
break;
case 'divide':
if (num2 !== 0) {
$scope.result = num1 / num2;
} else {
$scope.result = "Cannot divide by zero";
}
break;
default:
$scope.result = undefined;
}
};
$scope.getOperationSymbol = function()
{ switch ($scope.operation) {
case 'add':
return '+';
case 'subtract':
return '-';
case 'multiply':
return '*';
case 'divide':
return '/';
default:
return
'';
}
};
});
</script>
</body>
</html>
OUTPUT:
4. Develop Angular JS application that displays a detail of students and
their CGPA. Allow users to read the number of students and display
the count. Note: Student details may be included in the program.
CODE:
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<title>Student Details</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.mi
n.js"></script>
</head>
<body ng-controller="StudentController">
<div>
<h1>Student Details</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>CGPA</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.cgpa }}</td>
</tr>
</table>
<div>
Number of Students: {{ students.length }}
</div>
</div>
<script>
var app = angular.module("studentApp", []);
app.controller("StudentController", function($scope) {
$scope.students = [
{ name: "Avinash", age: 20, cgpa: 7.8 },
{ name: "Akshith", age: 21, cgpa: 8.5 },
{ name: "Siddhu", age: 22, cgpa: 6.7 },
{ name: "Jack", age: 23, cgpa: 9.6 },
{ name: "Rose", age: 19, cgpa: 7.9 }
];
});
</script>
</body>
</html>
OUTPUT:
5. Develop Angular JS program to create a login form, with validation
for the username and password fields.
CODE:
<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>AngularJS Login Form</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.mi
n.js"></script>
</head>
<body ng-controller="LoginController">
<div>
<h1>Login Form</h1>
<form name="loginForm" ng-submit="submitForm()" novalidate>
<div>
<label for="username">Username:</label>
<input type="text" id="username" ng-
model="user.username" required>
<div ng-show="loginForm.username.$dirty
&& loginForm.username.$invalid">
<span
ng-show="loginForm.username.$error.required">Username is
required.</span>
</div>
</div>
<br>
<div>
<label for="password">Password:</label>
<input type="password" id="password"
ng-model="user.password" required minlength="6">
<div ng-show="loginForm.password.$dirty
&& loginForm.password.$invalid">
<span
ng-show="loginForm.password.$error.required">Password is
required.</span>
<span
ng-show="loginForm.password.$error.minlength">Password must
be at least 6 characters long.</span>
</div>
</div>
<br>
<div>
<button type="submit"
ng-disabled="loginForm.$invalid">Login</button>
</div>
</form>
<div ng-show="successMessage">
<h3>{{ successMessage }}</h3>
</div>
</div>
<script>
var app = angular.module("loginApp", []);
app.controller("LoginController", function($scope) {
$scope.user =
{ username:
'', password:
''
};
$scope.submitForm = function()
{ if ($scope.loginForm.$valid) {
$scope.successMessage = "Login successful!";
}
};
});
</script>
</body>
</html>
OUTPUT:
6. Create an Angular JS application that displays a list of employees
and their salaries. Allow users to search for employees by name and
salary. Note: Employee details may be included in the program.
CODE:
<!DOCTYPE html>
<html ng-app="employeeApp">
<head>
<title>Employee List</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
"></script>
</head>
<body ng-controller="EmployeeController">
<h1>Employee List</h1>
<div>
<label for="searchName">Search by Name:</label>
<input type="text" id="searchName" ng-
model="searchName" placeholder="Enter employee name">
<br><br>
<label for="searchSalary">Search by Salary:</label>
<input type="number" id="searchSalary" ng-model="searchSalary"
placeholder="Enter salary">
</div>
<br>
<table border="1">
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr ng-repeat="employee in employees | filter:{name: searchName}
| filter:salaryFilter">
<td>{{ employee.name }}</td>
<td>{{ employee.position }}</td>
<td>{{ employee.salary }}</td>
</tr>
</table>
<script>
var app = angular.module("employeeApp", []);
app.controller("EmployeeController", function($scope) {
$scope.employees = [
{ name: "Ram", position: "Manager", salary: 50000 },
{ name: "Ajay”, position: "Engineer", salary: 60000 },
{ name: "siddu", position: "Developer", salary: 45000 },
{ name: "Pavan", position: "Designer", salary: 40000 },
{ name: "Raj", position: "Consultant", salary: 70000 }
];
$scope.salaryFilter = function(employee) {
if (!$scope.searchSalary)
{ return true;
}
return employee.salary >= $scope.searchSalary;
}
;
});
</script>
</body>
</html>
OUTPUT:
