Week-3 Assignment(WT)
NAME:R. Santhosh
[Link]: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="[Link]
[Link]"></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 = [Link]("nameApp", []);
[Link]("NameController", function($scope)
$[Link] = "Pavan";
$[Link] = "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="[Link]
/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 = [Link]("shoppingApp", []);
[Link]("ShoppingController", function($scope) {
$[Link] = ["Apples", "Bread", "Milk", "Cheese"];
$[Link] = function() {
if ($[Link]) {
$[Link]($[Link]);
$[Link] = "";
}
};
$[Link] = function(index) {
$[Link](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="[Link]
[Link]"></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 = [Link]("calculatorApp", []);
[Link]("CalculatorController", function($scope) {
$[Link] = function() {
var num1 =
parseFloat($scope.number1); var num2
= parseFloat($scope.number2);
switch ($[Link])
{ case 'add':
$[Link] = num1 + num2;
break;
case 'subtract':
$[Link] = num1 - num2;
break;
case 'multiply':
$[Link] = num1 * num2;
break;
case 'divide':
if (num2 !== 0) {
$[Link] = num1 / num2;
} else {
$[Link] = "Cannot divide by zero";
}
break;
default:
$[Link] = undefined;
}
};
$[Link] = function()
{ switch ($[Link]) {
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="[Link]
[Link]"></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>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>
</table>
<div>
Number of Students: {{ [Link] }}
</div>
</div>
<script>
var app = [Link]("studentApp", []);
[Link]("StudentController", function($scope) {
$[Link] = [
{ 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="[Link]
[Link]"></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="[Link]" required>
<div ng-show="[Link].$dirty
&& [Link].$invalid">
<span
ng-show="[Link].$[Link]">Username is
required.</span>
</div>
</div>
<br>
<div>
<label for="password">Password:</label>
<input type="password" id="password"
ng-model="[Link]" required minlength="6">
<div ng-show="[Link].$dirty
&& [Link].$invalid">
<span
ng-show="[Link].$[Link]">Password is
required.</span>
<span
ng-show="[Link].$[Link]">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 = [Link]("loginApp", []);
[Link]("LoginController", function($scope) {
$[Link] =
{ username:
'', password:
''
};
$[Link] = function()
{ if ($[Link].$valid) {
$[Link] = "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="[Link]
"></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>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>
</table>
<script>
var app = [Link]("employeeApp", []);
[Link]("EmployeeController", function($scope) {
$[Link] = [
{ 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 }
];
$[Link] = function(employee) {
if (!$[Link])
{ return true;
}
return [Link] >= $[Link];
}
;
});
</script>
</body>
</html>
OUTPUT:
