Employee Management System

This project demonstrates vanilla JavaScript concepts including DOM manipulation, dynamic table generation, form handling and validation, event listeners, array operations, and CRUD functionality without any frameworks or libraries.

Overview

This project is a web-based Employee Management application that allows users to view, add, and delete employee records through an interactive interface. The application uses pure JavaScript for all functionality, demonstrating core web development concepts with dynamic content rendering.

Technologies Used

• HTML5
• CSS3
• Vanilla JavaScript (ES5)

What I Implemented

Data Management

• Multi-dimensional array storing employee information (name, title, extension)
• Pre-populated with 5 sample employees for immediate viewing
• Real-time employee count display that updates on add/delete operations

Dynamic Table Generation

• generateEmployeeTable(): Dynamically builds the employee table from the data array on page load
• insertRow/insertCell: Uses DOM methods to create table structure programmatically
• Alternating row colors: CSS nth-child selectors for striped table styling

Form Handling & Validation

• Custom validation: JavaScript-based validation (no HTML5 required attribute)
• Error messages: Red error text displayed next to empty fields
• clearForm(): Resets input fields after successful submission
• clearAlerts(): Clears error messages when validation passes

CRUD Operations

• Create: Add new employees via form input with validation
• Read: Display all employees in a formatted table
• Delete: Individual delete buttons for each employee row with deleteEmployee(x) function

Event Handling

• Window load event listener for initialization
• Click event listener on Add button
• Inline onclick handlers on dynamically created Delete buttons

DOM Manipulation Techniques

• document.getElementById() for element selection
• createElement() and appendChild() for dynamic content
• insertRow() and insertCell() for table manipulation
• Direct style manipulation via JavaScript

Learnings

• Understanding how to manipulate the DOM without relying on frameworks
• Building dynamic HTML tables programmatically using JavaScript
• Implementing custom form validation logic instead of using HTML5 attributes
• Managing application state with JavaScript arrays
• Handling events and user interactions with event listeners
• Creating and styling elements dynamically through JavaScript
• Working with multi-dimensional arrays for structured data storage

---

Course: CS 648 - Modern Web Development Frameworks
University: San Diego State University (SDSU)
Author: Merlyn Mercylona M