TISHA

TISHA WEB DESIGNING - 2 S.Y.B.C.A.
NAME – GABANI TISHA
SUBJECT – WEB DESIGNING - 2
ROLL NO. – 13
CLASS – S.Y.B.C.A.
DIVISION – B
1. Design an XML document to store information about a student of an engineering college,

the information must include Enrolment, Name, and Name of the College, Branch, Year of
Joining, and email id. Make up sample data for 5 students by using CSS style sheet and use it
to display the document.
Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="q1.css">
<title>Document</title>
</head>
<body>
<class>
<heading>"Welcome to form"</heading>
<student1>
<Enrollment>E-20202939238</Enrollment>
<Name>Moradiya Dikshit</Name>
<College>sutex College</College>
<Branch>Amroli</Branch>
<Joing-year>2020</Joing-year>
<email>moradiyadikshit@gmail.com</email>
</student1>
<student2>
<Name>Kikani Jemin</Name>
<College>zs patel College</College>
<Branch>adjan</Branch>
<email>jeminkikani@gmail.com</email>
</student2>
<student3>
<Name>Dankhra Tushar</Name>
<email>tushardankhra@gmail.com</email>
</student3>
<student4>
<Name>Jasani Rutvik</Name>
<email>jasanirutvik@gmail.com</email>
</student4>
<student5>
<Name>Virani Kartik</Name>
<email>viranikartik@gmail.com</email>
</student5>
</class>
</body>
</html>
CSS:-
.class{
color:white;
background-color: cadetblue;
}
2. Write JQuery to accept two numbers from textboxes and display their multiplication in Third
textbox.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#multiplyBtn").click(function(){
var num1 = $("#num1").val();
var num2 = $("#num2").val();
var result = num1 * num2;
$("#result").val(result);
});
});
</script>
<title></title>
</head>
<body>
<h3>Q-2 Write JQuery to accept two numbers from textboxes and display
their multiplication in Third textbox </h3>
<div>
<label for="num1">Number 1:</label>
<input type="text" id="num1" >
</div>
<div>
<label for="num2">Number 2:</label>
<input type="text" id="num2">
</div>
<div>
<label for="result">Result:</label>
<input type="text" id="result" disabled>
</div>
<div>
<button id="multiplyBtn">Multiply</button>
</div>
</body>
</html>
3. Write JQuery to design a simple calculator to perform the following operations: addition,
subtraction, Multiplication and division.
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
var operand1, operand2, operator;
$(".number").click(function() {
$("#input").val($("#input").val() + $(this).text());
});
$(".operator").click(function() {
operand1 = $("#input").val();
operator = $(this).text();
$("#input").val("");
});
$("#equal").click(function() {
operand2 = $("#input").val();
var result;
switch (operator) {
case "+":
result = parseFloat(operand1) + parseFloat(operand2);
break;
case "-":
result = parseFloat(operand1) - parseFloat(operand2);
break;
case "*":
result = parseFloat(operand1) * parseFloat(operand2);
break;
case "/":
result = parseFloat(operand1) / parseFloat(operand2);
break;
}
$("#input").val(result);
});
$("#clear").click(function() {
$("#input").val("");
operand1 = operand2 = operator = "";

});
});
</script>
</head>
<body>
<div id="calculator">
<input type="text" id="input" disabled>
<br>
<button class="number">1</button>
<button class="operator">+</button>
<br>
<button class="operator">-</button>
<br>
<button class="operator">*</button>
<br>
<button class="operator">/</button>
<button id="equal">=</button>
<button id="clear">c</button>
</div>
</body>
</html>
4. Write JQueryto takes student’s marks out of 100 in 5 different textboxes and add them on
button click and display the Total, percentage in Tabular format.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<title>prg4</title>
</head>
<body>
<h1>Mark sheet</h1>
<h3>Write JQueryto takes students marks out of 100 in 5 different
textboxes and add them on button click and display the Total,
percentage in Tabular format.</h3>
<table id="student-marks">
<tr>
<td>Vb.Net:</td>
<td><input type="text" id="subject1"></td>
</tr>
<tr>
<td>Java:</td>
</tr>
<tr>
<td>Is:</td>
</tr>
<tr>
<td>WD:</td>
</tr>
<tr>
<td>Iot:</td>
</tr>
<tr>
<td>Total:</td>
<td id="total"></td>
</tr>
<tr>
<td>Percentage:</td>
<td id="percentage"></td>
</tr>
</table>
<button id="calculate-btn">Calculate</button>
</body>
<script>
$("#calculate-btn").click(function(){
var subject1 = parseFloat($("#subject1").val());
var total = subject1 + subject2 + subject3 + subject4 + subject5;
var percentage = (total / 500) * 100;
$("#total").text(total);
$("#percentage").text(percentage + "%");
});
});
</script>
</html>
5. Write JQuery function that takes a string form user which has lower and upper case letters
and converts upper case letters to lower case, and lower case letters to upper case and
display another textbox.
<!DOCTYPE html>
<html>
<head>
<script>
$("#convert-button").click(function(){
var originalString = $("#original-string").val();
var modifiedString = originalString.split("").map(function(char){
if(char === char.toUpperCase()){
return char.toLowerCase();
}
else if(char === char.toLowerCase()){
return char.toUpperCase();
}
}).join("");
$("#modified-string").val(modifiedString);
});
});
</script>
</head>
<body>
<label for="original-string">Enter a string:</label>
<input type="text" id="original-string">
<button id="convert-button">Convert</button>
<br><br>
<label for="modified-string">Modified string:</label>
<input type="text" id="modified-string">
</body>
</html>
6. Create Webpage of Sales form (Using only Textboxes I.e. Product Name, Qty, Price, Discount
in %) calculate Discount Amount and Net Amount and Display another textbox using JQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>calculator</title>
<script>
$("#calculate").click(function(){
var productName = $("#productName").val();
var quantity = $("#quantity").val();
var price = $("#price").val();
var discount = $("#discount").val();
//Calculate discount amount

var discountAmount = (price * quantity * discount) / 100;
//Calculate net amount

var netAmount = (price * quantity) - discountAmount;
//Display the results in additional textboxes

$("#discountAmount").val(discountAmount);
$("#netAmount").val(netAmount);
});
});
</script>
</head>
<body>
<h2>QUSTION:6 Create Webpage of Sales form (Using only Textboxes I.e. Product
Name, Qty, Price, Discount in %) calculate Discount Amount and
Net Amount and Display another textbox using JQuery. </h2>
<form>
<label for="productName">Product Name:</label>
<input type="text" id="productName"><br><br>
<label for="quantity">Quantity:</label>
<input type="text" id="quantity"><br><br>
<label for="price">Price:</label>
<input type="text" id="price"><br><br>
<label for="discount">Discount %:</label>
<input type="text" id="discount"><br><br>
<input type="button" value="Calculate" id="calculate">
</form>
<br><br>
<label for="discountAmount">Discount Amount:</label>
<input type="text" id="discountAmount" disabled>
<br><br>
<label for="netAmount">Net Amount:</label>
<input type="text" id="netAmount" disabled>
</body>
</html>
7. Write JQuery animationcode that display text “TEXT-GROWING” with increasing fontsize in
the interval of 1000ms, when the font size reaches 50px itdisplays “TEXT-SHRINKING”, Then
the font size decreases to 10px.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var growing = true;
var fontSize = 10;
setInterval(function(){
if(growing) {
fontSize++;
if(fontSize >= 50){
$("#text").text("TEXT-SHRINKING");
growing = false;
} else {
fontSize--;
if(fontSize <= 10){
$("#text").text("TEXT-GROWING");
growing = true;
$("#text").animate({'fontSize': fontSize + 'px'}, 1000);
}, 1000);
});
</script>
</head>
<body>
<h2>QUSTION:7 Write JQuery animationcode that display text “TEXT-GROWING”
with increasing fontsize in the interval of 1000ms, when the font
size reaches 50px itdisplays “TEXT-SHRINKING”, Then the font
size decreases to 10px.
</h2>
<div id="text">TEXT-GROWING</div>
</body>
</html>
8. Create Webpage of Employee Registration (EmpName, Email, Mobile No. and Password) and
PerformInsert, Update, DeleteOperation in Employee Table by using JQuery Manipulation
Methods.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var empName, email, mobileNo, password;
$("#insert").click(function(){
empName = $("#empName").val();
email = $("#email").val();
mobileNo = $("#mobileNo").val();
password = $("#password").val();
//append the data to the table
$("#employeeTable").append("<tr><td>"+empName+"</td><td>"+email+"</td><td>"+mobileNo
+"</td><td>"+password+"</td></tr>");
});
$("#update").click(function(){
empName = $("#empName").val();
email = $("#email").val();
mobileNo = $("#mobileNo").val();
password = $("#password").val();
//update the data of the selected row
$("#employeeTable tr").filter(":has(.selected)").find("td:first").text(empName);
$("#employeeTable tr").filter(":has(.selected)").find("td:nth-child(2)").text(email);
$("#employeeTable tr").filter(":has(.selected)").find("td:nth-child(3)").text(mobileNo);
$("#employeeTable tr").filter(":has(.selected)").find("td:nth-child(4)").text(password);
});
$("#delete").click(function(){
//delete the selected row
$("#employeeTable tr").filter(":has(.selected)").remove();
});
//adding click event on table rows
$("#employeeTable tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
});
</script>
</head>
<body>
<H2>QUSTION :8 Create Webpage of Employee Registration (EmpName, Email,
Mobile No. and Password) and PerformInsert, Update,
DeleteOperation in Employee Table by using JQuery Manipulation
Methods.
</H2>
<form>
<label for="empName">Employee Name:</label>
<input type="text" id="empName"><br><br>
<label for="email">Email:</label>
<input type="text" id="email"><br><br>
<label for="mobileNo">Mobile Number:</label>
<input type="text" id="mobileNo"><br><br>
<label for="password">Password:</label>
<input type="password" id="password"><br><br>

<input type="button" value="Insert" id="insert">
<input type="button" value="Update" id="update">
<input type="button" value="Delete" id="delete">
</form>
<table border="1" id="employeeTable">
<tr>
</body>
</html>
9. Create webpage with following property by using jQuery. a. Webpage contains a student
table of Zebra Stripes (black and white) effect when insert new records. b. Display total
number of rows and columns in a table after insert records in a table.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var name, age, gender;
$("#insertRecord").click(function(){
name = $("#name").val();
age = $("#age").val();
gender = $("#gender").val();
//append the data to the table
$("#studentTable
tbody").append("<tr><td>"+name+"</td><td>"+age+"</td><td>"+gender+"</td></tr>");
//zebra stripe effect
$("#studentTable tbody tr:even").addClass("zebraStripe");
$("#studentTable tbody tr:odd").removeClass("zebraStripe");
//display total number of rows
$("#totalRows").text($("#studentTable tbody tr").length);
//display total number of columns
$("#totalCols").text($("#studentTable tbody tr:first td").length);
});
});
</script>
</head>
<body>
<h2>QUSTION:9 Create webpage with following property by using jQuery.
a. Webpage contains a student table of Zebra Stripes (black
and white) effect when insert new records.
b. Display total number of rows and columns in a table after
insert records in a table.
</h2>
<table id="studentTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<label for="name">Name:</label>
<input type="text" id="name"><br><br>
<label for="age">Age:</label>
<input type="text" id="age"><br><br>
<label for="gender">Gender:</label>
<input type="text" id="gender"><br><br>
<input type="button" value="Insert Record" id="insertRecord">
<br><br>
Total Rows: <span id="totalRows"></span>
<br>
Total Columns: <span id="totalCols"></span>
</body>
</html>
10. Create webpage that contains a paragraphand perform following operations by using
jQuery. a. Count total Number of words in the paragraph. b. Count total Number of spacesin
the paragraph. c. Count total Number vowels in the paragraph d. Print web page using
jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>prg10</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<p id="paragraph">my name is harshit lathiya </p>
<button id="count-btn">Count</button>
<div id="result"></div>
</body>
<script>
$("#count-btn").click(function(){
var paragraph = $("#paragraph").text();
var wordCount = paragraph.split(" ").length;
var spaceCount = (paragraph.split(" ").length - 1);
var vowelCount = paragraph.replace(/[^aeiou]/gi, '').length;
$("#result").html("Word count: " + wordCount + "<br>Space count: " + spaceCount +
"<br>Vowel count: " + vowelCount);
});
});
</script>
</html>
11. Create Image Slider by using CSS and JQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
$(document).ready(function () {
var current = 0;
var total = $("#slider ul li").length;
var width = $("#slider ul li").width();
$("#next").click(function () {
current++;
if (current == total) {
current = 0;
}
$("#slider ul").animate({ left: -current * width });
});
$("#prev").click(function () {
current--;
if (current < 0) {
current = total - 1;
}
$("#slider ul").animate({ left: -current * width });
});
});
</script>
<style>
#slider {
width: 800px;
height: 600px;
overflow: hidden;
position: relative;
#slider ul {
width: 2400px;
height: 600px;
position: absolute;
left: 0;
top: 0;
#slider ul li {
float: left;
width: 800px;
height: 600px;
#prev,
#next {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
#prev {
left: 0;
#next {
right: 0;
</style>
</head>
<body>
<H2>QUSTION:11 Create Image Slider by using CSS and JQuery.</H2>
<div id="slider">
<ul>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:
ANd9GcQnnu6obVk9X7KpF7ddIVK0Xukk7GK5uWC1GA&usqp=CAU"></li>
ANd9GcRsxkI07nHexe_9vS8jw7OKUzSFQzTuZv77VA&usqp=CAU"></li>
ANd9GcSZJtCzjxCbu5Nby0eDzsKMKgy-4Zr8tS0oWA&usqp=CAU"></li>
</ul>
<div id="prev">prev</div>
<div id="next">next</div>
</div>
</body>
</html>
12. Design GoogleLogin form with JQuery validation.
<html>
<head>
<title>Login Form Using jQuery - Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<form id="google-form">
<input type="email" id="email" name="email" required>
<span class="error" id="email-error"></span>
<br>
<input type="password" id="password" name="password" required>
<span class="error" id="password-error"></span>
<br>
<button type="submit">Sign in</button>
</form>
</body>
<script>
$("#google-form").submit(function(event){
event.preventDefault();
var email = $("#email").val();
var password = $("#password").val();
var emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var isValid = true;

if(email == ""){
$("#email-error").text("Email is required.");
isValid = false;
}else if(!emailRegex.test(email)){
$("#email-error").text("Invalid email format.");
isValid = false;
}else{
$("#email-error").text("");
if(password == ""){
$("#password-error").text("Password is required.");
isValid = false;
}else{
$("#password-error").text("");
if(isValid){
alert("Form is valid and ready for submission");
});
});
</script>
</html>
13. Design Google Sign Up Page with fields (FirstName, LastName, Email, MobileNo, Password,
Birthdate, Country, Gender)and perform validation by JQuery. a. Password (Password must
be Strong Password i.e. password contains at least one Uppercase Character and One Digit)
<!DOCTYPE html>
<html lang="en">
<head>
<script>$(document).ready(function() {
$("#signupForm").submit(function(event) {
event.preventDefault();
var password = $("#password").val();
if (!isValidPassword(password)) {
alert("Password must contain at least one uppercase character and one digit");
} else {
//submit the form
}
});
});
function isValidPassword(password) {
var hasUpper = /[A-Z]/.test(password);
var hasDigit = /\d/.test(password);
return hasUpper && hasDigit;
}
</script>
</head>
<body>
<form id="signupForm">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>
<br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required>
<br>
<input type="email" id="email" name="email" required>
<br>
<label for="mobileNo">Mobile No:</label>
<input type="text" id="mobileNo" name="mobileNo" required>
<br>
<input type="password" id="password" name="password" required>
<br>
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
<br>
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="">Select Country</option>
<option value="">usa</option>
</select>
<br>
<label for="gender">Gender:</label>
<input type="radio" id="gender" name="gender" value="male" required> Male
<input type="radio" id="gender" name="gender" value="female" required> Female
<br><br>
<input type="submit" value="Sign Up">
</form>
</body>
</html>

TISHA

Uploaded by

Document Information

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

TISHA

Uploaded by

Copyright:

Available Formats

TISHA WEB DESIGNING - 2 S.Y.B.C.A.

NAME – GABANI TISHA

SUBJECT – WEB DESIGNING - 2

1. Design an XML document to store information about a student of an engineering college,

operand1 = operand2 = operator = "";

//Calculate discount amount

//Calculate net amount

//Display the results in additional textboxes

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

var growing = true;

var fontSize = 10;

if(fontSize >= 50){

if(fontSize <= 10){

$("#text").animate({'fontSize': fontSize + 'px'}, 1000);

<h2>QUSTION:7 Write JQuery animationcode that display text “TEXT-GROWING”

with increasing fontsize in the interval of 1000ms, when the font

size reaches 50px itdisplays “TEXT-SHRINKING”, Then the font

size decreases to 10px.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

var empName, email, mobileNo, password;

//append the data to the table

//update the data of the selected row

//delete the selected row

//adding click event on table rows

<H2>QUSTION :8 Create Webpage of Employee Registration (EmpName, Email,

Mobile No. and Password) and PerformInsert, Update,

DeleteOperation in Employee Table by using JQuery Manipulation

<label for="empName">Employee Name:</label>

<input type="text" id="empName"><br><br>

<input type="text" id="email"><br><br>

<label for="mobileNo">Mobile Number:</label>

<input type="text" id="mobileNo"><br><br>

<input type="password" id="password"><br><br>

<input type="button" value="Insert" id="insert">

<input type="button" value="Update" id="update">

<input type="button" value="Delete" id="delete">

<table border="1" id="employeeTable">

11. Create Image Slider by using CSS and JQuery.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

var total = $("#slider ul li").length;

var width = $("#slider ul li").width();

$("#slider ul").animate({ left: -current * width });

<H2>QUSTION:11 Create Image Slider by using CSS and JQuery.</H2>

12. Design GoogleLogin form with JQuery validation.

<title>Login Form Using jQuery - Demo Preview</title>

<meta name="robots" content="noindex, nofollow">

<script type="text/javascript" src="login.js"></script>

<input type="email" id="email" name="email" required>

<span class="error" id="email-error"></span>

<input type="password" id="password" name="password" required>

<span class="error" id="password-error"></span>

<button type="submit">Sign in</button>

var email = $("#email").val();

var password = $("#password").val();

var emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

var isValid = true;

$("#email-error").text("Invalid email format.");

alert("Form is valid and ready for submission");

You might also like