Scribd
Upload
117 views25 pages

FSD Lab Programs

Uploaded by

ganeshrdhakli08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
117 views25 pages

FSD Lab Programs

Uploaded by

ganeshrdhakli08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

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.

<!DOCTYPE html>

<html lang="en" ng-app="fullNameApp">

<head>

<meta charset="UTF-8">

<title>Full Name App</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

</head>

<body>

<div ng-controller="fullNameCtrl">

<label for="firstName">First Name:</label>

<input type="text" id="firstName" ng-model="firstName" placeholder="Enter your first name">

<label for="lastName">Last Name:</label>

<input type="text" id="lastName" ng-model="lastName" placeholder="Enter your last name">

<p>Your Full Name: {{ fullName() }}</p>

</div>

<script>

var app = angular.module('fullNameApp', []);

app.controller('fullNameCtrl', function($scope) {

// Set default values

$scope.firstName = 'John';

$scope.lastName = 'Doe';

// Function to concatenate first and last names


$scope.fullName = function() {

return $scope.firstName + ' ' + $scope.lastName;

};

});

</script>

</body>

</html>
Date:...8.NAI2o3 Expt. Title : Page No.
Exp. No.:.....Q....... SHOPPIN q Apr
Develop JS oppleatfon tthat dtiplae at

contolless
2teh Valuef be tnctudd

24DocTYPE

len naopp=" shoppiq App"


ehead
charst "uTE 8"s
ctHe>
Shoppíng App (Littes

Sre= "https: lajax. googe apis com /ajas/tbs/ ongulaxjs

<Ihead

Abody>
g-controller Shoppiagont retley
Shoppirt

epeat shoppingetl. Ctemg

lernove c/buttons

VEMANA IT
Date
Expt. Title Page No.
ExD No

label oy
choppingctri.add Then()">
emNarme STtern Name; zlaahel

cbutton Tsern lbutton

2sesit
dngelat. modute
. contolle (shopplnpe,3)
Shappgcontgolle

itens
-nam
THm 2 pre e 20

vm.nuame:

vm .add Ttem funetfol)


neTtemrtee)
Vm. Ierms.push

VEMANAIT
Date: Expt. Title: Page No.
Exp. No.:

pee iposefloatn.neTtemPaee)

vmneuwtem Name;
UmneuTemPe

Vnremoutern tuneton (4em)


rde rn,tms,fnde OfCkm:
CRndex -l)
tteng. &pléce Cindes, );

|44sestpts
2tbody
3. Develop a simple Angular JS calculator application that can perform basic
mathematical operations (addition, subtraction, multiplication, division) based on
user input.

Program3.html

<!DOCTYPE html>
<html lang="en" ng-app="calculatorApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Calculator</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></s
cript>
<style>
/* Add some basic styling if needed */
input {
width: 50px;
margin: 5px;
}
</style>
</head>
<body>
<div ng-controller="CalculatorController">
<!-- Calculator UI goes here -->
<!-- Inside the div with ng-controller="CalculatorController" -->
<input type="text" ng-model="result" readonly>
<br>
<input type="button" value="1" ng-click="appendToExpression('1')">
<input type="button" value="2" ng-click="appendToExpression('2')">
<input type="button" value="3" ng-click="appendToExpression('3')">
<input type="button" value="+" ng-click="appendToExpression('+')">

<br>

<input type="button" value="4" ng-click="appendToExpression('4')">


<input type="button" value="5" ng-click="appendToExpression('5')">
<input type="button" value="6" ng-click="appendToExpression('6')">
<input type="button" value="-" ng-click="appendToExpression('-')">

<br>

<input type="button" value="7" ng-click="appendToExpression('7')">


<input type="button" value="8" ng-click="appendToExpression('8')">
<input type="button" value="9" ng-click="appendToExpression('9')">
<input type="button" value="*" ng-click="appendToExpression('*')">
<br>

<input type="button" value="C" ng-click="clearExpression()">


<input type="button" value="0" ng-click="appendToExpression('0')">
<input type="button" value="/" ng-click="appendToExpression('/')">
<input type="button" value="=" ng-click="evaluateExpression()">
</div>
<script src="app.js"></script>
</body>
</html>

Create the AngularJS module and controller. Create a new JavaScript file (e.g., app.js in
same folder) and define the AngularJS module and controller.

app.js

angular.module('calculatorApp', [])
.controller('CalculatorController', function ($scope) {
// Controller logic goes here
// Inside the CalculatorController
$scope.result = '';
$scope.appendToExpression = function (value) {
$scope.result += value;
};

$scope.clearExpression = function () {
$scope.result = '';
};

$scope.evaluateExpression = function () {
try {
$scope.result = eval($scope.result).toString();
}
catch (e) {
$scope.result = 'Error';
}
};

});
4. Write an Angular JS application that can calculate factorial and compute square based on given user input.

<!DOCTYPE html>

<html>

<title>

AJS Square and Factorial Application

</title>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">

</script>

<script>

var app=angular.module("mySqFct", []);

app.controller("mySqFctCntrl", function($scope){

$scope.num=0

$scope.result

$scope.factorial=function()

if($scope.num==0)

$scope.result=1

else

$scope.fact=1

for(var i=$scope.num; i>=1; i--)

$scope.fact=$scope.fact*i

$scope.result=$scope.fact

$scope.square=function(){
$scope.result=$scope.num*$scope.num

});

</script>

</head>

<body ng-app="mySqFct">

<h1> Angular JS Factorial and Square Application</h1>

<div ng-controller="mySqFctCntrl">

Enter the Number: <input type="number" ng-model="num">

<button ng-click="factorial()">Compute Factorial</button>

<button ng-click="square()">Compute Square</button>

<br/>

Result is: {{result}}

</div>

</body>

</html>
5. Develop AngularJS application that displays a details 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.

<!DOCTYPE html>

<html>

<title>Student Details Application</title>

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">

</script>

<script>

var app=angular.module("studDetailsApp",[]);

app.controller("studDetailsAppCntrl",function($scope){

$scope.studData=[]

$scope.generateData=function()

$scope.studData=[]

for(var i=1;i<=$scope.num;i++)

var stud={

"SLNO":i,

"NAME":'Student-'+i,

"CGPA":(Math.random()*10+1).toFixed(2)

$scope.studData.push(stud)

});

</script>

</head>

<body ng-app="studDetailsApp">

<h1>Student Details Application</h1>

<div ng-controller="studDetailsAppCntrl">
Enter the Number of Students to Generate the Data:

<input type="number" ng-model="num">

<button ng-click="generateData()">Generate</button>

<br/>

<table border="1" ng-show="studData.length>0">

<tr>

<th>SLNO</th>

<th>NAME</th>

<th>CGPA</th>

</tr>

<tr ng-repeat="student in studData">

<td>{{student.SLNO}}</td>

<td>{{student.NAME}}</td>

<td>{{student.CGPA}}</td>

</tr>

</table>

<br/>

Number of Students={{studData.length}}

</div>

</body>

</html>
<!--program:6 Develop an AngularJS program to create a simple to-do list
application. Allow
users to add, edit, and delete tasks. Note: The default values for tasks may
be
included in the program.
-->
<!DOCTYPE html>
<html>
<title>TO DO Application</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("toDoApp",[]);
app.controller("toDoAppCntrl",function($scope){
$scope.tasks=[
{'TITLE':'Task-1','COMPLETED':true,'EDITING':false},
{'TITLE':'Task-2','COMPLETED':false,'EDITING':false},
{'TITLE':'Task-3','COMPLETED':false,'EDITING':false}
]
$scope.addTask=function(){
if($scope.newTask)
{
var t={
'TITLE':$scope.newTask,
'COMPLETED':false,
'EDITING':false
}
$scope.tasks.push(t)
}
else{
alert("Please enter the task to add")
}
}

$scope.editTask=function(task)
{
task.EDITING=true
}
$scope.turnOffEditing=function(task){
task.EDITING=false
}
$scope.deleteTask=function(task)
{
var index=$scope.tasks.indexOf(task)
$scope.tasks.splice(index,1)
}
});
</script>
</head>
<body ng-app="toDoApp">
<h1>TO DO APPLICATION</h1>
<div ng-controller="toDoAppCntrl">
Enter the name of the Task:
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Add Task</button>
<br/>
<br/>
<table border="1">
<tr>
<th>SLNO</th>
<th>Status</th>
<th>Task</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="task in tasks">
<td>{{$index+1}}</td>
<td>
<input type="checkbox" ng-model="task.COMPLETED">
</td>
<td>
<span ng-show="!task.EDITING">{{task.TITLE}}</span>
<input type="text" ng-show="task.EDITING"
ng-model="task.TITLE" ng-blur="turnOffEditing(task)">
</td>
<td>
<button ng-click="editTask(task)">Edit</button>
</td>
<td>
<button ng-click="deleteTask(task)">Delete</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Program 7. Write an AngularJS program to create a simple CRUD application
(Create, Read, Update, and Delete) for managing users.-->
<!DOCTYPE html>
<html>
<title>USER MANAGEMENT APPLICATION</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("userMgmtApp",[]);
app.controller("userMgmtAppCntrl",function($scope){
$scope.users=[
{'name':"Jagadamba A",'email':'[email protected]','editing':false},
{'name':'ABC','email':'[email protected]','editing':false},
{'name':'XYZ','email':'[email protected]','editing':false}
]
$scope.createUser=function()<!--Write an AngularJS program to create a simple
CRUD application (Create, Read, Update, and Delete) for managing users.-->
<!DOCTYPE html>
<html>
<title>USER MANAGEMENT APPLICATION</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("userMgmtApp",[]);
app.controller("userMgmtAppCntrl",function($scope){
$scope.users=[
{'name':"Jagadamba A",'email':'[email protected]','editing':false},
{'name':'ABC','email':'[email protected]','editing':false},
{'name':'XYZ','email':'[email protected]','editing':false}
]
$scope.createUser=function()
{
if($scope.newUserName && $scope.newUserEmail)
{
var u={
'name':$scope.newUserName,
'email':$scope.newUserEmail,
'editing':false
}
$scope.users.push(u)
$scope.newUserName=''
$scope.newUserEmail=''
}
else{
alert("Please provide the user name and email id")
}
}
$scope.readUser=function(user)
{
user.editing=true
}
$scope.updateUser=function(user){
user.editing=false
}

$scope.deleteUser=function(user)
{
var yes=confirm("Are you sure you want to delete")
if(yes==true)
{
var index=$scope.users.indexOf(user)
$scope.users.splice(index,1)
}
}
});

</script>
</head>
<body ng-app="userMgmtApp">
<h1>USER MANAGEMENT APPLICATION</h1>
<div ng-controller="userMgmtAppCntrl">
Enter the User Name:<input type="text" ng-model="newUserName">
Enther the User Email:<input type="text" ng-model="newUserEmail">
<button ng-click="createUser()">Create</button>
<br/>
<br/>
<table border="1">
<tr>
<th>SLNO</th>
<th>NAME</th>
<th>EMAIL</th>
<th>READ</th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>
<tr ng-repeat="user in users">
<td>{{$index+1}}</td>
<td>
<span ng-show="!user.editing"> {{user.name}}
</span> &nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" ng-show="user.editing" ng-model="user.name">

</td>
<td>
<span ng-show="!user.editing">{{user.email}}</span>
<input type="text" ng-show="user.editing" ng-model="user.email">
</td>
<td>
<button ng-click="readUser(user)">Read</button>
</td>
<td>
<button ng-click="updateUser(user)">Update</button>
</td>
<td>
<button ng-click="deleteUser(user)">Delete</button>
</td>
</tr>
</table>
</div>
</body>
</html>
8. Develop AngularJS program to create a login form, with validation for
the username and password fields.
<!DOCTYPE html>
<html>
<title>Angular JS Login Form</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("loginApp",[]);
app.controller('loginAppCntrl',function($scope){
$scope.userName=''
$scope.password=''
$scope.noAttempts=0
$scope.login=function(){
// console.log("Inside login function")
if($scope.userName=="jagadamba" && $scope.password=="12345678")
{
alert("Login Successfull")
}
else{
$scope.noAttempts++
if($scope.noAttempts<=3)
{
alert("Incorrect user name/password! Attempt No."+$scope.noAttempts)
}
else{
document.getElementById("loginButton").disabled=true
}
}
}
});
</script>
<style>
.error-message{
color:red;
font-size: 20px;
}
</style>
</head>
<body ng-app="loginApp" ng-controller="loginAppCntrl">
<h1>Angular JS Login Form</h1>
<form name="loginForm" ng-submit="submitForm()">
Enter the User Name:<input type="text" name="userName"
ng-model="userName" ng-minlength="5" ng-maxlength="10" required placeholder="Enter
User Name">
<span class="error-message"
ng-show="loginForm.userName.$error.required && loginForm.userName.$dirty">User
Name is Required</span>
<span class="error-message"
ng-show="loginForm.userName.$error.minlength">Minimum Length Must be 5</span>

<span class="error-message"
ng-show="loginForm.userName.$error.maxlength">Maximum user name length is limitted
to 8</span>
<br/>
<br/>
Enter the Password: <input type="password" name="password"
ng-model="password" ng-minlength="5" ng-maxlength="10" required placeholder="Enter
your password">
<span class="error-message" ng-show="loginForm.password.$error.required
&& loginForm.password.$dirty">Password is required</span>
<span class="error-message"
ng-show="loginForm.password.$error.minlength">Minimum Password length is 5</span>
<span class="error-message"
ng-show="loginForm.password.$error.maxlength">Maximum password length is limitted
to 8</span>
<br/>
<br/>
<button type="submit" ng-disabled="loginForm.$invalid"
ng-click="login()" id="loginButton">Login</button>
</form>
</body>
</html>
9. Create an AngularJS 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

<!DOCTYPE html>
<html>
<title>Angular JS Filter Employee Search Application</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("empSearchApp",[]);
app.controller("empSearchAppCntrl",function($scope){
$scope.empList=[ {'name':'jagadamba','salary':800000},
{'name':'leela','salary':400000},
{'name':'john','salary':300000},
{'name':'ramya','salary':400000},
{'name':'mridula','salary':500000},
{'name':'Manasa','salary':600000}
]
$scope.clearFilters=function()
{
$scope.searchName=''
$scope.searchSalary=''
}
});
</script>
</head>
<body ng-app="empSearchApp">
<h1>Employee Search Application</h1>
<div ng-controller="empSearchAppCntrl">
Search by Employee Name:<input type="text" ng-model="searchName">
Search by Employee salary:<input type="number"
ng-model="searchSalary">
<button ng-click="clearFilters()">Clear Filters</button>
<br/>
<h3>List of Employees</h3>
<table border="1">

<tr>
<th>SLNO</th>
<th>EMP NAME</th>
<th>SALARY</th>
</tr>
<tr ng-repeat="emp in empList |
filter:{name:searchName,salary:searchSalary}">
<td>{{$index+1}}</td>
<td>{{emp.name}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</div>
</body>
</html>
10. Create AngularJS application that allows users to maintain a
collection of items. The application should display the current total
number of items, and this count should automatically update as items
are added or removed. Users should be able to add items to the
collection and remove them as needed. Note: The default values for
items may be included in the program.

<!DOCTYPE html>
<html>
<title>Item Management Application</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("itemMgmtApp",[]);
app.controller("itemMgmtAppCntrl",function($scope){
$scope.itemList=['Pen','Pencil','Eraser','Book']
$scope.addItem=function()
{
if($scope.newItem)
{
if($scope.itemList.indexOf($scope.newItem)==-1)
{
$scope.itemList.push($scope.newItem)
}
else{
alert('This item is already there in the item collection')
}
}
else{
alert('Please Enter the item to add')
}
}
$scope.removeItem=function(item)
{
var yes=confirm("Are you sure you want to delete "+item)
if(yes==true)
{
var index=$scope.itemList.indexOf(item)
$scope.itemList.splice(index,1)
}
}

});
</script>
</head>
<body ng-app="itemMgmtApp">
<h1>Item Management Application</h1>
<div ng-controller="itemMgmtAppCntrl">
Enter an item to add: <input type="text" ng-model="newItem">
<button ng-click="addItem()">ADD</button>
<br/><br/>
<b>List of Items</b>
<table border="1">
<tr>
<th>SLNO</th>
<th>Item</th>
<th>Remove</th>
</tr>
<tr ng-repeat="item in itemList">
<td>{{$index+1}}</td>
<td>{{item}}</td>
<td><button ng-click=removeItem(item)>Remove</button></td>
</tr>
</table>
<br/>
Total Number of Items=<b>{{itemList.length}}</b>
</div>
</body>
</html>
11.Create angularjs application to convert student details to
Uppercase using Angular filters. Note: The default details of students
may be included in the program.
<!DOCTYPE html>
<html>
<title>Student Details in Uppercase</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("studDetailsUpperApp",[]);
app.controller("studDetailsUpperAppCntrl",function($scope){
$scope.studDetails=['abc','xyz','mno','nlp','aiml']
$scope.upper=true
$scope.lower=false
$scope.Lower=function()
{
//console.log('called')
$scope.upper=false
$scope.lower=true
}
$scope.Upper=function()
{
$scope.upper=true
$scope.lower=false
}
});
</script>
</head>
<body ng-app="studDetailsUpperApp">
<h1>Student Details in Uppercase</h1>
<div ng-controller="studDetailsUpperAppCntrl">
<button ng-click="Upper()">Upper</button>
<button ng-click="Lower()">Lower</button>
<table border="1">
<tr>
<th>SLNO</th>
<th>NAME</th>
</tr>
<tr ng-repeat="student in studDetails">
<td>{{$index+1}}</td>
<td ng-show="upper">{{student|uppercase}}</td>
<td ng-show="lower">{{student|lowercase}}</td>
</tr>
</table>
</div>
</body></html>
12. Create an AngularJS application that displays the date by using date filter
parameters.. Include necessary HTML elements and CSS for the above Angular
applications.

<!DOCTYPE html>
<html ng-app="dateApp">

<head>
<title>AngularJS Date Display</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></s
cript>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}

h1 {
color: #2196F3;

.date-container {
margin-top: 20px;
font-size: 24px;
}
</style>
</head>

<body ng-controller="DateController">

<h1>AngularJS Date Display</h1>

<div class="date-container">
<p>medium date: {{ currentDate | date:'medium' }}</p>
<p>full date {{ currentDate | date:'fullDate' }}</p>
<p>date:'yyyy-MM-dd HH:mm:ss Z' :{{ currentDate | date:'yyyy-MM-dd
HH:mm:ss Z'}}</p>
<p> short: {{ currentDate | date:'short'}}</p>

</div>

<script>
angular.module('dateApp', [])
.controller('DateController', function ($scope, $interval) {
// Function to update the current date every second
function updateDate() {
$scope.currentDate = new Date();
}

// Initial date update


updateDate();

// Update the date every second

$interval(updateDate, 1000);
});
</script>

</body>

</html>

You might also like