Scribd
Upload
25 views63 pages

Web Technology Record

This document is a practical record for the Web Technology Lab course at Hindusthan College of Arts & Science, detailing various web development exercises completed by students during the academic year 2022-2023. It includes a bonafide certificate, an index of practical exercises, source codes for HTML and CSS projects, and results indicating successful execution of each program. The practicals cover topics such as designing web pages, creating forms, and using JavaScript for interactivity.

Uploaded by

pradeepkumarv.sixphrase
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
25 views63 pages

Web Technology Record

This document is a practical record for the Web Technology Lab course at Hindusthan College of Arts & Science, detailing various web development exercises completed by students during the academic year 2022-2023. It includes a bonafide certificate, an index of practical exercises, source codes for HTML and CSS projects, and results indicating successful execution of each program. The practicals cover topics such as designing web pages, creating forms, and using JavaScript for interactivity.

Uploaded by

pradeepkumarv.sixphrase
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/ 63

HINDUSTHAN COLLEGE OF ARTS & SCIENCE

AUTONOMOUS
(Affiliated to Bharathiar University)
Behind Nava India, Coimbatore - 641028.

DEPARTMENT OF COMPUTER APPLICATIONS (BCA)

PRACTICAL RECORD

B.C.A [Computer Applications]

Practical - IV: WEB TECHNOLOGY LAB (21CAU14)

NAME :

REGISTERNO :

CLASS :
HINDUSTHAN COLLEGE OF ARTS & SCIENCE
AUTONOMOUS
(Affiliated to Bharathiar University)
Behind Nava India, Coimbatore -641028.

DEPARTMENT OF COMPUTER APPLICATIONS (BCA)

WEB TECHNOLOGY LAB (21CAU14)

BONAFIDE CERTIFICATE

Certified that this is a bonafide record of work done by………………………………………

Reg.No................................................. Web Technology Lab (21CAU14) during

the academic year 2022 - 2023.

STAFF-IN-CHARGE HEAD OF THE DEPARTMENT

Submitted for the Practical Examination held at Hindusthan College of Arts & Science, Coimbatore-28,
on………………………….

INTERNAL EXAMINER EXTERNAL EXAMINER


INDEX
S.N PAG
DATE CONTENT SIGNATURE
E
O
NO.
DESIGN A HTML DOCUMENT USING
1 VIEDOS SOUNDS AND IMAGES

DESIGN A WEBPAGE USING LIST OF


2 ITEMS IN DIFFERENT STYLES

DESIGN A HOME PAGE HAVING 3LINK


3 FOR OUR DEPARTMANT AND SHOW
INDIVIDUAL REPORT OF A STUDENT.

DESIGN YOUR EDUCTIONAL DETAILS AND


4 DISPLAY VISION AND MISSION OF OUR
DEPATRMENT USING DIFFERENT STYLE

DESIGN A REGISTRATION FORM USING


5 DIFFERENT PROPERTIES.

CREATING STYLE LIST, CSS, PROPERTIES


6 AND STYLING.

DESIGN YOUR OWN RESUME USING CSS


7 PROPERTIES.

USE INTERNAL AND EXTERNAL CSS FOR A


8 WEBPAGE ALREADY CREATED.

DESIGN A STUDENT MARKLIST USING


9 JAVASCRIPT

DESIGN TEXT EDITOR USING JAVA


10 SCRIPT.

11
VALIDATE A FORM USING JAVA SCRIPT.

12 ANIMATE THE BACKGROUND COLOR AND


TEXT OF A DOCUMENT USING
JAVASCRIPT.
EX.No:01
DESIGN A HTML DOCUMENT USING VIEDOS SOUNDS AND
Date: IMAGES

Aim:

Algorithm:
Source code:

<html>

<body>

<title> Image,Video,Sound using HTML</title>

<h1>The Video Element </h1>

<video width="320" height="240" controls>

<source src="D:\pk.mp4" type="video/mp4">

your browser does not support the video tag

</video>

<h1>The audio element</h1>

<audio controls>

<source src ="d:\sleep Away.mp3" type ="audio/mpeg">

your browser does not support the audio element

</audio>

<h1>IMAGE</h1>

<h2>FLOWERS</h2>

<img src="d:\flower.jpg">

</body>

</html>
Output:

Result:

Thus the above program has been executed successfully.


EX.No:02
DESIGN A WEBPAGE USING LIST OF ITEMS IN DIFFERENT
Date: STYLES

Aim:

Algorithm:
Source code:

<!DOCTYPE html>

<html>

<head>

<title>First Webpage</title>

</head>

<body>

<header style="background-color: pink; height: 100px;width: 90%">

<h1 style="font-size: 30px; color: white;text-align: center;">Welcome to


MyFirstWebpage</h1>

</header>

<section style="background-color:orange; width: 100%; border: 1px solid black;">

<h2>Display list of items in different types by using document layout</h2>

<h2>An unordered HTML list</h2>

<ul type = "square">

<li>Coffee</li>

<li>Tea</li> </ul>

<ul type = "disc">

<li>Coffee</li>

<li>Tea</li>

</ul>

<ul type = "circle">

<li>Coffee</li>

<li>Tea</li>

</ul>
<h2><b> By default </b></h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

</ol>

<h2>An ordered HTML list: Type Attribute </h2>

<ol type = "1">

<li>Coffee</li>

<li>Tea</li>

</ol>

<ol type = "I">

<li>Coffee</li>

<li>Tea</li>

</ol>

<ol type = "A">

<li>Coffee</li>

<li>Tea</li>

</ol>

</section>

<footer style="background-color: green; width: 100%; text-align: center;">

<h3>Footer Example</h3>

<p> II BCA B -2021 to 2024 batch. </p>

</footer>

</body>

</html>
Output:

Result:

Thus the above program has been executed successfully.


EX.No:03 DESIGN A HOME PAGE HAVING 3LINK FOR OUR
DEPARTMANT AND SHOW INDIVIDUAL REPORT OF A
Date:
STUDENT.

Aim:

Algorithm:
Source code:

3prgm.html

<html>

<head><title>HOME PAGE FOR MY DEPARTMENT</title>

<style>

h1 {text-align: center;

color:red;}

h2 {text-align: center;

color:purple;}

</style>

</head>

<body bgcolor="yellow">

<h1>HINDUSTHAN COLLEGE OF ARTS AND SCIENCE ( AUTONOMOUS)</h1>

<h2> DEPARTMENT OF COMPUTER APPLICATIONS - UG </h2>

<a href="stud.html">STUDENT DETAILS</a><br>

<a href="coursedet.html" target=main 3>COURSE DETAILS</a><br>

<a href="percentage.html" >SEMESTER PERCENTAGE</a><br>

</body>

</html>

stud.html:

<html>

<head><title>student details</title>

<style>

h1 {text-align: center;
color:marron;}

h2 {text-align: center;

color:pink;}

</style>

</head>

<body bgcolor="blue">

<h1>DEPARTMENT OF COMPUTER APPLICATIONS</h1>

<h2> II YEAR STUDENT DETAILS</h2>

<div align="center">

<table border=3>

<tr>

<th>S.No</th>

<th>Reg.No</th>

<th>Student Name</th>

<th>DOB</th>

<th>Batch</th>

<th>Ph.No</th>

<th>Address</th>

</tr>

<tr>

<td>01</td>

<td>21bca201</td>

<td>AAA</td>

<td>12/08/1990</td>

<td>2021 - 2024</td>
<td>9870654123</td>

<td>Coimbatore</td>

</tr>

<tr>

<td>01</td>

<td>21bca202</td>

<td>BBB</td>

<td>12/02/1990</td>

<td>2021 - 2024</td>

<td>9870654123</td>

<td>Chennai</td>

</tr>

<tr>

</table>

</div>

</body>

</html>

coursedet.html

<html>

<head><title>Course Details</title>

<style>

h1 {text-align: center;

color:red;}

h2 {text-align: center;
color:blue;}

</style>

</head>

<body bgcolor="orange">

<h1>DEPARTMENT OF COMPUTER APPLICATIONS</h1>

<h2> II YEAR COURSE DETAILS</h2>

<ul>

<li>java</li>

<li>SSOS</li>

<li>WT lab</li>

<li>Java lab</li>

<li>OR</li>

</ul>

<div align="center">

<table border=2>

<tr>

<th>S.No</th>

<th>Course Code</th>

<th>Subject Name</th>

<th>Subject Staff</th>

</tr>

<tr>

<td>01</td>

<td>21CAU14</td>

<td>WT Lab</td>
<td>Mrs.Jayalakshmi</td>

</tr>

<tr>

<td>02</td>

<td>21CAU15</td>

<td>Java</td>

<td>Mr.S.Aravind</td>

</tr>

<tr>

<td>03</td>

<td>21CAU16</td>

<td>SSOS</td>

<td>Dr.Senthil Vadivu</td>

</tr>

<tr>

<td>04</td>

<td>21CAU17</td>

<td>OR</td>

<td>Mrs.Divyaprabha</td>

</tr>

</table>

</div>

</body>

</html>
percentage.html

<html>

<head><title>Student Percentage</title>

</head>

<body>

<style>

h1 {text-align: center;

color:yellow;}

h2 {text-align: center;

color:red;}

</style>

</head>

<body bgcolor="pink">

<h1>DEPARTMENT OF COMPUTER APPLICATIONS</h1>

<h2> II YEAR STUDENT PERCENTAGE DETAILS</h2>

<div align="center">

<table border=3>

<tr>

<th>S.No</th>

<th>Reg.No</th>

<th>Student Name</th>

<th>I Sem %</th>

<th>II Sem %</th>

</tr>

<tr>
<td>01</td>

<td>21bca201</td>

<td>AAA</td>

<td>73%</td>

<td>80%</td>

</tr>

<tr>

<td>01</td>

<td>21bca202</td>

<td>BBB</td>

<td>65%</td>

<td>79%</td>

</tr>

<tr>

</div>

</body>

</html>
OUTPUT:
Result:

Thus the above program has been executed successfully.


EX.No:04 DESIGN YOUR EDUCTIONAL DETILES AND DISPLAY VISION AND
MISSION OF OUR DEPATRMENT USING DIFFERENT STYLE
Date:

Aim:

Algorithm:
Source code:

<html>

<head>

<title>Education details</title>

</head>

<body>

<h1 align="center"style="color:blue">EDUCATION DETAILS</h1><br><br>

<table broder="1"background="grey"cellspacing="5"cellpadding="5">

<th>SNo</th>

<th>Course</th>

<th>University</th>

<th>College</th>

<th>Year of Passing</th>

<th>Percentage</th>

<tr>

<td>01</td>

<td>BCA</td>

<td>Bharathiar</td>

<td>HICAS</td>

<td>2024</td>

<td>90</td>

</tr>

<tr>

<td>2</td>

<td>BCA</td>
<td>Bharathiar</td>

<td>HICAS</td>

<td>2024</td>

<td>95</td>

</tr>

</table>

<h2 align="center"style="color:green">DEPARTMET VISION&MISSION</h2><br><br>

<table broder="1"background="grey"cellspacing="5"cellpadding="5">

<th>Vision</th>

<th>Mission</th>

<tr>

<td>To provide intellectual environment that fosters the search for new knowlege in a highly
dynamic

computing world and to fine tune graduate research attributes and includes resaerch interest among

the students to pursue higher education</td>

<td>To provide an excellent eduction in all computers related fields.To impart computer education
and generate acquaintance to the students for global competence and excellence in quality.

</td>

</tr>

</table>

</body>

</html>
OUTPUT:

Result:

Thus the above program has been executed successfully.


EX.No:05
DESIGN A REGISTRATION FORM USING DIFFERENT
Date: PROPERTIES.

Aim:

Algorithm:
Source code:

<html>
<head><title>REGISTRATION FORM</TITLE>
</HEAD>
<BODY>
<CENTER><B><U>REGISTRATION FORM OF INTER-COLLEGIATE
FUNCTION</B></U></CENTER>
<FORM>
ALL THE STUDENTS SHOULD READ THE NOTES AT END OF THIS FORM<BR><BR>
<B>PLEASE WRITE IN CAPITAL LETTER<BR><BR>
FIRST NAME:
<INPUT TYPE="TEXT" NAME="FIRSTNAME"><BR><BR>
LAST NAME:
<INPUT TYPE="TEXT" NAME="LASTNAME"><BR><BR>
D.O.B:
<INPUT TYPE="TEXT" NAME="DOB"><BR><BR>
GENDER:
<INPUT TYPE="RADIO" NAME="SEX" VALUE="MALE">MALE
<INPUT TYPE="RADIO" NAME="SEX" VALUE="FEMALE">FEMALE<BR><BR>
NAME OF COLLEGE:
<INPUT TYPE="TEXT" NAME="COLLEGENAME"><BR><BR>
DEGREE:
<INPUT TYPE="TEXT" NAME="DEGREE PROGRAMMING"><BR><BR>
YEAR OF STUDY:
<INPUT TYPE="TEXT" NAME="YEAR OF STUDY"><BR><BR>
ADDRESS:
<INPUT TYPE="TEXT" NAME="ADDRESS"><BR><BR>
PHONE NUMBER:
<INPUT TYPE="TEXT" NAME="NUMBER"><BR><BR>
E-MAIL ID:
<INPUT TYPE="TEXT" NAME="EMAILID"><BR><BR>
PASSWORD:
<INPUT TYPE="PASSWORD" NAME="TEXTFIELD" VALUE=""><BR><BR>
PARTICIPATED PROGRAM:
<INPUT TYPE="RADIO" NAME="SOLO SINGING" VALUE="SOLO SINGING">SOLO
SINGING<BR><BR>
<INPUT TYPE="RADIO" NAME="SOLO DANCING" VALUE="SOLO DANCING">SOLO
DANCING<BR><BR>
<INPUT TYPE="RADIO" NAME="FACIAL PAINTING" VALUE="FACIAL
PAINTING">FACIAL PAINTING<BR><BR>
<INPUT TYPE="RADIO" NAME="GREETINGS"
VALUE="GREETINGS">GREETINGS<BR><BR>
COMMENT:<BR>
<TEXTAREA ROWS="5" COLS="50" NAME="COMMENT">
ENTER THE COMMENTS.....
</TEXTAREA><BR><BR>
<BUTTON ONCLICK="myFunction()">SUBMIT</BUTTON>
<SCRIPT>
function myFunction()
{
alert("Registraion Completed!")
}
</SCRIPT></BODY></HTML>
OUTPUT:

Result:

Thus the above program has been executed successfully


EX.NO:06
Date: CREATING STYLE LIST, CSS, PROPERTIES AND STYLING.

Aim:

Algorithm:
Source code:

6prgm.html

<!doctype html>

<html>

<head>

<link rel="stylesheet"href="style sheet.css">

</head>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph</p>

<h1>The postion property<h1>

<h2>Position 1&2</h2>

<div id="parent2">Postion 1:H1.

<div id="child2">Position 2:Hello</div>

</div>

<h2>position fixed</h2>

<div id="parent4">Positon 3:BCA DEPARTMENT

<div id="child4">Postion 4:Computer Application</div>

</div>

<br/>

<br/>

<div style="margin-bottom:200px"></div>

</body>

</html>
Stylesheet.css

body{

background-color:lightgreen;

h1{

color:White;

text-align:center;

p{

font-family:verdana;

font-size:20px;

#parent2{

position:relative;

border:1px solid blue;

width:300px;

height:100px;

#child2{

position:absolut;

border:1px solid blue;

top:70px;

right:15px;

#parent4{
position:fixed;

border:3px solid blue;

background-colur;rgba(255,200,0.5);

width:300px;

height:100px;

bottom:0;

left:0;

right:0;

#child4{

position:absolut;

border:1px solid blue;

top:70px;

right:15px;

}
Output:

Result:

Thus the above program has been executed successfully.


EX.No:07
Date: DESIGN YOUR OWN RESUME USING CSS PROPERTIES.

Aim:

Algorithm:
Source code:

<html>

<head>

<link type="text/css"rel="stylesheet"href="D:\WT lab\prgm7.css"/>

<title></title>

</head>

<body>

<div id="header">

<p id="name">PRADEEPKUMAR</p>

<a href="mailto:[email protected]"target="_blank"><p>

id="email">"mailto:[email protected]"</p></a>

</div>

<div class="left">

</div>

<div class="right">

<h3>Eductional Qualification</h3>

<table>

<tr id="heading">

<td>Qualification</td>

<td>Board</td>

<td>Percentage</td>

<td>Year</td>

</tr>
<tr>

<td>S.S.C</td>

<td>G.S.E.B India</td>

<td>80.57%</td>

<td>2018</td>

</tr>

<tr>

<td>H.S.C(commerce stream)</td>

<td>P.A.C.M</td>

<td>80%</td>

<td>2020</td>

</tr>

<tr>

<td>B.C.A</td>

<td>Hindusthan college of arts and science</td>

<td>81%</td>

<td>2024</td>

</tr>

</table>

<h3>Technical Skills</h3>

<p>

<ul>

<li>
<span id="course-name">Operating systems:</span>DOS.Windows98,Windows2000,Windows
xp,Windows NT,Windows server 2003,windows vista,Windows7</li>

<li>

<span id="course-name">Application systems:</span>Office 97-2003;Excel 2003/2007</li>

<li>

<span id="course-name">Programming skills:</span>HTML,CSS,Python,Javascript,Learning c and


c++</li></ul>

</p>

<h3>Crtifications/Awards:</h3>

<p>

<ul>

<li>NTPL cource-java-june 2021</li>

<ul>

</p>

<h3>Personal information:</h3>

<p>

<ul>

<li>

A young,determined hard and smart working person.I belive in task based roles and complete
ownership of work.

<li>

<span id="course-name">Languages knows:</span>English,Hindi and malayalam</li>

<li>

<span id="course-name">Hobbies:</span>I love reading IT related books/magazines,playing


chess,swimming self learning through e-cources</li></ul>

</p>

<h3>Other information</h3>
<ul>

<li>

<span id="course-name">Expected Salary:</span>As per company standards</li>

<li>

<span id="course-name">Area of intertest:</span>Softwere Development,Programming,Start


ups,Coading,App Development,Technical Support,</li>

<li>

<span id="course-name">Joining Date:</span>Immediate</li></ul>

</p>

<h3>Declaration</h3>

<p>

I hereby declare that the details furnished above are true and correct to the best of knowledge and
belief.</p>

</div>

<div id="footer"></div>

</body>

</html>

7prgm.css

div

border-radius:5px;

#header

position:fixed;
z-index:1;

height:40px;

width:98%;

background-color:#668284;

margin-bottom:10px

#name{

float:left;

margin-left:20px;

paddy-bottom10px;

font-size:16px;

font-family:verdana,sans-serif;

color:#ffffff;

#email{

float:right;

margin-right:20px;

paddy-bottom10px;

font-size:16px;

font-family:verdana,sans-serif;

color:#ffffff;

#contact{

margin-left:45%;

paddy-bottom10px;
font-size:16px;

font-family:verdana,sans-serif;

color:#ffffff;

a:hover{

font-weight:bold;

.right

float:left:

margin-top:50px;

padding-left:5px;

height:auto;

width:99%;

background-color:#E3EDD8;

#footer

height:40px;

clear:both;

position:relative;

backgroung-color:#C1E3E1;

h3

{
text-decoration:underline;

#job-responsibilites

padding:1px;

.job-title

font-weight:bold;

table

border:1px dashed black;

td

padding:2px;

border:1px solid #E88741;

#course-name

font-weight:bold;

#job-title
{

height:5px;

.job-duration

float:right;

#heading

font-weight:bold;

}
Output:

Result:

Thus the above program has been executed successfully.


EX.No:08
USE INTERNAL AND EXTERNAL CSS FOR A WEBPAGE
Date: ALREADY CREATED.

Aim:

Algorithm:
Source code:

P8 internal.html:

<!DOCTYPE html>

<html>

<head>

<title>Webpage</title>

<style>

body{background-color:powerblue;}

h1{color:blue;}

p{color:red;}

</style>

</head>

<body>

<h1 style="text-align:center;">Hindusthan college of arts and science</h1>

<ul>

<li><a href="#">Faculty</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Exam Result</a></li>

</ul>

<h1>Department of Computer Application</h1>

<h1>Vission</h1>

<p>To provide intellectual environment that fosters the search for new knowlege in a highly dynamic

computing world and to fine tune graduate research attributes and includes resaerch interest among

the students to pursue higher education</p>


<h1>Mission</h1>

<p>To provide an excellent eduction in all computers related fields.To impart computer education
and generate acquaintance to the students for global competence and excellence in quality.</p>

</body>

</html>

P8external.html

<!DOCTYPE html>

<html>

<head>

<title>Webpage</title>

<link rel="stylesheet"href="D:\WT lab\style.css">

</head>

<body>

<h1 style="text-align:center;">Hindusthan college of arts and science</h1>

<ul>

<li><a href="#">Faculty</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Exam Result</a></li>

</ul>

<h1>Department of Computer Application</h1>

<h1>Vission</h1>

<p>To provide intellectual environment that fosters the search for new knowlege in a highly dynamic

computing world and to fine tune graduate research attributes and includes resaerch interest among

the students to pursue higher education</p>

<h1>Mission</h1>
<p>To provide an excellent eduction in all computers related fields.To impart computer education
and generate acquaintance to the students for global competence and excellence in quality.</p>

</body>

</html>

Style.css

body

background-color:lightgreen;

h1

color:green;

text-align:center;

font-famil:verdana;

font-size:20px;

}
Output:

Internal

External

Result:

Thus the above program has been executed successfully.


EX.NO:09
Date: DESIGN A STUDENT MARKLIST USING JAVASCRIPT

Aim:

Algorithm:
Souce Code:

<html>

<head>

<title>STUDENTS INFORMATION</title>

<script type="text/javascript">

function calc( )

form=document.getElementById("form1");

sub1=form.sub1.value;

sub2=form.sub2.value;

sub3=form.sub3.value;

sub4=form.sub4.value;

total=parseInt(sub1)+parseInt(sub2)+parseInt(sub3)+parseInt(sub4);

form.total.value=total;

form.avg.value=parseInt(total)/4;

if(sub1<35||sub2<35||sub3<35||sub4<35)

form.result.value="fail";

else

form.result.value="pass";

</script>

</head>
<body>

<form id="form1">

STUDENT MARK LIST<br/><br/>

Enter The Name:<input type="text" size="20" name="name"/><br/>

Mark in sub1:<input type="text" size="20" name="sub1"/><br/>

Mark in sub2:<input type="text" size="20" name="sub2"/><br/>

Mark in sub3:<input type="text" size="20" name="sub3"/><br/>

Mark in sub4:<input type="text" size="20" name="sub4"/><br/>

<input type="button"name="btn" value="calculate"onclick="calc( )"/>

<br/>

Total;<input type="text" size="20" name="total"/><br/>

Average;<input type="text" size="20" name="avg"/><br/>

Result;<input type="text" size="20" name="result"/><br/>

<input type="reset" name="btn2" value="Reset"/>

</form>

</body>

</html>
Output:

Result:

Thus the above program has been executed successfully.


EX.NO:10
DESIGN TEXT EDITOR USING JAVA SCRIPT.
Date:

Aim:

Algorithm:
Source code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Classic Editor </title>
<script src="https://cdn.ckeditor.com/ckeditor5/35.2.1/classic/ckeditor.js">
</script>
</head>
<body>
<div id="editor">This is some sample content.</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
})
.catch( error => {
console.error( error );
} );</script>
</body>
</html>
</script>
</body>
</html>
Output:

Result:

Thus the above program has been executed successfully.


EX.No:11
VALIDATE A FORM USING JAVA SCRIPT.

Aim:

Algorithm:
Source code:
<html>

<head>

<script>

function validate form(){

var name=document.myform.name.value;

var password=document.myform.password.value;

if(name==null || name==""){

alert("Name can't be blank");

return false;

</script>

</head>

<body>

<form name="my form" method="post"

action="http://www.javatpoint.com/javascriptpages/valid.jsp"onsubmit="return validateform()">

Name:<input type="text" name="name"><br/>

Password:<input type="password"name="password"><br/>

<input type="submit"value="register">

</form>

</body>

</html>
Output:
Result:

Thus the above program has been executed successfully.


Ex.No:12
ANIMATE THE BACKGROUND COLOR AND TEXT OF A
Date: DOCUMENT USING JAVASCRIPT.

Aim:

Algorithm:
Source code:

<html lang="en">
<head><script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function()
{
var state=true;
$("#button").on("click",function()
{
if(state)
{
$("#effect").animate({backgroundcolor:"green", color:"green",width:500},1000);
}
else
{
$("#effect").animate({backgroundcolor:"blue", color:"blue",width:240},1000);
}
state=!state;
});
});
</script></head><body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"> Animate</h3>
<p>
animating a background</p>
</div>
</div>
<button id="button" class="ui-state-default ui-corner-all"> click here</button>
</body>
</html>
Output:
Result:

Thus the above program has been executed successfully.

You might also like