Submitted by : bc230207782
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Records Management</title>
<style>
body {f
font-family: Arial, sans-serif;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f4f9;
h1 {
font-size: 2.5em;
color: #333;
margin-bottom: 20px;
table {
width: 90%;
border-collapse: collapse;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
table, th, td {
border: 1px solid #ddd;
th, td {
padding: 12px;
text-align: left;
th {
background-color: #007BFF;
color: white;
.form-container {
width: 60%;
margin-bottom: 20px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 15px;
.form-container h2 {
margin-bottom: 15px;
font-size: 1.5em;
color: #007BFF;
text-align: center;
.form-container label {
display: inline-block;
width: 150px;
font-weight: bold;
margin-right: 10px;
text-align: right;
.form-container input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
.form-container button {
padding: 12px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s;
.form-container button:hover {
background-color: #218838;
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin-bottom: 20px;
transition: background-color 0.3s;
button:hover {
background-color: #0056b3;
#employeeTable {
width: 90%;
margin-top: 20px;
.form-group {
display: flex;
align-items: center;
gap: 10px;
</style>
</head>
<body>
<h1>Employee Records Management</h1>
<!-- Button to display all employees -->
<button onclick="displayEmployees()">Display All Employees</button>
<!-- Section to display employee details -->
<h2>Employee Details</h2>
<div id="employeeTable"></div>
<!-- Form to add new employee -->
<div class="form-container">
<h2>Add New Employee</h2>
<form id="addEmployeeForm">
<div class="form-group">
<label for="empID">ID:</label>
<input type="text" id="empID" placeholder="Enter ID" required>
</div>
<div class="form-group">
<label for="empName">Name:</label>
<input type="text" id="empName" placeholder="Enter Name" required>
</div>
<div class="form-group">
<label for="empDept">Department:</label>
<input type="text" id="empDept" placeholder="Enter Department" required>
</div>
<div class="form-group">
<label for="empSalary">Salary:</label>
<input type="number" id="empSalary" placeholder="Enter Salary" required>
</div>
<button type="button" onclick="addEmployee()">Add Employee</button>
</form>
</div>
<!-- Form to delete employee -->
<div class="form-container">
<h2>Delete Employee</h2>
<form id="deleteEmployeeForm">
<div class="form-group">
<label for="deleteEmpID">ID:</label>
<input type="text" id="deleteEmpID" placeholder="Enter ID to Delete" required>
</div>
<button type="button" onclick="deleteEmployee()">Delete Employee</button>
</form>
</div>
<script>
let xmlDoc;
// Load XML file dynamically
function loadXML() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "employees.xml", true);
xhr.onload = function () {
if (xhr.status === 200) {
const parser = new DOMParser();
xmlDoc = parser.parseFromString(xhr.responseText, "text/xml");
} else {
alert("Failed to load XML file");
};
xhr.send();
// Display all employees
function displayEmployees() {
const employees = xmlDoc.getElementsByTagName("Employee");
let html =
"<table><tr><th>ID</th><th>Name</th><th>Department</th><th>Salary</th></tr>";
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 dept = employees[i].getElementsByTagName("Department")[0].textContent;
const salary = employees[i].getElementsByTagName("Salary")[0].textContent;
html +=
`<tr><td>${id}</td><td>${name}</td><td>${dept}</td><td>${salary}</td></tr>`;
html += "</table>";
document.getElementById("employeeTable").innerHTML = html;
// Add a new employee
function addEmployee() {
const id = document.getElementById("empID").value;
const name = document.getElementById("empName").value;
const dept = document.getElementById("empDept").value;
const salary = document.getElementById("empSalary")
const newName = xmlDoc.createElement("Name");
const newDept = xmlDoc.createElement("Department");
const newSalary = xmlDoc.createElement("Salary");
newID.textContent = id;
newName.textContent = name;
newDept.textContent = dept;
newSalary.textContent = salary;
newEmployee.appendChild(newID);
newEmployee.appendChild(newName);
newEmployee.appendChild(newDept);
newEmployee.appendChild(newSalary);
xmlDoc.documentElement.appendChild(newEmployee);
alert("Employee added successfully!");
displayEmployees();
document.getElementById("addEmployeeForm").reset();
// Delete an employee
function deleteEmployee() {
const idToDelete = document.getElementById("deleteEmpID").value;
const employees = xmlDoc.getElementsByTagName("Employee");
for (let i = 0; i < employees.length; i++) {
const id = employees[i].getElementsByTagName("ID")[0].textContent;
if (id === idToDelete) {
xmlDoc.documentElement.removeChild(employees[i]);
alert("Employee deleted successfully!");
displayEmployees();
document.getElementById("deleteEmployeeForm").reset();
return;
alert("Employee not found!");
window.onload = loadXML;
</script>
</body>
</html>
Employees.xml
<!-- employees.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Employees>
<Employee>
<ID>01</ID>
<Name>Aatif ali</Name>
<Department>CS</Department>
<Salary> 204000</Salary>
</Employee>
<Employee>
<br>
<ID>02</ID>
<Name>A.Malik</Name>
<Department>IT</Department>
<Salary>5000</Salary>
</Employee>
<Employee>
<br>
<ID>03</ID>
<Name>Noor ahmed</Name>
<Department>IT department</Department>
<Salary>9000000</Salary>
</Employee>
</Employees>
