Build directory cards and a selected profile

The community directory starts with three static member cards and a detail panel. The prior tool-shelf demo showed the click-to-detail pattern with different data; now make it work for this directory.

The starter contains two member cards, their data-name and data-skill values, and the detail panel. Add a third card for Leah Chen (Bread baking) in index.html, then implement selection in script.js. The initial prompt remains until someone selects a card. Each View button should choose exactly its own card, with textContent copying the card’s data into the detail fields rather than inserting markup.

Here is the same selection idea in a different setting: a library shelf. The button identifies its enclosing card; the card holds the data, so we never need to guess which title belongs to the click.

document.querySelector("#book-shelf").addEventListener("click", (event) => {
  const button = event.target.closest("button");
  if (!button) return;
  const book = button.closest("[data-title]");
  document.querySelector("#book-summary").textContent = book.dataset.title;
});

For the directory, adapt that relationship to member cards and update both detail fields. Use classList to move the visual selection, not to replace the text update.