Web Assisment-7

Problem Statement
Assignment: Arrays, Objects, Basic DOM Manipulation, and Higher-Order Functions at LaunchDarkly
Scenario: You’ve been tasked with implementing a dynamic feature for the LaunchDarkly employee
portal. You need to create a system that displays employee data using arrays and objects,
dynamically updates the DOM with JavaScript, and performs some tasks using higher-order functions
to filter, sort, and map the employee data. Assignment Tasks: Create and Display Employee Data
(Arrays and Objects): Define an array of objects, each representing an employee with the following
details: id (unique identifier) name position department isActive (a boolean indicating whether the
employee is currently active) Create an HTML structure to display the employee data dynamically.
For each employee object in the array, create a div element that contains the employee’s name,
position, and department. Additionally, display whether the employee is active or inactive. Use
JavaScript to loop through the employee array and create HTML elements for each employee,
appending them to the employee-list div. Use the filter() higher-order function to display only active
employees. Modify the employee list to only show those employees who have the isActive property
set to true. Use the sort() higher-order function to sort the employees by their names in alphabetical
order. After sorting, display the employee list sorted by name. Use the map() function to create a
new array of employee names and display it in the console. Add a button next to each employee’s
status that allows the user to toggle their active/inactive status. When the button is clicked, the
employee’s isActive property should be toggled, and the status should be updated in the DOM.
Display Employee Information on the Web Page (Basic DOM Manipulation): Filter Active Employees
(Higher-Order Functions - filter): Sort Employees by Name (Higher-Order Functions - sort): Map
Employee Names to a New Array (Higher-Order Functions - map): Bonus: Update Employee Status
(Basic DOM Manipulation with Events): Submission: Submit the following files: index.html (with the
structure for displaying employee data and buttons) employees.js (containing JavaScript for
managing employee data and handling events) A brief README.md file that includes: A short
explanation of how arrays and objects were used to store and manipulate employee data. How
higher-order functions such as filter(), sort(), and map() were applied to handle employee data. A
description of the event listener used to update employee status. Any challenges you faced and how
you overcame them. This assignment will help you practice arrays, objects, basic DOM manipulation,
and higher-order functions in JavaScript, providing a hands-on way to manage and display dynamic
data in web applications.

Approach
Step 1: Define Employee Data

1. Create an array of objects where each object represents an employee.

2. Each employee object should have the following properties:

o id: A unique identifier.

o name: Employee's name.

o position: Employee's position.

o department: Employee's department.

 o isActive: A boolean indicating if the employee is currently active.

Step 2: Set Up HTML Structure

1. Create a div with the id employee-list to contain the employee information.

2. Design the structure within the employee-list to dynamically append child elements.

Step 3: Display Employee Data Dynamically

1. Use JavaScript to select the employee-list div.

2. Loop through the employee array.

3. For each employee, create a div element.

4. Within each div, include:

o Employee’s name

o Employee’s position

o Employee’s department

o Status (active/inactive)

5. Append each employee's div to the employee-list.

Step 4: Filter Active Employees

1. Use the filter() higher-order function to create a new array containing only active employees.

2. Loop through the filtered array to display only active employees in the employee-list.

Step 5: Sort Employees by Name

1. Use the sort() higher-order function to sort the employee array alphabetically by the name
property.

2. After sorting the array, loop through the sorted array to update the display in the employee-
list.

Step 6: Map Employee Names

1. Use the map() higher-order function to create a new array that contains only the names of
the employees.

2. Display the newly created array of names in the console.

Step 7: Create Toggle Status Button

1. For each employee's div in the employee-list, add a button next to their status.

2. Add an event listener to each button:

o When the button is clicked, toggle the isActive status of the corresponding
employee.

o Update the DOM to reflect the new status.

Step 8: Submission

1. Create index.html:

o Include the div structure for displaying employee data.

o Include all buttons for toggling status.

2. Create employees.js:

o Contain JavaScript for defining the employee data, displaying the data, filtering,
sorting, mapping, and handling events.

3. Write README.md:

o Explain how the arrays and objects were used to store and manipulate employee
data.

o Describe how higher-order functions were applied in handling employee data.

o Detail the event listener used for updating employee status.

o Discuss any challenges faced and how they were overcome.

By following these steps, you should effectively manage and display dynamic employee data on a
web page, applying your knowledge of arrays, objects, higher-order functions, and event handling in
JavaScript. This structured approach ensures clarity and efficiency in solving the problem.

Code
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 Portal</title>

<link rel="stylesheet" href="stylees.css">

</head>

<body>

<h1>Employee Management System</h1><br>

<div id="employee-list"></div>
 <button id="filterActiveEmployees">Show Active Employees</button>

<button id="sortEmployeesByName">Sort by Name</button>

<button id="show-all">Show All</button>

<script src="employee.js"></script>

</body>

</html>

Styles.css
body, h1, button {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

body {

background-color: #9c9ccd;

color: #010101;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 100vh;

padding: 20px;

h1 {

color: #ffffff;

margin-bottom: 20px;

font-size: 2rem;

text-align: center;
}

#employee-list {

width: 100%;

max-width: 600px;

background: #cbc9c9;

border: 1px solid #ddd;

border-radius: 8px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

margin-bottom: 20px;

button {

background-color: #8989cc;

color: white;

border: none;

padding: 5px;

font-size: 1rem;

border-radius: 5px;

cursor: pointer;

margin: 8px;

transition: background-color 0.3s;

button:hover {

background-color: #5252cc;

button:focus {

outline: none;
employee.js
const employees = [

{ id: 1, name: 'John Doe', position: 'Developer', department: 'Tech', isActive: true },

{ id: 2, name: 'Jane Smith', position: 'Designer', department: 'Design', isActive: false },

{ id: 3, name: 'Sam Green', position: 'Manager', department: 'Sales', isActive: true },

];

const employeeList = document.getElementById('employee-list');

const filterActiveButton = document.getElementById('filterActiveEmployees');

const sortByNameButton = document.getElementById('sortEmployeesByName');

const showAllButton = document.getElementById('show-all');

function displayEmployees(employeeArray) {

employeeList.innerHTML = '';

employeeArray.forEach(employee => {

const employeeDiv = document.createElement('div');

employeeDiv.className = `employee ${employee.isActive ? 'active' : 'inactive'}`;

employeeDiv.innerHTML = `

<p>Name: ${employee.name}</p>

<p>Position: ${employee.position}</p>

<p>Department: ${employee.department}</p>

<p>Status: ${employee.isActive ? 'Active' : 'Inactive'}</p>

<button onclick="toggleStatus(${employee.id})">Toggle Status</button>

`;

employeeList.appendChild(employeeDiv);

});
}

function toggleStatus(employeeId) {

const employee = employees.find(emp => emp.id === employeeId);

if (employee) {

employee.isActive = !employee.isActive;

displayEmployees(employees);

function filterActiveEmployees() {

const activeEmployees = employees.filter(employee => employee.isActive);

displayEmployees(activeEmployees);

function sortEmployeesByName() {

const sortedEmployees = [...employees].sort((a, b) => a.name.localeCompare(b.name));

displayEmployees(sortedEmployees);

filterActiveButton.addEventListener('click', filterActiveEmployees);

sortByNameButton.addEventListener('click', sortEmployeesByName);

showAllButton.addEventListener('click', () => displayEmployees(employees));

displayEmployees(employees);
Output