Scribd
Upload
12 views5 pages

Fall 2024 - CS311 - 2 - BC230206139

Uploaded by

seharbutt804
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
12 views5 pages

Fall 2024 - CS311 - 2 - BC230206139

Uploaded by

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

Assignment # 02 Solution

CS311- Introduction to Web Services


VUID: BC230206139

Index.html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Managment System</title>

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrp@5.3.0/dist/css/bootstrap.min.css">
<style>
body {
padding: 20px;
background-color: #f8f9fa;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>

</head>
<body>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Management System</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
padding: 20px;
background-color: #f8f9fa;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>

<div class="container">
<h1 class="text-center mb-4">Employee Management System</h1>

<div class="mb-4">
<button class="btn btn-primary" onclick="displayEmployees()">Display All
Employees</button>
</div>
<div id="employeeDetails" class="mb-4"></div>

<h3>Add New Employee</h3>


<form id="addEmployeeForm" onsubmit="addEmployee(event)">
<div class="mb-3">
<label for="id" class="form-label">Employee ID</label>
<input type="text" id="id" class="form-control" required>
</div>

<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" class="form-control" required>
</div>

<div class="mb-3">
<label for="department" class="form-label">Department</label>
<input type="text" id="department" class="form-control" required>
</div>
<div class="mb-3">
<label for="salary" class="form-label">Salary</label>
<input type="number" id="salary" class="form-control" required>
</div>

<button type="submit" class="btn btn-success">Add Employee</button>


</form>
<h3 class="mt-4">Delete Employee</h3>
<form id="deleteEmployeeForm" onsubmit="deleteEmployee(event)">
<div class="mb-3">
<label for="deleteId" class="form-label">Employee ID</label>
<input type="text" id="deleteId" class="form-control" required>
</div>

<button type="submit" class="btn btn-danger">Delete Employee</button>


</form>
</div>

<script>
let xmlDoc;

fetch('employees.xml')
.then(response => response.text())
.then(data => {
const parser = new DOMParser();
xmlDoc = parser.parseFromString(data, "text/xml");
})
.catch(error => console.error('Error loading XML:', error));
function displayEmployees() {
const employees = xmlDoc.getElementsByTagName("Employee");
let output = "<table class='table
table-bordered'><thead><tr><th>ID</th><th>Name</th><th>Department</
th><th>Salary</th></tr></thead><tbody>";

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


const id = employees[i].getElementsByTagName("ID")[0].textContent;
const name = employees[i].getElementsByTagName("Name")[0].textContent;
const department = employees[i].getElementsByTagName("Department")
[0].textContent;
const salary = employees[i].getElementsByTagName("Salary")[0].textContent;

output += <tr><td>${id}</td><td>${name}</td><td>${department}</td><td>$
{salary}</td></tr>;
}

output += "</tbody></table>";
document.getElementById("employeeDetails").innerHTML = output;
}

function addEmployee(event) {
event.preventDefault();

const id = document.getElementById("id").value;
const name = document.getElementById("name").value;
const department = document.getElementById("department").value;
const salary = document.getElementById("salary").value;
const newEmployee = xmlDoc.createElement("Employee");
const newId = xmlDoc.createElement("ID");
newId.textContent = id;
const newName = xmlDoc.createElement("Name");
newName.textContent = name;
const newDepartment = xmlDoc.createElement("Department");
newDepartment.textContent = department;
const newSalary = xmlDoc.createElement("Salary");
newSalary.textContent = salary;

newEmployee.appendChild(newId);
newEmployee.appendChild(newName);
newEmployee.appendChild(newDepartment);
newEmployee.appendChild(newSalary);

xmlDoc.getElementsByTagName("Employees")[0].appendChild(newEmployee);

alert("Employee added successfully!");


document.getElementById("addEmployeeForm").reset();
}

function deleteEmployee(event) {
event.preventDefault();

const id = document.getElementById("deleteId").value;
const employees = xmlDoc.getElementsByTagName("Employee");

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


const employeeId = employees[i].getElementsByTagName("ID")[0].textContent;
if (employeeId === id) {
employees[i].parentNode.removeChild(employees[i]);
alert("Employee deleted successfully!");
document.getElementById("deleteEmployeeForm").reset();
return;
}
}
alert("Employee with the given ID not found!");
}
</script>

<!-- Bootstrap JS -->


<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></
script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy