Scribd
Upload
28 views38 pages

WD Problemsheet 2

The document contains code examples demonstrating various jQuery mouse, keyboard, and form events. It also includes a basic code for building a calculator app using jQuery, Bootstrap, and CSS. Specifically, it shows code for mouseenter and mouseleave events, keyup, keydown, and keypress events, form submit, change, focus, and blur events, and a calculator interface with number buttons and arithmetic operators.

Uploaded by

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

WD Problemsheet 2

The document contains code examples demonstrating various jQuery mouse, keyboard, and form events. It also includes a basic code for building a calculator app using jQuery, Bootstrap, and CSS. Specifically, it shows code for mouseenter and mouseleave events, keyup, keydown, and keypress events, form submit, change, focus, and blur events, and a calculator interface with number buttons and arithmetic operators.

Uploaded by

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

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

enrollment no:-2202020101206

<!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)
});

Gajera sahil chaturbhai 2


Web desiging

problemsheet:-2

enrollment no:-2202020101206

$('#textbox').keydown(function(event){
$('#msg-keydown').html('keydown() is triggered!, keyCode = '
+ event.keyCode + ' which = ' + event.which)
});

$('#textbox').keypress(function(event){
$('#msg-keypress').html('keypress() is triggered!, keyCode = '
+ event.keyCode + ' which = ' + event.which)
});

</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>

Gajera sahil chaturbhai 3


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<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");
});

Gajera sahil chaturbhai 4


Web desiging

problemsheet:-2

enrollment no:-2202020101206

// 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" />
<!-- Required CDN's -->
<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;

Gajera sahil chaturbhai 5


Web desiging

problemsheet:-2

enrollment no:-2202020101206

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">

Gajera sahil chaturbhai 6


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<!-- Calculator UI -->


<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 class="col-sm-3">
<div class="design">2</div>
</div>
<div class="col-sm-3">
<div class="design">3</div>
</div>
<div class="col-sm-3">
<div class="design"
style="background-color:orange;">
+
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="design">4</div>

Gajera sahil chaturbhai 7


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</div>
<div class="col-sm-3">
<div class="design">5</div>
</div>
<div class="col-sm-3">
<div class="design">6</div>
</div>
<div class="col-sm-3">
<div class="design"
style="background-color:orange;">
-
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="design">7</div>
</div>
<div class="col-sm-3">
<div class="design">8</div>
</div>
<div class="col-sm-3">
<div class="design">9</div>
</div>
<div class="col-sm-3">
<div class="design"
style="background-color:orange;">
*
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="design">0</div>
</div>
<div class="col-sm-3">
<div class="design">.</div>
</div>
<div class="col-sm-3">
<div class="design not"> ? </div>
</div>

Gajera sahil chaturbhai 8


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<div class="col-sm-3">
<div class="design"
style="background-color:orange;">
/
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="design"
style="background-color:red;">
(
</div>
</div>
<div class="col-sm-3">
<div class="design"
style="background-color:red;">
)
</div>
</div>
<div class="col-sm-3">
<div class="design not"
style="background-color:red;">
AC
</div>
</div>
<div class="col-sm-3">
<div class="design not"
style="background-color:red;">
=
</div>
</div>

</div>
</div>
</div>
</div>
<div class="col-sm-2 col-md-4"> </div>
</div>
</body>

Gajera sahil chaturbhai 9


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</html>

output:-

5. Create your class timetable Using Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>

Gajera sahil chaturbhai 10


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<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>
<!-- Add more rows for other time slots and days as needed -->
</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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Gajera sahil chaturbhai 11


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</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

Gajera sahil chaturbhai 12


Web desiging

problemsheet:-2

enrollment no:-2202020101206

}
</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fading Effects Demo</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
padding: 10px;

Gajera sahil chaturbhai 13


Web desiging

problemsheet:-2

enrollment no:-2202020101206

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:-

Gajera sahil chaturbhai 14


Web desiging

problemsheet:-2

enrollment no:-2202020101206

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sliding Effects Demo</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<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>

Gajera sahil chaturbhai 15


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<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">

Gajera sahil chaturbhai 16


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<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>

Gajera sahil chaturbhai 17


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<label>Author:</label>
<input type="text"
name="author"
value="sahil" />
<br>
<br>
<label>Author's Email id:</label>
<input type="text"
name="author"
value="[email protected]" />
<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:-

Gajera sahil chaturbhai 18


Web desiging

problemsheet:-2

enrollment no:-2202020101206

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 charset="utf-8">
<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">

Gajera sahil chaturbhai 19


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<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>
<title>Student Management System</title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-
scale=1">
</head>
<base target="_self">

Gajera sahil chaturbhai 20


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<body>
<div class="container mt-5">
<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>

Gajera sahil chaturbhai 21


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<head>
<title>Student Management System</title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial- scale=1">
</head>
<base target="_self">
<body>
<!--navigation bar -->
<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>
<li class="nav-item">
<a class="nav-link"href="course.html">Course</a> </li>
<li class="nav-item">
<a class="nav-link"href="event.html">Events</a> </li>
<li class="nav-item">
<a class="nav-link"
href="anouncement.html">Anouncements</a>
</li>
<li class="nav-item">
<a class="nav-link"href="students.html">Students</a> </li>
<li class="nav-item">
<a class="nav-link"href="timetable.html">Time-Table</a> </li>
<li class="nav-item">
<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">

Gajera sahil chaturbhai 22


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<a href="registration.html">
<button class="btn btn-outline-primary w-
50'>registration</button>
</a><br><br>
<a href="course.html">
<button class="btn btn-outline-primary w-
50">Course</button>
</a><br><br>
<a href="events.html">
<button class="btn btn-outline-primary w-
50">Events</button>
</a><br><br>
<a href="anouncements.html">
<button class="btn btn-outline-primary w-
50'>Anouncements</button>
</a><br><br>
<a href="students.htmI">
<button class="btn btn-outline-primary w-
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">
<button class="btn btn-outline-primary w-
50">Logout</button>
</a><br><br>
</div>
</body>
</html>

Gajera sahil chaturbhai 23


Web desiging

problemsheet:-2

enrollment no:-2202020101206

course.html

<!DOCTYPE html>
<html>
<head>
<title>Student Management System</title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-
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>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<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>
<li class="nav-item">

Gajera sahil chaturbhai 24


Web desiging

problemsheet:-2

enrollment no:-2202020101206

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


<li class="nav-item">
<a class="nav-link"href="event.html">Events</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="anouncement.html">Anouncements</a>
</li>
<li class="nay-item">
<a class="nav-link"href="students.html">Students</a>
</li>
<li class="nav-item">
<a class="nav-link"href="timetable.html">Time-Table</a> </li>
<li class="nav-item">
<a class="nav-link"href="login.html">Logout</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<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>

Gajera sahil chaturbhai 25


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</html>

Event.html

<!DOCTYPE html>
<html>
<head>
<title>Student Management System</title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial- 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>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link"href="course.html">Course</a>
</li>
<li class="nav-item">
<a class="nav-link"href="event.html">Events</a>

Gajera sahil chaturbhai 26


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</li>
<li class="nav-item">
<a class="nav-link"
href="anouncement.html">Anouncements</a>
</li>
<li class="nav-item">
<a class="nav-link"href="students.html">Students</a> </li>
<li class="nav-item">
<a class="nav-link"href="timetable.html">Time-Table</a>
</li>
<li class="nav-item">
<a class="nav-link"href="login.html">Logout</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<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>

Gajera sahil chaturbhai 27


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</tr>
<tr>
<td>Student Startup</td>
</tr>
<tr>
<td>Cyber Week</td>
</tr>
<tr>
<td>IICE</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Gajera sahil chaturbhai 28


Web desiging

problemsheet:-2

enrollment no:-2202020101206

Announcement.html

<!DOCTYPE html>
<html>
<head>
<title>Student Management System</title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-
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>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link"href="course.html">Course</a> </li>
<li class="nav-item">
<a class="nav-link"href="event.html">Events</a> </li>
<li class="nav-item">
<a class="nav-link"
href="anouncement.html">Anouncements</a>
</li>
<li class="nav-item">
<a class="nav-link"href="students.html">Students</a> </li>
<li class="nav-item">
<a class="nav-link"href="timetable.html">Time-Table</a>
</li>
<li class="nav-item">
<a class="nav-link"href="login.html">Logout</a>
</li>
</ul>

Gajera sahil chaturbhai 29


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</div>
</nav>
<div class="container mt-5">
<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>

Gajera sahil chaturbhai 30


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</tr>
</tbody>
</table>
</div>
</body>
</html>

Students.htmI

<!DOCTYPE html>
<html>
<head>
<title>Student Management System</title>
</head>
<base target="_self">
<body>
<nav class="navbar navbar-expand-sm bg-light">
<a class="navbar-brand'style="margin-left:10px"

Gajera sahil chaturbhai 31


Web desiging

problemsheet:-2

enrollment no:-2202020101206

href="index.html">Student Management</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link"href="course.html">Course</a> </li>
<li class="nav-item">
<a class="nav-link"href="event.html">Events</a> </li>
<li class="nav-item">
<a class="nav-link"
href="anouncement.html">Anouncements</a>
</li>
<li class="nav-item">
<a class="nav-link"href="students.html">Students</a> </li>
<li class="nav-item">
<a class="nav-link"href="timetable.html">Time-Table</a> </li>
<li class="nav-item">
<a class="nav-link"href="login.html">Logout</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<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>

Gajera sahil chaturbhai 32


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</thead>
<tbody>
<tr>
<td>1</td>
<td>Rahul Chintala</td>
<td>[email protected]</td>
<td>BCA</td>
</tr>
<tr>
<td>2</td>
<td>Bharath Anumandla</td>
<td>[email protected]</td>
<td>BCA</td>
</tr>
<tr>
<td>3</td>
<td>Bharat Guda</td>
<td>[email protected]</td>
<td>BCA</td>
</tr>
<tr>
<td>4</td>
<td>Rakesh Kamuni</td>
<td>[email protected]</td>
<td>BCA</td>
</tr>
<tr>
<td>5</td>
<td>Sowmith Kota</td>
<td>[email protected]</td>
<td>BCA</td>
</tr>
<tr>
<td>6</td>
<td>Sairam Maduri</td>

Gajera sahil chaturbhai 33


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<td>[email protected]</td>
<td>BCA</td>
</tr>
<tr>
<td>7</td>
<td>Uday Mekala</td>
<td>[email protected]</td>
<td>BCA</td>
</tr>
<tr>
<td>8</td>
<td>Srinath Mittakola</td>
<td>[email protected]</td>
<td>BCA</td>
</tr>
<tr>
<td>9</td>
<td>Rohit Mittakola</td>
<td>[email protected]</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>[email protected]</td>
<td>BCA</td>
</tr>
</tbody>
</table>

Gajera sahil chaturbhai 34


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</div>
</body>
</html>

Time-Table.html

<!DOCTYPE html>
<html>
<head>
<title>Student Management System</title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-
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>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"href="index.html">Home</a> </li>

Gajera sahil chaturbhai 35


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<li class="nav-item">
<a class="nav-link"href="registration.html">Registration</a> </li>
<li class="nav-item">
<a class="nav-link"href="course.html">Course</a> </li>
<li class="nav-item">
<a class="nav-link"href="event.html">Events</a> </li>
<li class="nav-item">
<a class="nav-link"
href="anouncement.html">Anouncements</a>
</li>
<li class="nav-item">
<a class="nav-link"href="students.html">Students</a> </li>
<li class="nav-item">
<a class="nav-link"href="timetable.html">Time-Table</a> </li>
<li class="nav-item">
<a class="nav-link"href="login.html">Logout</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5">
<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>

Gajera sahil chaturbhai 36


Web desiging

problemsheet:-2

enrollment no:-2202020101206

<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>

Gajera sahil chaturbhai 37


Web desiging

problemsheet:-2

enrollment no:-2202020101206

</body>
</html>

Gajera sahil chaturbhai 38

You might also like