Scribd
Upload
4 views

Cs311 Assignment solution 2 by Lost

Uploaded by

Umair Ulfat
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
4 views

Cs311 Assignment solution 2 by Lost

Uploaded by

Umair Ulfat
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/ 6

Cs311 Assignment No: 2

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/[email protected]/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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>

</body>
</html>

You might also like