Scribd
Upload
3 views

Assignment 2

The document contains an HTML file for an Employee Records Management system, featuring a user interface to display, add, and delete employee records. It includes a form for adding new employees and another for deleting existing ones, with the data being loaded from an XML file. The XML file lists employees with their IDs, names, departments, and salaries.

Uploaded by

aa2201802
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Assignment 2

The document contains an HTML file for an Employee Records Management system, featuring a user interface to display, add, and delete employee records. It includes a form for adding new employees and another for deleting existing ones, with the data being loaded from an XML file. The XML file lists employees with their IDs, names, departments, and salaries.

Uploaded by

aa2201802
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

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>

You might also like