Skip to content

[EmperorAlii] Add 006-employee-table #333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EmperorAlii wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[EmperorAlii] Add 006-employee-table #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c2efd3
[EmperorAlii] Initial Commit for 006-employee-table
EmperorAlii Nov 11, 2025
ee18c52
[EmperorAlii] complete 006-employee-table
EmperorAlii Nov 11, 2025
e93ccf7
[EmperorAlii] Fix Settings.json issue
EmperorAlii Dec 20, 2025
f507d59
Fix issues
EmperorAlii Dec 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions 006-employee-table/EmperorAlii/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Employee Data</title>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>

<body class="bg-gray-100 p-8">
<div class="container mx-auto">
<h1 class="text-4xl font-bold mb-8 text-center">Employee Data</h1>
<table
class="table-auto w-full bg-white shadow-md rounded-lg border-2 border-collapse"
>
<thead>
<tr class="bg-gray-200 text-left">
<th class="px-4 py-2">ID</th>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Position</th>
<th class="px-4 py-2">Department</th>
</tr>
</thead>
<tbody id="employeeTableBody">
<!-- Employee data will be inserted here by JavaScript -->
</tbody>
</table>
</div>

<script src="script.js"></script>
</body>
</html>
65 changes: 65 additions & 0 deletions 006-employee-table/EmperorAlii/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
// Employee data list
const employeeList = [
{
id: 1,
name: 'Ali Imam',
position: 'Software Engineer',
department: 'Development',
},
{
id: 2,
name: 'Nazmul Huda',
position: 'Product Manager',
department: 'Product',
},
{
id: 3,
name: 'Sara Khan',
position: 'UX Designer',
department: 'Design',
},
{
id: 4,
name: 'Alif Rahman',
position: 'QA Engineer',
department: 'Quality Assurance',
},
];

//get the table body element and give a bg-color
const employeeTableBody = document.getElementById('employeeTableBody');
employeeTableBody.classList.add('bg-gray-100');

//Function to generate employee table
function createEmployeeTable() {
//iterating through the employeeList Array
employeeList.forEach((employee) => {
//destructuring the employee object and creating table row
const { id, name, position, department } = employee;
const tableRow = document.createElement('tr');

//Creating table data cells and adding styles
const cells = [id, name, position, department].map((text) => {
//Creating table data cell
const employeeCellData = document.createElement('td');
employeeCellData.innerText = text;

//Adding Tailwind CSS classes for styling
employeeCellData.classList.add(
'border',
'border-gray-200',
'px-4',
'py-2'
);
return employeeCellData;
});

//Appending cells to the row and row to the table body
tableRow.append(...cells);
tableRow.classList.add('hover:bg-blue-200');
employeeTableBody.appendChild(tableRow);
});
}

//Calling the function to create the table
createEmployeeTable();