Manage Developer Profiles (js/profiles.js)

Goal

You’re building the main logic for handling developer profiles — CRUD (Create, Read, Update, Delete) operations — and rendering them dynamically into the UI grid.

This file powers the “Add Profile” modal and everything inside the .profiles-grid section.

File Ownership

You fully own:

/js/profiles.js

You are responsible for all logic related to:

Adding new profiles

Editing existing profiles

Deleting profiles

Rendering the updated UI

🧠 Learning Focus

DOM manipulation

Event delegation

Data-driven rendering

Modular JS exports/imports

Array methods (map, filter, findIndex)

🔧 Functions to Implement
1. addProfile(profileData)

Adds a new profile to the in-memory array and re-renders.

export function addProfile(profileData, profiles) {
const newProfile = {
id: Date.now(),
...profileData,
skills: profileData.skills.split(',').map(s => s.trim()).filter(Boolean),
};
profiles.push(newProfile);
renderProfiles(profiles);
return profiles;
}

2. editProfile(id, updatedData)

Finds the profile by id and updates its fields.

export function editProfile(id, updatedData, profiles) {
const index = profiles.findIndex(p => p.id === id);
if (index !== -1) {
profiles[index] = {
...profiles[index],
...updatedData,
skills: updatedData.skills.split(',').map(s => s.trim()).filter(Boolean),
};
}
renderProfiles(profiles);
return profiles;
}

3. deleteProfile(id)

Removes a profile after confirmation.

export function deleteProfile(id, profiles) {
if (!confirm("Are you sure you want to delete this profile?")) return profiles;
const updated = profiles.filter(p => p.id !== id);
renderProfiles(updated);
return updated;
}

4. renderProfiles(profiles)

Takes an array of profiles and injects HTML into #profilesGrid.

export function renderProfiles(profiles) {
const grid = document.getElementById("profilesGrid");

if (profiles.length === 0) {
grid.innerHTML = `

`;
return;
}

grid.innerHTML = profiles.map(p => `

`).join("");
}

🪄 DOM Event Handling

You’ll listen for clicks on the edit and delete buttons using event delegation:

document.getElementById("profilesGrid").addEventListener("click", (e) => {
const action = e.target.dataset.action;
const id = Number(e.target.dataset.id);
if (!action || !id) return;

if (action === "edit") openEditModal(id);
if (action === "delete") deleteProfile(id, profiles);
});

Integration Points

Your functions will be called from:

app.js (main initializer)

modal.js (when saving or editing profiles)

You will not handle search or stats — those are in separate modules.

Definition of Done

Profiles can be created, edited, and deleted.

UI updates instantly after each action.

No console errors or warnings.

Functions are exported and usable from other modules.

Code is clean, commented, and modular.

Optional

Add transition animations when profiles appear/disappear.

Add basic input validation (e.g., name/role required).

Use localStorage to persist profiles between reloads.