FULL STACK WEB DEVELOPMENT LAB
EXPERIMENT-1
AIM: Design the following static web pages required for an online book store web site.
Home Page: The static home page must contain three frames.
Top frame: Logo and the college name and links to Homepage, Login page, Registration
page, Catalogue page and Cart page (the description of these pages will be given below).
Left frame: At least four links for navigation, which will display the catalogue of respective
links. For e.g.: When you click the link “B.Tech” the catalogue for B.Tech Books should be
displayed in the Right frame.
Right frame: The pages to the links in the left frame must be loaded here. Initially this page
contains description of the web site.
SOURCE CODE:
TopFrame.html
<!DOCTYPE html>
<html>
<head>
<title>Top Frame</title>
</head>
<body bgcolor="#58D68D ">
<table border="1" width="100%" color="cyan">
<tr>
<th width="14%">
<img src="swarnandhra.png" width="75" height="75"/>
</th>
<th><b>SCET ONLINE BOOK STORE</b></th>
</tr>
</table>
<table border="1"width="100%"color="blue">
<tr>
<th><a href="rightframe.html"target="rframe">HOME</a></th>
<th><a href="login.html"target="rframe">LOGIN</a></th>
<th><a href="registration.html"target="rframe">REGISTRATION</a></th>
<th><a href="catalogue.html"target="rframe">CATALOGUE</a></th>
<th><a href="cart.html"target="rframe">CART</a></th>
</tr>
</table>
</body>
</html>
OUTPUT:
Leftframe.html
<!DOCTYPE html>
<html>
<head>
<title>LeftFrame</title>
</head>
<body bgcolor="PINK"align="center">
<center>
<br><br><br>
<h4><a href="btech.html"target="rframe">BTech</a></h4>
<h4><a href="mtech.html"target="rframe">MTech</a></h4>
<h4><a href="mba.html"target="rframe">MBA</a></h4>
<h4><a href="mca.html"target="rframe">MCA</a></h4>
</center>
</body>
</html>
OUTPUT:
Rightframe.html
<!DOCTYPE html>
<html>
<head>
<title>Right Frame</title>
</head>
<body bgcolor="#C39BD3"align="center">
<center>
<br><br><br><br><b>WELCOME TO BOOK STORE</b>
</center>
</body>
</html>
OUTPUT:
Home.html
<!DOCTYPE html>
<html>
<head>
<title>HOME PAGE</title>
</head>
<frameset rows="18%,*">
<frame src="TopFrame.html"scrolling="no"/>
<frameset cols="15%,*">
<frame src="leftframe.html"noresize="norsize"/>
<frame src="rightframe.html"name="rframe"/>
</frameset>
</frameset>
</html>
OUTPUT:
EXPERIMENT-2
AIM: Login Page: Login page must contain Login field, Password field, Submit and Reset
buttons.
SOURCE CODE:
Login.html
<html>
<head>
<title>Login Page</title>
</head>
<body bgcolor="pink" align="center">
<center>
<h1><b>Login Page</b></h1>
<form action="">
<label for="Username">USERNAME:</label>
<input type="text" name="Username" size="20" value="" maxlength="20"/>
<br><br>
<label for="Password">PASSWORD:</label>
<input type="Password" name="Password" size="20" value="" maxsize="20"/>
<br><br>
<input type="submit" value="Submit"/>
   
<input type="reset" value="Reset"/>
</form>
</center>
</body>
</html>
OUTPUT:
EXPERIMENT-3
AIM:
Catalogue Page: The catalogue page should contain the details of all the books available in
the the website in a table.The details should contain the following: website in a table.
1.Snap shot of cover Page.
2.AuthorName.
3.Publisher.
4.Price.
5. Add to cart button.
Catalogue.html
<html>
<head>
<title>Catalogue Page</title>
</head>
<body bgcolor="pink"><br>
<table width="90%"height="90%" align="center" border="1">
<tr>
<th height="10%" width="6%" align="center" bgcolor="#E37383">COVER PAGE</th>
<th height="10%" width="4%" align="center" bgcolor="#E37383">AUTHOR NAME</th>
<th height="10%" width="2%" align="center" bgcolor="#E37383">PRICE</th>
<th height="10%" width="4%" align="center" bgcolor="#E37383">ADD TO CART</th>
</tr>
<tr><td align="center"><br>
<img
src=https://media.wiley.com/product_data/coverImage300/63/07645498/0764549863.jpg
height="150"width="125"/><br><br></td>
<td align="center">
Book:XML Bible<br>
Author:Wintson<br>
Publication:Wiely</td>
<td align="center">$40</td>
<tdalign="center">
<img
src=https://t3.ftcdn.net/jpg/00/26/12/44/360_F_26124443_QQVqQWwQGQFqBQg9QACdp
ktxYQ7xIRkY.jpg height="100"width="175"/></td>
</tr>
<tr>
<td align="center"><br>
<img src=https://rukminim1.flixcart.com/image/300/300/book/1/0/2/web-enabled-
commercial-applications-development-using-java-2-original-imadyxxjpcxmhhna.jpeg
height="150" width="125"/><br><br></td>
<td align="center">
Book:JAVA 2<br>
Author:Watson<br>
Publication:BPB Publications</td>
<td align="center">$50</td>
<td align="center">
<img
src=https://t3.ftcdn.net/jpg/00/26/12/44/360_F_26124443_QQVqQWwQGQFqBQg9QACdp
ktxYQ7xIRkY.jpg height="100"width="175"/></td>
</tr>
<tr>
<td align="center"><br>
<img src=https://rukminim1.flixcart.com/image/300/300/kjabs7k0-0/book/h/h/l/artificial-
intelligence-original-imafyvy6aj4t7fab.jpeg height="150" width="125"/><br><br></td>
<td align="center">
Book:AI<br>
Author:S.Russel <br>
Publication:Prince hall</td>
<td align="center">$60</td>
<td align="center">
<img src=
https://t3.ftcdn.net/jpg/00/26/12/44/360_F_26124443_QQVqQWwQGQFqBQg9QACdpktx
YQ7xIRkY.jpg height="100" width="175"/></td>
</tr>
<tr>
<td align="center"><br>
<img src=https://m.media-amazon.com/images/I/51JKFOPk-NL.jpg height="150"
width="125"/><br><br></td>
<td align="center">
Book:HTML in 24 hours<br>
Author:Sam Peter <br>
Publication:Sam Publications</td>
<td align="center">$90</td>
<td align="center">
<img
src=https://t3.ftcdn.net/jpg/00/26/12/44/360_F_26124443_QQVqQWwQGQFqBQg9QACdp
ktxYQ7xIRkY.jpg height="100" width="175"/></td>
</tr>
</table>
</body>
</html>
OUTPUT:
BTech.html
<!DOCTYPE html>
<html>
<head>
<title>BTech Catalogue</title>
</head>
<body bgcolor="pink"><br><br><br><br>
<table width="80%" height="80%" border="1" align="center" cellpadding="10">
<tr>
<th height="10%" width="6%" align="center" bgcolor="pink">COVER PAGE</th>
<th height="10%" width="4%" align="center" bgcolor="pink">AUTHOR NAME</th>
<th height="10%" width="2%" align="center" bgcolor="pink">PRICE</th>
<th height="10%" width="4%" align="center" bgcolor="pink">ADD TO CART</th>
</tr>
<tr>
<td align="center"><br>
<img src= https://m.media-amazon.com/images/I/51GVzaLnNUL.jpg height="35%"
width="35%"/><br><br></td>
<td align="center">
BOOK:Fundamentals of Data Science<br>
AUTHOR:Samuel Burns<br>
PUBLICATION:CL Publications</td>
<td align="center">$89</td>
<td align="center">
<img src=
https://t3.ftcdn.net/jpg/00/30/21/50/360_F_30215082_UkRQTbOQsiTtcjkTunYNjFoaaccgk
RW5.jpg height="40%" width="50%"></td>
</tr>
<tr>
<td align="center"><br>
<img src=
https://www.charulathapublications.com/images/product/data_structures_Algorithms.jpg
height="35%"width="35%"/><br><br></td>
<td align="center">
BOOK:Data Structures And ALgorithms<br>
AUTHOR:S.Sharanya<br>
PUBLICATION:Charulatha Publications</td>
<td align="center">$70</td>
<td align="center">
<img src=
https://t3.ftcdn.net/jpg/00/30/21/50/360_F_30215082_UkRQTbOQsiTtcjkTunYNjFoaaccgk
RW5.jpg height="40%" width="50%"></td>
</tr>
</table>
</body>
</html>
OUTPUT:
MTech.html
<!DOCTYPE html>
<html>
<head>
<title>MTech Catalogue</title>
</head>
<body bgcolor="pink"><br><br><br><br>
<table width="80%" height="80%" border="1" align="center" cellpadding="10">
<tr>
<th height="10%" width="6%" align="center" bgcolor="pink">COVER PAGE</th>
<th height="10%" width="4%" align="center" bgcolor="pink">AUTHOR NAME</th>
<th height="10%" width="2%" align="center" bgcolor="pink">PRICE</th>
<th height="10%" width="4%" align="center" bgcolor="pink">ADD TO CART</th>
</tr>
<tr>
<td align="center"><br>
<img src=https://easyengineering.net/wp-content/uploads/2018/02/CS6303-Computer-
Architecture.jpg height="35%" width="35%"/><br><br></td>
<td align="center">
BOOK:Computer Architecture<br>
AUTHOR:Joseph D Dumas<br>
PUBLICATION:CRC Publications</td>
<td align="center">$150</td>
<td align="center">
<img
src=https://t3.ftcdn.net/jpg/00/30/21/50/360_F_30215082_UkRQTbOQsiTtcjkTunYNjFoaac
cgkRW5.jpg height="40%" width="50%"></td>
</tr>
<tr>
<td align="center"><br>
<img
src=https://m.mediaamazon.com/images/I/513ME3UUZCL._AC_UF1000,1000_QL80_.jpg
height="35%"width="35%"/><br><br></td>
<td align="center">
BOOK:Software Engineering<br>
AUTHOR:Deepak Jain<br>
PUBLICATION:VRC Publications</td>
<td align="center">$90</td>
<td align="center">
<img
src=https://t3.ftcdn.net/jpg/00/30/21/50/360_F_30215082_UkRQTbOQsiTtcjkTunYNjFoaac
cgkRW5.jpg height="40%" width="50%"></td>
</tr>
</table>
</body>
</html>
OUTPUT:
MBA.html
<!DOCTYPE html>
<html>
<head>
<title>MBA Catalogue</title>
</head>
<body bgcolor="pink"><br><br><br><br>
<table width="80%" height="80%" border="1" align="center" cellpadding="10" >
<tr>
<th height="10%" width="6%" align="center" bgcolor="pink">COVER PAGE</th>
<th height="10%" width="4%" align="center" bgcolor="pink">AUTHOR NAME</th>
<th height="10%" width="2%" align="center" bgcolor="pink">PRICE</th>
<th height="10%" width="4%" align="center" bgcolor="pink">ADD TO CART</th>
</tr>
<tr>
<td align="center"><br>
<img
src=https://m.mediaamazon.com/images/I/71n7IB06jJL._AC_UF1000,1000_QL80_.jpg
height="35%" width="35%"/><br><br></td>
<td align="center">
BOOK:Human Resource Management<br>
AUTHOR:Sadhana Dash<br>
PUBLICATION:MC Publications</td>
<td align="center">$80</td>
<td align="center">
<img
src=https://t3.ftcdn.net/jpg/00/30/21/50/360_F_30215082_UkRQTbOQsiTtcjkTunYNjFoaac
cgkRW5.jpg height="40%"width="50%"></td>
</tr>
<tr>
<td align="center"><br>
<img src= https://cosmas.org/wpcontent/uploads/2023/03/gm_front.jpg height="35%"
width="35%"/><br><br></td>
<td align="center">
BOOK:Global Marketing<br>
AUTHOR:K.Balaji<br>
PUBLICATION:cosmas Publications</td>
<td align="center">$100</td>
<td align="center">
<img
src=https://t3.ftcdn.net/jpg/00/30/21/50/360_F_30215082_UkRQTbOQsiTtcjkTunYNjFoaac
cgkRW5.jpg height="40%" width="50%"></td>
</tr>
</table>
</body>
</html>
OUTPUT:
MCA.html
<!DOCTYPE html>
<html>
<head>
<title>MCA Catalogue</title>
</head>
<body bgcolor="pink"><br><br><br><br>
<table width="80%" height="80%" border="1" align="center" cellpadding="10">
<tr>
<th height="10%" width="6%" align="center" bgcolor="pink">COVER PAGE</th>
<th height="10%" width="4%" align="center" bgcolor="pink">AUTHOR NAME</th>
<th height="10%" width="2%" align="center" bgcolor="pink">PRICE</th>
<th height="10%" width="4%" align="center" bgcolor="pink">ADD TO CART</th>
</tr>
<tr>
<td align="center"><br>
<img src= https://m.mediaamazon.com/images/I/516T5kQB4RL.jpg height="35%"
width="35%"/><br><br></td>
<td align="center">
BOOK:Computer Networking<br>
AUTHOR:Erick Stack<br>
PUBLICATION:S Publications</td>
<td align="center">$40</td>
<td align="center">
<img
src=https://t3.ftcdn.net/jpg/00/30/21/50/360_F_30215082_UkRQTbOQsiTtcjkTunYNjFoaac
cgkRW5.jpg height="40%"width="50%"></td>
</tr>
<tr>
<td align="center"><br>
<img src=https://sahityabhawanpublications.com/wp-content/uploads/2018/02/2952-
Management-Accounting_curve.jpg height="35%"width="35%"/><br><br></td>
<td align="center">
BOOK:Management Accounting<br>
AUTHOR:M.L Agarwal<br>
PUBLICATION:Sahitya Publications</td>
<td align="center">$20</td>
<td align="center">
<img
src=https://t3.ftcdn.net/jpg/00/30/21/50/360_F_30215082_UkRQTbOQsiTtcjkTunYNjFoaac
cgkRW5.jpg height="40%"width="50%"></td>
</tr>
</table>
</body>
</html>
OUTPUT:
EXPERIMENT-4
AIM: Registration Page: Create a―registration form ―with the following fields
1. Name(Text field)
2. Password(password field)
3. E-mail id(text field)
4. Phone number(text field)
5. Sex (radio button)
6. Date of birth (3 select boxes)
7. Languages known(check boxes –English,Telugu, Hindi,Tamil)
8. Address(text area)
Registration.html
<html>
<head>
<title>Registration Page</title>
</head>
<body bgcolor="pink">
<h1 align="center"><b>Registration Page</h1>
<table bgcolor="lightblue" align="center"border="1">
<tr>
<td>NAME:<input type="text" name="name" size="20" maxsize="30"/></td>
</tr>
<tr>
<td>PASSWORD:<input type="password" name="password" size="20"
maxsize="30"/></td>
</tr>
<tr>
<td>EMAIL ID:<input type="email" name="mail id" size="20" maxsize="30"/></td>
</tr>
<tr>
<td>PHONE NO:<input type="text" name="phn number" size="20" maxsize="30"/></td>
</tr>
<tr>
<td>GENDER:
<input type="radio" value="male" name="gender"/>MALE
<input type="radio" value="female" name="gender"/>FEMALE
</td>
</tr>
<tr>
<td> DATE OF BIRTH
<select name="Day">
<option>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="Month">
<option>MONTH</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="Year">
<option>Year</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</td>
</select>
</tr>
<tr>
<td>
<label for="languages known">Languages Known:</label>
<input type="checkbox" name="lanquages known" value="ENGLISH"/>ENGLISH
<input type="checkbox" name="lanquages known" value="TELUGU"/>TELUGU
<input type="checkbox" name="lanquages known" value="HINDI"/>HINDI
<input type="checkbox" name="lanquages known" value="TAMIL"/>TAMIL
</td>
</tr>
<td>
<label for="address">ADDRESS:</label><br>
<textarea name="address" rows="5" cols="50">
</textarea>
</td>
</tr>
<br><br>
<tr>
<td>
<center>
<input type="submit" value="Submit Form">
   
<input type="Reset" value="Clear Form">
</center>
</td>
</tr>
</table>
</body>
</html>
OUTPUT:
EXPERIMENT-5
AIM: Design a web page using CSS (Cascading Style Sheets): Use different font, styles: In
the style definition you define how each select or should work (font, color etc.). Then, in the
body of your pages, you refer to these selectors to activate the styles.
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
body
{
font-family: Arial, sans-serif;
color: #333;
line-height: 1.6;
}
h1
{
font-family: "Times New Roman", serif;
color: #ff6600;
font-size: 36px;
}
p{
font-style: italic;
}
.important
{
font-weight: bold;
color: #0066cc;
}
#custom-font
{
font-family: "Courier New", monospace;
}
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph with the default font.</p>
<p class="important">This is an important paragraph with bold and blue text.</p>
<p>This paragraph has italic text.</p>
<p id="custom-font">This paragraph uses a custom monospace font.</p>
</body>
</html>
OUTPUT:
EXPERIMENT-6
AIM: Write a Java Script that calculates the squares and cubes of the numbers from 0 to 10
and outputs HTML text that displays the resulting values in an HTML table format.
SOURCE CODE:
<!DOCTYPE HTML>
<html>
<head> <style>
table, tr,td
{
border: solid black;
width: 33%;
text-align: center;
border-collapse: collapse;
background-color:lightblue;
}
table
{
margin: auto;
}
</style>
<script>
document.write( "<table><tr><thcolspan='3'> NUMBERS FROM 0 TO 10 WITH THEIR
QUARES AND CUBES </th></tr>" );
document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>" );
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>"+ n*n*n + "</td></tr>"
);
}
document.write( "</table>" ) ;
</script>
</head>
</html>
OUTPUT:
EXPERIMENT-7
AIM: Write a Java Script code that displays text― TEXT-GROWING ‖with increasing font
size in the interval of 100ms in RED COLOR, when the font size reaches 50pt it displays
―TEXT- SHRINKING ‖in BLUE color. Then the font size decreases to 5pt.
SOURCE CODE:
<html>
<head>
</head>
<body>
<center>
<p id="demo"></p>
</center>
<script>
var var1 = setInterval(inTimer, 100); // Change interval to 100ms
var size = 5;
var ids = document.getElementById("demo");
function inTimer()
{
size += 5;
ids.innerHTML = "TEXT-GROWING";
ids.setAttribute("style", "font-size:" + size + "pt; color:red"); // Use "pt" for font size
if (size >= 50)
{
clearInterval(var1);
var var2 = setInterval(deTimer, 100); // Change interval to 100ms
}
}
function deTimer()
{
size -= 5;
ids.innerHTML = "TEXT-SHRINKING";
ids.setAttribute("style", "font-size:" + size + "pt; color:blue"); // Use "pt" for font size
if (size <= 5) {
clearInterval(this); // Clear the decreasing interval when size reaches 5
}
}
</script>
</body>
</html>
OUTPUT:
EXPERIMENT-8
AIM: Write a simple Hello program using Angular JS library.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HELLO">
<h2>HELLO {{title}}!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HELLO", function($scope) {
$scope.title = "DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND MACHINE
LEARNING";
});
</script>
</body>
</html>
OUTPUT:
EXPERIMENT-9
AIM: Write a program that the Angular JS application consists of following three important
parts:
1. ng-app
2. ng-model
3. ng-bind
SOURCE CODE:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
OUTPUT:
EXPERIMENT-10
AIM: Write a program by using filters to convert the following
1. uppercase
2. lowercase
3. currency
4.order By
5.filter
6.date
SOURCE CODE:
Upper.html:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{lastName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "CHANDRIKA",
$scope.lastName = "surya"
});
</script>
</body>
</html>
OUTPUT:
lower.html:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "chandrika",
$scope.lastName = "SURYA"
});
</script>
</body>
</html>
OUTPUT:
currency.html:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope)
{
$scope.price = 59;
});
</script>
<p>The currency filter formats a number to a currency format.</p>
</body>
</html>
OUTPUT:
orderby.html:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in cars | orderBy">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope)
{
$scope.cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];
});
</script>
<p>The array items are displayed alphabetically.</p>
</body>
</html>
OUTPUT:
filter.html:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter:search">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope)
{
$scope.names = [ 'raviteja', 'rahul', 'praneeth', 'sanjay', 'syham', 'neeraja', 'chandhrika',
'jhanavi', 'prasad', 'ankammarao'];
$scope.search = 'i'; // filter for names containing 'i'
});
</script>
<p>This example displays only the names containing the letter "i".</p>
</body>
</html>
OUTPUT:
date.html:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date = {{ today | date }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.today = new Date();
});
</script>
<p>The date filter formats a date object to a readable format.</p>
</body>
</html>
OUTPUT:
