Employee List

Employee ID Name Email Phone Position Address Actions

Employee Form

"> Employee Management

Employee List

Employee ID Name Email Phone Position Address Actions

Employee Form

"> Employee Management

Employee List

Employee ID Name Email Phone Position Address Actions

Employee Form

"> 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee Management</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="employee-list">
            <h2>Employee List</h2>
            <table id="employeeTable">
                <thead>
                    <tr>
                        <th>Employee ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Position</th>
                        <th>Address</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <div class="employee-form">
            <h2>Employee Form</h2>
            <form id="employeeForm" onsubmit="onSubmitForm(event)">
                <label>Name</label>
                <input type="text" id="name" placeholder="Enter employee name" required minlength="3" />

                <label>Email</label>
                <input type="email" id="email" placeholder="example@gmail.com" required />

                <label>Phone</label>
                <input type="text" id="phone" placeholder="10-digit number" required pattern="[0-9]{10}" />

                <label>Position</label>
                <input type="text" id="position" placeholder="Enter position" required minlength="3">

                <label>Address</label>
                <input type="text" id="address" placeholder="Enter address" required minlength="3">

                <button type="submit" id="submitBtn">Add Employee</button>
            </form>
        </div>
    </div>
    <script src="script.js"></script>

</body>

</html>

body{
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px;
    background-color: #f5f7fa;
}

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.employee-list{
    flex: 3;
    min-width: 350px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.employee-form {
    flex: 1;
    min-width: 200px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
}

th {
    background-color: #2c3e50;
    color: #fff;
}

.edit-btn {
    background: #3498db;
    color: #fff;
    border: none;
    padding: 5px 10px;
    margin-right: 5px;
    border-radius: 3px;
}

.delete-btn {
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
}

form label {
    display: block;
    margin-top: 10px;
    color: #555;
}

form input {
    width: 100%;
    padding: 8px 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

form button {
    margin-top: 15px;
    width: 100%;
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background: #219150;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

let employees = JSON.parse(localStorage.getItem('employees')) || [];
let editIndex = -1;

function onSubmitForm(event) {
    event.preventDefault();
    processEmployeeForm();
}

function processEmployeeForm() {
    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const position = document.getElementById('position').value.trim();
    const address = document.getElementById('address').value.trim();

    if ( !name || !email || !phone || !position || !address){
        alert('please fill in all fields');
        return;
    }

    if (editIndex === -1) {
        const employee = {
            id: generateEmployeeId(),
            name,
            email,
            phone,
            position,
            address
        };
        employees.push(employee)
    } else{
        employees[editIndex].name = name;
        employees[editIndex].email = email;
        employees[editIndex].phone = phone;
        employees[editIndex].position = position;
        employees[editIndex].address = address;
        editIndex = -1;
        document.getElementById('submitBtn').innerText = "Add Employee";
    }

    saveToLocalStorage();
    document.getElementById('employeeForm').reset();
    renderEmployees();
}

function renderEmployees() {
    const tbody = document.querySelector('#employeeTable tbody');
    tbody.innerHTML = '';

    employees.forEach((emp, index) => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
        <td>${emp.id}</td>
        <td>${emp.name}</td>
        <td>${emp.email}</td>
        <td>${emp.phone}</td>
        <td>${emp.position}</td>
        <td>${emp.address}</td>
        <td>
        <button class='edit-btn' onclick="editEmployee(${index})">Edit</button>
        <button class='delete-btn' onclick="deleteEmployee(${index})">Delete</button>
        </td>
        `;
        tbody.appendChild(tr);
    });
} 

function generateEmployeeId(){
    return employees.length ? employees[employees.length - 1].id + 1 : 1;
}

function editEmployee(index) {
    const emp = employees[index];
    document.getElementById('name').value = emp.name;
    document.getElementById('email').value = emp.email;
    document.getElementById('phone').value = emp.phone;
    document.getElementById('position').value = emp.position;
    document.getElementById('address').value = emp.address;
    editIndex = index;
    document.getElementById('submitBtn').innerText = 'Update Employee';
}

function deleteEmployee(index) {
    if (confirm('Are you sure you want to delete this employee?')) {
        employees.splice(index, 1);
        saveToLocalStorage();
        renderEmployees();
    }
}

function saveToLocalStorage() {
    localStorage.setItem('employees', JSON.stringify(employees));
}

document.addEventListener('DOMContentLoaded', () => {
    renderEmployees();
});