WD Problemsheet 2

Web desiging
problemsheet:-2
enrollment no:-2202020101206
1. Create a JQuery code to demonstrate all mouse events.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body bgcolor="cyan">
<p id="key">All mouse events</p>
<script>
$("document").ready(function () {
$("#key").mouseenter(enter);
$("#key").mouseleave(leave);
function enter() {
$("#key").text( "mouseenter event has occurred");
}
function leave()
{
$("#key").text("mouseleave event has occurred");
}
});
</script>
</body>
</html>
output:-
2. Create a JQuery code to demonstrate all Keyboard events.
Gajera sahil chaturbhai 1

Web desiging
problemsheet:-2
<!DOCTYPE.html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
span{
padding:8px;
margin:8px;
color:blue;
}
div{
padding:8px;
margin:8px;
}
</style>
</head>
<body>
<label>TextBox : </label>
<input id="textbox" type="text" size="50" />
<div>
<label>1. keyup() Message :</label> <span id="msg-keyup"></span>
</div>
<div>
<label>2. keydown() Message :</label><span id="msg-keydown"></span>
</div>
<div>
<label>3. keypress() Message :</label><span id="msg-keypress"></span>
</div>
<script type="text/javascript">
$('#textbox').keyup(function(event){
$('#msg-keyup').html('keyup() is triggered!, keyCode = '
+ event.keyCode + ' which = ' + event.which)
});

Web desiging
problemsheet:-2
$('#textbox').keydown(function(event){
$('#msg-keydown').html('keydown() is triggered!, keyCode = '
});
$('#textbox').keypress(function(event){
$('#msg-keypress').html('keypress() is triggered!, keyCode = '
});
</script>
</body>
</html>
out put:-
3. Create a JQuery code to demonstrate all Form events.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Events Demo</title>

Web desiging
problemsheet:-2
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
input {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function() {
// Submit event
$("#myForm").submit(function(event) {
alert("Form submitted!");
event.preventDefault(); // Prevent the default form submission
});
// Change event
$("input").change(function() {
console.log("Input value changed");
});
// Focus event
$("input").focus(function() {
console.log("Input focused");
});
// Blur event
$("input").blur(function() {
console.log("Input blurred");
});

Web desiging
problemsheet:-2
// Keyup event
$("input").keyup(function() {
console.log("Key released");
});
});
</script>
</body>
</html>
output:-
4. Create a basic Calculator using JQuery, bootstrap and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
.calculator {
padding: 4px;

Web desiging
problemsheet:-2
margin: 4px;
background-color: #3a4655;
width: 100%;
height: auto;
/* Box shadow for different browsers */
-webkit-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.75);
}
.form-control {
border: 0px solid transparent;
padding: 0px;
border: 0px;
border-radius: 0px;
}
input[type="text"]:disabled {
background-color: white;
text-align: right;
padding: 8px;
}
.design {
text-align: center;
border-radius: 4px;
width: 100%;
height: auto;
color: white;
padding: 4px;
margin: 4px;
background-color: #2a2e4b;
}
</style>
</head>
<body style="background-color:#f9f9fa;">
<div class="row">
<div class="col-sm-2 col-md-4"> </div>
<div class="col-sm-8 col-md-4">

Web desiging
problemsheet:-2


<br>
<br>
<br>
<br>
<div class="container calculator">
<div class="form-input">
<input type="text"
class="form-control input-lg"
id="expression"
value="0"
disabled>
<input type="text"
class="form-control input-xs"
id="result"
value="0"
disabled>
</div>
<br>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="design">1</div>
</div>
</div>
</div>
<div class="design"
style="background-color:orange;">
+
</div>
</div>
</div>
<div class="row">

Web desiging
problemsheet:-2
</div>
</div>
</div>
<div class="design"
-
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<div class="design"
*
</div>
</div>
</div>
<div class="row">
</div>
<div class="design">.</div>
</div>
<div class="design not"> ? </div>
</div>

Web desiging
problemsheet:-2
<div class="design"
/
</div>
</div>
</div>
<div class="row">
<div class="design"
style="background-color:red;">
(
</div>
</div>
<div class="design"
)
</div>
</div>
<div class="design not"
AC
</div>
</div>
<div class="design not"
=
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-md-4"> </div>
</div>
</body>

Web desiging
problemsheet:-2
</html>
output:-
5. Create your class timetable Using Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<title>Class Timetable</title>
</head>
<body>

Web desiging
problemsheet:-2
<div class="container mt-5">

<h2 class="mb-4">Class Timetable</h2>
<table class="table table-bordered">

<thead>
<tr>
<th scope="col">Time</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM - 10:00 AM</td>
<td>Math</td>
<td>English</td>
<td>Science</td>
<td>History</td>
<td>Physical Education</td>
</tr>
<tr>
<td>10:00 AM - 11:00 AM</td>
<td>Physics</td>
<td>Art</td>
<td>Math</td>
<td>English</td>
<td>Chemistry</td>
</tr>

</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Web desiging
problemsheet:-2
</body>
</html>
output:-
6. Create a JQuery code to demonstrate all Display Effects.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).hide(1000);
});
});
</script>
<style>
div{
margin:10px;
padding:12px;
border:2px solid #666;
width:60px;
cursor:pointer

Web desiging
problemsheet:-2
}
</style>
</head>
<body>
<p>Click on any of the squares to see the result:</p>
<div>Hide Me</div>
<div>Hide Me</div>
<div>Hide Me</div>
</body>
</html>
output:-
7. Create a JQuery code to demonstrate all Fading Effects.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fading Effects Demo</title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
padding: 10px;

Web desiging
problemsheet:-2
display: inline-block;
}
</style>
</head>
<body>
<div id="fadeInOut">Click me to fade in/out</div>

<div id="fadeToggle">Click me to fade toggle</div>
<div id="fadeTo">Click me to fade to 50% opacity</div>
<script>
$(document).ready(function(){
// fadeIn and fadeOut
$("#fadeInOut").click(function(){
$(this).fadeToggle(1000);
});
// fadeToggle
$("#fadeToggle").click(function(){
$(this).fadeToggle(1000);
});
// fadeTo
$("#fadeTo").click(function(){
$(this).fadeTo(1000, 0.5);
});
});
</script>
</body>
</html>
output:-

Web desiging
problemsheet:-2
8. Create a JQuery code to demonstrate all Sliding Effects.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sliding Effects Demo</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<div class="box" id="slideToggleBox">slideToggle Box</div>

<button onclick="slideToggleEffect()">slideToggle</button>
<div class="box" id="slideDownBox">slideDown Box</div>

<button onclick="slideDownEffect()">slideDown</button>

Web desiging
problemsheet:-2
<div class="box" id="slideUpBox">slideUp Box</div>

<button onclick="slideUpEffect()">slideUp</button>
<script>
function slideToggleEffect() {
$("#slideToggleBox").slideToggle();
}
function slideDownEffect() {
$("#slideDownBox").slideDown();
}
function slideUpEffect() {
$("#slideUpBox").slideUp();
}
</script>
</body>
</html>
output:-
9. Create a JQuery code to demonstrate the concept of Traversing.
<!DOCTYPE html>
<html lang="en">

Web desiging
problemsheet:-2
<head>
<meta charset="utf-8">
<style>
p{
color: grey;
margin: 10px;
padding: 10px;
}
form {
margin: 10px;
padding: 10px;
}
#article b {
color: blue;
font-weight: bold;
}
label {
color: green;
font-weight: bold;
}
</style>
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<p><em>Hello</em>GeeksforGeeks</p>
<p id="article"><b>Article Info: </b></p>
<form>
<label>Article Title:</label>
<input type="text"
name="article"
value="jQuery |Traversing" />
<br>
<br>

Web desiging
problemsheet:-2
<label>Author:</label>
<input type="text"
name="author"
value="sahil" />
<br>
<br>
<label>Author's Email id:</label>
<input type="text"
name="author"
value="sahil@gmail.com" />
<br>
<br>
<label>Website:</label>
<input type="text"
name="url"
value="https://www.geeksforgeeks.org/" />
<br>
<br>
</form>
<script>
$("#article")
.append($("input").map(function() {
return $(this).val();
})
.get()
.join(", "));
</script>
<script>
$("p")
.find("em")
.end()
.css("border", "2px red solid");
</script>
</body>
</html>
output:-

Web desiging
problemsheet:-2
10.Create a Simple website for Student Management System using

Bootstrap, CSS, JQuery.
(Login, Registration Must. With minimum 7 webpages required Webpage
Nameshould be appropriate
Registration.html
<!DOCTYPE html>
<html>
<head>
<title>Student Management System</title>
<meta name="viewport"content="width=device-width,initial-
scale=1">
</head>
<base target="_self">
<body>
<div class="container mt-5"name="d1">
<h2>Registration</h2>
<form name="f1"onSubmit="return valid();"action="index.html">
<div class="mb-3">
<label for="name">Name:</label>
<input type="text"class="form-control w-25"id="name" placeholder="Enter Your
Name"name="name"required>
</div>
<div class="mb-3 mt-3">

Web desiging
problemsheet:-2
<label for="email">Email:</label>
<input type="email"class="form-control w-25"id="emai!" placeholder="Enter
email"name="email"required>
</div>
<div class="mb-3">
<label for="tel">Phone No:</label>
<input type="tell"class="form-control w-25"id="tel"
placeholder="Enter Phone Number"name="tel"minlength="10"
maxlength="10"required>
</div>
<div id="errors"></div>
<button type="submit"class="btn btn-
primary">Submit</button>
</form>
</div>
</body>
</html>
Login.html
<!DOCTYPE html>
<html>
<head>
scale=1">
</head>

Web desiging
problemsheet:-2
<body>
<h2>Login</h2>
<form action="index.html">
<div class="mb-3">
<label for="name">Name:</label>
<input type="text"class="form-control w-25"id="name" placeholder="Enter Your
Name"name="name"required>
</div>
<div class="mb-3 mt-3">
<label for="email">Email:</label>
<input type="email"class="form-control w-25"id="email" placeholder="Enter
email"name="email"required>
</div>
<div class="mb-3">
<label for="tel">Password:</label>
<input type="tell"class="form-control w-25"id="tel"
placeholder="Enter Phone Number"name="tel"minlength="10" maxlength="10"required>
</div>
<button type="submit"class="btn btn-
primary">Submit</button>
</form>
</div>
</body>
</html>
Index.html
<!DOCTYPE html>
<html>

Web desiging
problemsheet:-2
<head>
<meta name="viewport"content="width=device-width,initial- scale=1">
</head>
<body>

<nav class="navbar navbar-expand-sm bg-light"id="navmanu"> <a class="navbar-
brand"style="margin-left:10px">Student
Management</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav"id="navmanu">
<li class="nav-item active">
<a class="nav-link"href="index.html">Home</a> </li>
<li class="nav-item">
<a class="nav-link"href="registration.html">Registration</a> </li>
<a class="nav-link"href="course.html">Course</a> </li>
<a class="nav-link"href="event.html">Events</a> </li>
<a class="nav-link"
href="anouncement.html">Anouncements</a>
</li>
<a class="nav-link"href="students.html">Students</a> </li>
<a class="nav-link"href="timetable.html">Time-Table</a> </li>
<a class="nav-link"href="login.html">Logout</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5 text-center"style="background- color:lightblue;">
<h1>Welcome to the Student Management System</h1>
<p>Here you can view and manage information about students
and courses</p>
</div>
<div align="center">

Web desiging
problemsheet:-2
<a href="registration.html">
<button class="btn btn-outline-primary w-
50'>registration</button>
</a><br><br>
<a href="course.html">
50">Course</button>
</a><br><br>
<a href="events.html">
50">Events</button>
</a><br><br>
<a href="anouncements.html">
50'>Anouncements</button>
</a><br><br>
<a href="students.htmI">
50">Students</button>
</a><br><br>
<a href="timetable.html">
<button class="btn btn-outline-primary w-50">Time-
Table</button>
</a><br><br>
<a href="login.html">
50">Logout</button>
</a><br><br>
</div>
</body>
</html>

Web desiging
problemsheet:-2
course.html
<!DOCTYPE html>
<html>
<head>
scale=1">
</head>
<base target="_self'">
<body>
<nav class="navbar navbar-expand-sm bg-light">
<a class="navbar-brand"style="margin-left:10px"
href="index.html">Student Management</a>
<ul class="navbar-nav">

Web desiging
problemsheet:-2

<a class="nav-link"href="event.html">Events</a>
</li>
<a class="nav-link"
</li>
<li class="nay-item">
<a class="nav-link"href="students.html">Students</a>
</li>
</li>
</ul>
</div>
</nav>
<h2>Course</h2>
<table class="table table-striped table-bordered table-hover"> <tbody>
<tr>
<td>B.C.A</td>
</tr>
<tr>
<td>M.C.A</td>
</tr>
<tr>
<td>Cyber Security</td>
</tr>
<tr>
<td>B-Sc</td>
</tr>
<tr>
<td>M-Sc</td>
</tr>
</tbody>
</table>
</div>
</body>

Web desiging
problemsheet:-2
</html>
Event.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"content="width=device-width,initial- scale=1">
</head>
<body>
<a class="nav-link"href="index.html">Home</a>
</li>
<a class="nav-link"href="course.html">Course</a>
</li>
<a class="nav-link"href="event.html">Events</a>

Web desiging
problemsheet:-2
</li>
<a class="nav-link"
</li>
<a class="nav-link"href="timetable.html">Time-Table</a>
</li>
</li>
</ul>
</div>
</nav>
<h2>Events</h2>
<table class="table table-striped table-bordered table-hover"> <thead>
<tr>
<td>Completed</td>
<td>Up Coming</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cyclathon &Marathon</td>
<td>Mindstrom</td>
</tr>
<tr>
<td>One Week for Nation</td>
<td rowspan="7"></td>
</tr>
<tr>
<td>Talent Hunt</td>
</tr>
<tr>
<td>Blood Donation Camp</td>
</tr>
<tr>
<td>Exam-Shala Workshop</td>

Web desiging
problemsheet:-2
</tr>
<tr>
<td>Student Startup</td>
</tr>
<tr>
<td>Cyber Week</td>
</tr>
<tr>
<td>IICE</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Web desiging
problemsheet:-2
Announcement.html
<!DOCTYPE html>
<html>
<head>
scale=1">
</head>
<body>
<a class="nav-link"
</li>
<a class="nav-link"href="timetable.html">Time-Table</a>
</li>
</li>
</ul>

Web desiging
problemsheet:-2
</div>
</nav>
<h2>External-Exam Time-Table</h2>
<table class="table table-striped table-bordered table-hover"> <thead>
<tr>
<th>Date</th>
<th>Subject Code</th>
<th>Time</th>
<th>Subject Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>09-01-2023</td>
<td>1020201301</td>
<td>11:00 AM to 01:30 PM</td>
<td>Programming in C++</td>
</tr>
<tr>
<td>11-01-2023</td>
<td>1020201302</td>
<td>11:00 AM to 01:30 PM</td>
<td>Web Designing</td>
</tr>
<tr>
<td>13-01-2023</td>
<td>1020201303</td>
<td>11:00 AM to 01:30 PM</td>
<td>Relational-Database Management System</td> </tr>
<tr>
<td>16-01-2023</td>
<td>1020201304</td>
<td>11:00 AM to 01:30 PM</td>
<td>Software Engineering</td>
</tr>
<tr>
<td>18-01-2023</td>
<td>1020201305</td>
<td>11:00 AM to 01:30 PM</td>
<td>Business Statistics</td>

Web desiging
problemsheet:-2
</tr>
</tbody>
</table>
</div>
</body>
</html>
Students.htmI
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a class="navbar-brand'style="margin-left:10px"

Web desiging
problemsheet:-2
<a class="nav-link"
</li>
</li>
</ul>
</div>
</nav>
<h2>Students</h2>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Course</th>
</tr>

Web desiging
problemsheet:-2
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rahul Chintala</td>
<td>rahulchintala@gmail.com</td>
<td>BCA</td>
</tr>
<tr>
<td>2</td>
<td>Bharath Anumandla</td>
<td>bharathanumandla@gmail.com</td>
<td>BCA</td>
</tr>
<tr>
<td>3</td>
<td>Bharat Guda</td>
<td>bharathguda@gmail.com</td>
<td>BCA</td>
</tr>
<tr>
<td>4</td>
<td>Rakesh Kamuni</td>
<td>rakeshkamuni@gmail.com</td>
<td>BCA</td>
</tr>
<tr>
<td>5</td>
<td>Sowmith Kota</td>
<td>sowmithkota@gmail.com</td>
<td>BCA</td>
</tr>
<tr>
<td>6</td>
<td>Sairam Maduri</td>

Web desiging
problemsheet:-2
<td>sairammaduri@gmail.com</td>
<td>BCA</td>
</tr>
<tr>
<td>7</td>
<td>Uday Mekala</td>
<td>udaymekala@gmail.com</td>
<td>BCA</td>
</tr>
<tr>
<td>8</td>
<td>Srinath Mittakola</td>
<td>srinathmittakola@gmail.com</td>
<td>BCA</td>
</tr>
<tr>
<td>9</td>
<td>Rohit Mittakola</td>
<td>rohitmittakola@gmail.com</td>
<td>BCA</td>
</tr>
<tr>
<td>10</td>
<td>Ganesh Margam</td>
<td>ganeshmargam.com</td>
<td>BCA</td>
</tr>
<tr>
<td>11</td>
<td>Kartik Shamantula</td>
<td>kartikshamantula@gmail.com</td>
<td>BCA</td>
</tr>
</tbody>
</table>

Web desiging
problemsheet:-2
</div>
</body>
</html>
Time-Table.html
<!DOCTYPE html>
<html>
<head>
scale=1">
</head>
<body>

Web desiging
problemsheet:-2
<a class="nav-link"
</li>
</li>
</ul>
</div>
</nav>
<h2>Time-Table</h2>
<table style="text-align:center"class="table table-striped table- bordered table-hover">
<thead>
<tr>
<th class="table-dark"colspan="7">SYBCA-B</th>
</tr>
<tr class="table-active table-info">
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td>10:15-11:15</td>
<td>WD</td>

Web desiging
problemsheet:-2
<td>WD</td>
<td>SE</td>
<td>SE</td>
<td>WD</td>
<td>CPP</td>
</tr>
<tr>
<td>11:15-12:15</td>
<td>RDBMS</td>
<td>RDBMS</td>
<td>CPP</td>
<td>CPP</td>
<td>CPP</td>
<td>WD</td>
</tr>
<tr>
<td>12:15-12:45</td>
<td colspan="6">Recess</td>
</tr>
<tr>
<td>12:45-01:45</td>
<td>Lab-2</td>
<td>Lab-2</td>
<td>Lab-2</td>
<td>Lab-2</td>
<td>Lab-2</td>
<td>Lab-2</td>
</tr>
<tr>
<td>01:45-02:45</td>
<td>BS</td>
<td>BS</td>
<td>RDBMS</td>
<td>RDBMS</td>
<td>SE</td>
<td></td>
</tr>
</tbody>
</table>
</table>
</div>

Web desiging
problemsheet:-2
</body>
</html>

WD Problemsheet 2

Uploaded by

Copyright:

Available Formats

You might also like

WD Problemsheet 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WD Problemsheet 2

Uploaded by

Copyright:

Available Formats

Web desiging

1. Create a JQuery code to demonstrate all mouse events.

2. Create a JQuery code to demonstrate all Keyboard events.

Gajera sahil chaturbhai 1

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Gajera sahil chaturbhai 2

3. Create a JQuery code to demonstrate all Form events.

Gajera sahil chaturbhai 3

Gajera sahil chaturbhai 4

4. Create a basic Calculator using JQuery, bootstrap and CSS.

Gajera sahil chaturbhai 5

Gajera sahil chaturbhai 6

Gajera sahil chaturbhai 7

Gajera sahil chaturbhai 8

Gajera sahil chaturbhai 9

5. Create your class timetable Using Bootstrap.

Gajera sahil chaturbhai 10

<div class="container mt-5">

<table class="table table-bordered">

Gajera sahil chaturbhai 11

6. Create a JQuery code to demonstrate all Display Effects.

Gajera sahil chaturbhai 12

7. Create a JQuery code to demonstrate all Fading Effects.

Gajera sahil chaturbhai 13

<div id="fadeInOut">Click me to fade in/out</div>

Gajera sahil chaturbhai 14

8. Create a JQuery code to demonstrate all Sliding Effects.

<div class="box" id="slideToggleBox">slideToggle Box</div>

<div class="box" id="slideDownBox">slideDown Box</div>

Gajera sahil chaturbhai 15

<div class="box" id="slideUpBox">slideUp Box</div>

9. Create a JQuery code to demonstrate the concept of Traversing.

Gajera sahil chaturbhai 16

Gajera sahil chaturbhai 17

Gajera sahil chaturbhai 18

10.Create a Simple website for Student Management System using

Gajera sahil chaturbhai 19

Gajera sahil chaturbhai 20

Gajera sahil chaturbhai 21

Gajera sahil chaturbhai 22

Gajera sahil chaturbhai 23

Gajera sahil chaturbhai 24

<a class="nav-link"href="course.html">Course</a> </li>

Gajera sahil chaturbhai 25

Gajera sahil chaturbhai 26

Gajera sahil chaturbhai 27

Gajera sahil chaturbhai 28

Gajera sahil chaturbhai 29

Gajera sahil chaturbhai 30

Gajera sahil chaturbhai 31

Gajera sahil chaturbhai 32

Gajera sahil chaturbhai 33

Gajera sahil chaturbhai 34

Gajera sahil chaturbhai 35

Gajera sahil chaturbhai 36

Gajera sahil chaturbhai 37