Scribd
Upload
35 views11 pages

WT Assign1

Uploaded by

vidyush.2125cse1046
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views11 pages

WT Assign1

Uploaded by

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

Vidyush Singh

2100290100185
WT Assignment 1

Sol1:
<!DOCTYPE html>
<html>
<head>
<title>Frames Example</title>
</head>
<frameset cols="30%,*">
<frame name="linksFrame" src="links.html">
<frame name="contentFrame" src="default_content.html">
</frameset>
<noframes>
<body>
<p>This page requires frames, but your browser does not support them.</p>
</body>
</noframes>
</html>

Links.html
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<ul>
<li><a href="content1.html" target="contentFrame">Link 1</a></li>
<li><a href="content2.html" target="contentFrame">Link 2</a></li>
<li><a href="content3.html" target="contentFrame">Link 3</a></li>
</ul>
</body>
</html>

Content1.html
<!DOCTYPE html>
<html>
<head>
<title>Content 1</title>
</head>
<body>
<h1>Content 1</h1>
<p>This is the content for Link 1.</p>
</body>
</html>

Sol2:
<!DOCTYPE html>
<html>
<head>
<title>Time Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
/* Highlight lab hours with a different color */
.lab {
background-color: #ff9999; /* light red */
}
/* Highlight elective hours with a different color */
.elective {
background-color: #99ff99; /* light green */
}
</style>
</head>
<body>
<h2>Class Time Table</h2>
<table>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>8:00 - 9:00</td>
<td class="lab">Lab</td>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
<td>English</td>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td>History</td>
<td class="elective">Elective</td>
<td>Physics</td>
<td>Lab</td>
<td>Math</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>Math</td>
<td>Chemistry</td>
<td>Elective</td>
<td>English</td>
<td>Lab</td>
</tr>
<!-- Add more rows for other hours if needed -->
</table>
</body>
</html>

Sol3:
XML code:
<?xml version="1.0" encoding="UTF-8"?>
<employees>
<employee>
<employeeId>E001</employeeId>
<name>John Doe</name>
<department>Engineering</department>
<position>Software Engineer</position>
<salary>50000</salary>
</employee>
<employee>
<employeeId>E002</employeeId>
<name>Jane Smith</name>
<department>Marketing</department>
<position>Marketing Manager</position>
<salary>60000</salary>
</employee>
<!-- Add more employee details as needed -->
</employees>

HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Employee Details</title>
<script>
function getEmployeeDetails() {
var employeeId = document.getElementById("employeeId").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
var employees = xmlDoc.getElementsByTagName("employee");
for (var i = 0; i < employees.length; i++) {
var id = employees[i].getElementsByTagName("employeeId")
[0].childNodes[0].nodeValue;
if (id === employeeId) {
var name = employees[i].getElementsByTagName("name")
[0].childNodes[0].nodeValue;
var department = employees[i].getElementsByTagName("department")
[0].childNodes[0].nodeValue;
var position = employees[i].getElementsByTagName("position")
[0].childNodes[0].nodeValue;
var salary = employees[i].getElementsByTagName("salary")
[0].childNodes[0].nodeValue;
document.getElementById("result").innerHTML = "Name: " + name +
"<br>Department: " + department + "<br>Position: " + position + "<br>Salary: " + salary;
return;
}
}
// If employee ID not found
document.getElementById("result").innerHTML = "Employee ID not found";
}
};
xhttp.open("GET", "employees.xml", true);
xhttp.send();
}
</script>
</head>
<body>
<h2>Employee Details</h2>
<label for="employeeId">Enter Employee ID:</label>
<input type="text" id="employeeId">
<button onclick="getEmployeeDetails()">Get Details</button>
<div id="result"></div>
</body>
</html>

Sol4:
CSS (Cascading Style Sheets) is a styling language used to describe the presentation of a
document written in markup language like HTML. It allows developers to control the layout,
appearance, and behavior of HTML elements on web pages. CSS enables separation of
content from presentation, making it easier to manage and style web pages consistently across
different devices and platforms.
CSS frameworks, on the other hand, are pre-written sets of CSS styles and sometimes
JavaScript components that provide a standardized, grid-based layout system along with UI
components like buttons, forms, and navigation menus. CSS frameworks help developers
build websites more efficiently by providing reusable components and consistent styling.

Different ways of using the stylesheet:

 Embedded CSS
 External CSS
 Inline CSS

Sol5:
DHTML (Dynamic HTML) is a combination of HTML, CSS, and JavaScript that allows web
pages to be more interactive and dynamic. It enables developers to manipulate the content
and presentation of web pages dynamically without needing to reload the entire page.
DHTML techniques include DOM manipulation, CSS styling, and event handling to create
effects such as animations, interactive forms, and dynamic content updates.
AJAX (Asynchronous JavaScript and XML) is a set of web development techniques used to
create asynchronous web applications. It allows web pages to send and receive data from a
server asynchronously without interfering with the display and behavior of the existing page.
AJAX uses JavaScript and the XMLHttpRequest object to make requests to the server and
process the responses dynamically, enabling more responsive and interactive user
experiences.

Sol6:
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var mobileNumber = document.getElementById("mobileNumber").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var date = new Date(document.getElementById("date").value);
var currentDate = new Date();

// Checking all input fields for non-empty


if (firstName === "" || lastName === "" || mobileNumber === "" || email === "" ||
password === "" || date === "") {
alert("All fields are required");
return false;
}

// Length of first name and last name must be less than 20 characters
if (firstName.length >= 20 || lastName.length >= 20) {
alert("First name and last name must be less than 20 characters");
return false;
}

// Mobile number should be number and 10 digits length


if (isNaN(mobileNumber) || mobileNumber.length !== 10) {
alert("Mobile number should be numeric and 10 digits length");
return false;
}

// Email Validation
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert("Invalid email address");
return false;
}

// Password Validation: At least 8 characters, at least one uppercase letter, one


lowercase letter, and one number
var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
if (!passwordRegex.test(password)) {
alert("Password must be at least 8 characters long and contain at least one
uppercase letter, one lowercase letter, and one number");
return false;
}

// Date validation (Not equal to current date)


if (date.getTime() === currentDate.getTime()) {
alert("Date must not be equal to current date");
return false;
}

return true;
}
</script>
</head>
<body>
<h2>Form Validation</h2>
<form onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName"><br>

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" name="lastName"><br>

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


<input type="text" id="mobileNumber" name="mobileNumber"><br>

<label for="email">Email:</label>
<input type="text" id="email" name="email"><br>

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

<label for="date">Date:</label>
<input type="date" id="date" name="date"><br>

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


</form>
</body>
</html>

You might also like