NAME :- PAWAR RUPESH D.

SUBJECT:- WEB DESIGNING 2

DIVISION:- C

SEM :- SY (SEM 4)

ROLL NO. :- 50

COLLEGE : SMT ZS PATEL COLLEGE OF

MANAGEMENT AND TECHNOLOGY

JETHAVA DEVANG R. SYBCA SEM-(4)
DIV-C

QUE-1: write an XML file which will display the book information which include the following:

1 Title of the book 2 Author name 3 publisher name 4 edition 5 price

(Enter data for 5 books, use CSS style sheet to display document)

ANS-1: XML:

<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet type="text/css" href="bookstore.css"?>

<Student_information>

<bookstore>

<title>Web Technology</title>

<Author>Robet Roy</Author>

<Publisher>Technical</Publisher>

<Edition>7th</Edition>

<Price>650</Price>

</bookstore>

<bookstore>

<title>Software Engineering</title>

<Author>Ugrasen Suman</Author>

<Publisher>Technical</Publisher>

<Edition>8th</Edition>

<Price>450</Price>

</bookstore>

<bookstore>

<title>DWDM</title>

<Author>Vipin Kumar</Author>

<Publisher>Technical</Publisher>

2
JETHAVA DEVANG R. SYBCA SEM-(4)
DIV-C

<Edition>5th</Edition>

SPID:- 2021042165

<Price>399</Price>

</bookstore>

<bookstore>

<title>Computer Networks</title>

<Author>Forouzan</Author>

<Publisher>Technical</Publisher>

<Edition>7th</Edition>

<Price>500</Price>

</bookstore>

<bookstore>

<title>D.A.A</title>

<Author>T.H Cormen</Author>

<Publisher>Technical</Publisher>

<Edition>7th</Edition>

<Price>600</Price>

</bookstore>

</Student_information>

3
JETHAVA DEVANG R. SYBCA SEM-(4)
DIV-C

SPID:2021042240

CSS:

Student_information

{ border-style:single;

background-color:rgb(0, 0, 0);

font-family:Segoe UI;

} bookstore { border-

style: single;

background-color: black;

color: white; display:

flex; width: 100%;

padding: 10px; margin:

10px;

title

align-content: center;

width: 100%; margin-left:

120px;

Author

SPID:2021042240

4
JETHAVA DEVANG R. SYBCA SEM-(4)
DIV-C

align-content: center;

width: 100%; margin-left:

120px;

Publisher { align-

content: center;

width: 100%;

margin-left: 120px;

Edition { align-

content: center;

width: 100%;

margin-left: 120px;

Price { align-content:

center; width: 100%;

margin-left: 10px;

Year_Of_Joining

{ align-content:

center;

5
JETHAVA DEVANG R. SYBCA SEM-(4) SPID:
DIV-C

- 20210421

width: 100%; margin-

left: 120px;

}
OUTPUT:

6
JETHAVA DEVANG R. SYBCA SEM-(4) SPID:- 2021042165
DIV-C

QUE-2: Design XML document to store information about student of BCA college, information
include Roll no., Student Name, College Name, Branch, Year of Joining, Email Id. (Enter data for 5
students, use CSS style sheet to display document)

ANS-2: XML:

<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet type="text/css" href="stud.css"?>

<Student_information>

<BCAcollage>

<Roll_no>1</Roll_no>

<Student_Name>krishna</Student_Name>

<Collage_Name>DRB</Collage_Name>

<Branch>VNSGU</Branch>

<Year_Of_Joining>2021</Year_Of_Joining>

<Email_Id>krishna007@gmail.com</Email_Id>

</BCAcollage>

<BCAcollage>

<Roll_no>2</Roll_no>

<Student_Name>krency</Student_Name>

<Collage_Name>Z.s.Patel</Collage_Name>

<Branch>VNSGU</Branch>

<Year_Of_Joining>2021</Year_Of_Joining>

<Email_Id>krency009@gmail.com</Email_Id>

</BCAcollage>

<BCAcollage>

<Roll_no>3</Roll_no>

7
JETHAVA DEVANG R. SYBCA SEM-(4) SPID:- 2021042165
DIV-C

<Student_Name>drashti</Student_Name>

<Collage_Name>J.Z.Shah</Collage_Name>

<Branch>VNSGU</Branch>

<Year_Of_Joining>2021</Year_Of_Joining>

<Email_Id>drashti00@gmail.com</Email_Id>

</BCAcollage>

<BCAcollage>

<Roll_no>4</Roll_no>

<Student_Name>amisha</Student_Name>

<Collage_Name>S.D.Jain</Collage_Name>

<Branch>VNSGU</Branch>

<Year_Of_Joining>2021</Year_Of_Joining>

<Email_Id>amisha123@gmail.com</Email_Id>

</BCAcollage>

<BCAcollage>

<Roll_no>5</Roll_no>

<Student_Name>Krisha</Student_Name>

<Collage_Name>C.B.Patel</Collage_Name> <Branch>VNSGU</Branch>

<Year_Of_Joining>2021</Year_Of_Joining>

<Email_Id>krisha12@gmail.com</Email_Id>

</BCAcollage>

</Student_information>

8
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

CSS:

Student_information { border-

style:single; background-

color:rgb(0, 0, 0); font-

family:Segoe UI }

BCAcollage

{ border-style: single;

background-color: black;

color: white; display:

flex; width: 100%;

padding: 10px; margin:

10px; }

Roll_no { align-

content: center;

width: 100%;

margin-left: 10px; }

Student_Name

{ align-content:

center; width: 100%;

margin-left: 10px; }

Collage_Name

{ align-content:

center; width: 100%;

margin-left: 10px; }

Branch

9
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

{ align-content:

center; width: 100%;

margin-left: 10px; }

Year_Of_Joining

{ align-content:

center; width: 100%;

margin-left: 10px; }

Email_Id

{ align-content:

center; width: 100%;

margin-left: 10px;

OUTPUT:

QUE-3: Write a jQuery to accept two numbers from textboxes and display their addition in third textbox.

ANS-3:

<!DOCTYPE html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>

$(document).ready(function(){ $

("#submit").on("click", function()

{ var a = parseInt($('#a').val());

1
0
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

var b = parseInt($('#b').val()); var

sum = a + b; alert(sum);

})

})

</script>

</head>

<body>

<input type="text" id="a" name="option">

<input type="text" id="b" name="task">

<input id="submit" type="button" value="press me">

</body>

</html>
OUTPUT:

QUE-4: Create Image Slider by using CSS and jQuery.

ANS-4:

<!DOCTYPE html>

<html>

<head>

<title> How to

Design Image

Slider using jQuery ?

1
1
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

</title>

<link rel="stylesheet" href="C:\js">

<style>

img {

width: 100%;

.height {

height: 10px;

.image-container {

max-width: 800px;

position: relative;

margin: auto;

.next {

right: 0;

.previous,

.next { cursor: pointer;

position: absolute;

top: 50%;

padding: 10px;

margin-top: -25px;

1
2
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

.captionText {

color: #000000;

font-size: 14px;

position: absolute;

padding: 12px 12px;

bottom: 8px; width:

100%;

text-align: center;

.slideNumber { background-color: #5574C5;

color: white; border-

radius: 25px;

right: 0;

opacity: .5;

margin: 5px; width:

30px; height: 30px;

text-align: center;

font-weight: bold;

font-size: 24px; position:

absolute;

.fa {

font-size: 32px;

1
3
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

.fa:hover {

transform: rotate(360deg);

transition: 1s; color: white;

.footerdot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px; background-color:

#bbbbbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.5s ease;

.active,

.footerdot:hover {

background-color: black;

</style>

</head>

<body>

<center>

<h1 style="color:green">GeeksforGeeks</h1>

<b>How to code Image Slider using jQuery</b>

<br><br>

1
4
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

</center>

<div class="image-container">

<div class="slide">

<div class="slideNumber">1</div>

<img
src="https://www.geeksforgeeks.org/wp-content/uploads/html768x256.png">

</div>

<div class="slide">

<div class="slideNumber">2</div>

<img
src="https://www.geeksforgeeks.org/wp-content/uploads/CSS768x256.png">

</div>

<a class="previous" onclick="moveSlides(-1)">

<i class="fa fa-chevron-circle-left"></i>

</a>

<a class="next" onclick="moveSlides(1)">

<i class="fa fa-chevron-circle-right"></i>

</a>

</div>

<br>

<div style="text-align:center">

<span class="footerdot" onclick="activeSlide(1)"></span>

<span class="footerdot" onclick="activeSlide(2)"></span>

</div>

<script> var slideIndex = 1;

displaySlide(slideIndex);

1
5
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

function moveSlides(n) {

displaySlide(slideIndex += n);

function activeSlide(n) {

displaySlide(slideIndex = n);

function displaySlide(n) {

var i;

var totalslides =

document.getElementsByClassName("slide"); var totaldots =

document.getElementsByClassName("footerdot");

if (n > totalslides.length) {

slideIndex = 1;

if (n < 1) {

slideIndex = totalslides.length;

for (i = 0; i < totalslides.length; i++) {

totalslides[i].style.display = "none";

for (i = 0; i < totaldots.length; i++) {

totaldots[i].className =totaldots[i].className.replace(" active", "");

totalslides[slideIndex - 1].style.display = "block";

totaldots[slideIndex - 1].className += " active";

1
6
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

</script>

</body>

</html>

OUTPUT:

1
7
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

QUE-5: Design check box and a submit button and disable the submit button until the visitor has
clicked a check box.

ANS-5:

<!DOCTYPE html>

<html>

<head>

<script src="C:\js"></script>

<script>

$('#accept').click(function() { if ($

('#submitbtn').is(':disabled')) {

$('#submitbtn').removeAttr('disabled');

} else {

1
8
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

$('#submitbtn').attr('disabled', 'disabled');

});

</script>

</head>

<body>

<input id="accept" name="accept" type="checkbox" value="y"/>I accept<br>

<input id="submitbtn" disabled="disabled" name="Submit" type="submit" value="Submit" />

</body>

</html>

OUTPUT:

QUE-6: Create table having some records and show output as Zebra Stripes(black and white) table
effect.

ANS-6:

<!DOCTYPE html>

<html>

<head> <style> table

{ border: 1px solid

#008000;

} tr:nth-child(odd)

{ background-color:

#121212; color:#fff;

1
9
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

} th{ background-

color: #fff; color:#000;

border: 1px solid #000;

</style>

</head>

<body>

<div >

<table class="table table-striped">

<thead>

<tr>

<th>Month</th>

<th>Number of Sales</th>

<th>Amount</th>

</tr>

</thead>

<tbody>

<tr>

<td>Jan</td>

<td>105</td>

<td>15,000</td>

</tr>

<tr>

<td>Feb</td>

<td>95</td>

2
0
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

<td>12,000</td>

</tr>

<tr>

<td>Mar</td>

<td>150</td>

<td>20,000</td>

</tr>

<tr>

<td>Apr</td>

<td>50</td>

<td>30,000</td>

</tr>

<tr>

<td>May</td>

<td>80</td>

<td>15,000</td>

</tr>

<tr>

<td>Jun</td>

<td>110</td>

<td>22,000</td>

</tr>

</tbody>

</table>

</div>

2
1
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

</body>

</html>
OUTPUT:

QUE-7: Use jQuery fadeIn(), fadeOut(), and fadeToggle() methods to change the visibility of

elements on the page with a fading effect.(create three button for different methods)

ANS-7: fadeIn()

<!DOCTYPE html>

<html>

<head>

<script src="C:\js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

2
2
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

});

</script>

</head>

<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:pink;"></div><br>

<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>

<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><br>

</body>

</html>

OUTPUT:

2
3
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

Fadeout()

<!DOCTYPE html>

<html>

<head>

<script src="C:\js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeOut();

$("#div2").fadeOut("slow");

$("#div3").fadeOut(3000);

});

2
4
JETHAVA DEVANG R SYBCA SEM-(4)
DIV-C

SPID:- 2021042165

});

</script>

</head>

<body>

<p>Demonstrate fadeOut() with different parameters.</p>

<button>Click to fade out boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:pink;"></div><br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div><br>

</body>

</html>
OUTPUT:

2
5
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

Fadetoggle()

<!DOCTYPE html>

<html>

<head>

<script src="C:\js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

});

});

</script>

</head>

<body>

<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>

</html>

2
6
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

OUTPUT:

QUE-8: Design calculator using jQuery to perform following operations: Addition, Multiplication,
division and subtraction.

ANS-8:

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("#btnAdd").on('click',function(){

Add();

});

$("#btnSubstract").on('click',function(){

Substract();

})

$("#btnMultiply").on('click',function(){

2
7
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

Multiply();

})

$("#btnDivide").on('click',function(){

Divide();

})

});

function Add(){ var

no1=parseInt($("#txtNo1").val());

var no2=parseInt($("#txtNo2").val());

var result =no1+no2; alert("The

result is "+result);

function Substract(){ var

no1=parseInt($("#txtNo1").val());

var no2=parseInt($("#txtNo2").val());

var result =no1-no2; alert("The

result is "+result);

function Multiply(){ var

no1=parseInt($("#txtNo1").val());

var no2=parseInt($("#txtNo2").val());

var result =no1*no2; alert("The

result is "+result);

2
8
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

function Divide(){ var

no1=parseInt($("#txtNo1").val());

var no2=parseInt($("#txtNo2").val());

var result =no1/no2; alert("The

result is "+result);

</script>

</head>

<body>

First Number <input type="text" id="txtNo1" placeholder="Enter first

number"><br><br>

Second Number<input type="text" id="txtNo2" placeholder="Enter second number"><br><br>

<input type="button" id="btnAdd" value="Add">

<input type="button" id="btnSubstract" value="Substract">

<input type="button" id="btnMultiply" value="Multiply">

<input type="button" id="btnDivide" value="Divide">

</body>

</html>

OUTPUT:

2
9
JETHAVA DEVANG R SYBCA SEM-(4) SPID:- 2021042165
DIV-C

QUE-9: Design webpage of Employee Registration (EmpName, Address, Email, Mobile

No., Password) And perform insert, update, delete operation in employee table using
jQuery manipulation Methods.

ANS-9:

QUE-10: Design Facebook Login form using jQuery validation.

ANS-10:

3
0