Add Profile Feature (js/profile.js)

Goal

Create and manage developer profiles dynamically using pure JavaScript.
This includes adding, displaying, editing, and deleting profiles — all in this single module.
Your work will make it possible for the app to store and manage user data interactively.

File Ownership

You fully own this file:
/js/profiles.js
Nobody else edits or commits changes to this file.

Learning Concepts

DOM manipulation (createElement, appendChild, etc.)

Form handling and event listeners

Working with arrays and objects

Modular JS (exporting functions to app.js)

Functional Requirements
1. Data Structure

Create an array to hold profile data in memory.

let profiles = [];

Each profile should be an object like this:

{
id: Date.now(),
name: "John Doe",
role: "Frontend Developer",
skills: "HTML, CSS, JavaScript",
github: "https://github.com/johndoe"
}

2. Add New Profile

Listen for form submission (e.g., from a form with id #profileForm).

Collect input values: name, role, skills, GitHub link.

Validate that all required fields are filled.

Push the new object into the profiles array.

Clear the form fields after submission.

Call a render function to display all profiles.

3. Display All Profiles

Create a function renderProfiles() that:

Clears the container before rendering (.innerHTML = "").

Loops through the profiles array.

Creates DOM elements (cards or rows) for each profile.

Adds “Edit” and “Delete” buttons to each profile card.

Appends them to a container with id #profilesList.

4. Delete Profile

Attach a click event to the “Delete” button.

Find the matching profile using its ID.

Remove it from the array (filter or splice).

Re-render the profiles.

5. Edit Profile

When user clicks “Edit,” fill the form with existing data.

Change the “Add” button text to “Update.”

On submission, update that profile in the array instead of adding a new one.

Reset the button text to “Add” when done.

6. Export Key Functions

At the end of your file, export your main functions so the main app controller (app.js) can initialize them:

export { renderProfiles, addProfile };

Expected HTML Hooks

You’ll need these elements already present in index.html (don’t create them — just hook to them):

Add Profile

Definition of Done

Users can add, edit, and delete profiles dynamically.

Profiles appear instantly on the screen after adding.

No page reloads required.

Code is modular (functions are exported).

No errors appear in console.

extra credit

Save the profiles in localStorage and load them on page refresh.

Add a simple counter of total profiles (will later connect with the stats module).

The work is in /js/profiles.js, which you own. Start by examining the existing index.html to see the form and container hooks. Implement the array and functions as described. Test by adding profiles and checking the DOM updates. For 'done', ensure no console errors and that add, edit, and delete work without page reloads. Extra credit involves localStorage.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.