<!-- HTML -->
<header>
  <button id="create" popovertarget="add-popover">Add Card</button>
</header>
<div id="cards"></div>

<!-- Add Card Dialog -->
<dialog id="add-popover" popover>
  <h2>Add Card</h2>
  <form id="newCard">
    <label>
      Name:
      <input type="text" id="name" required>
    </label>
    <label>
      Is Premium:
      <input type="checkbox" id="premium">
    </label>
    <div class="button-group">
      <button type="submit" class="success">Submit</button>
      <button class="cancel" popovertarget="add-popover" popovertargetaction="hide">Cancel</button>
    </div>
  </form>
</dialog>

<!-- Edit Card Dialog -->
<dialog id="edit-popover" popover>
  <h2>Edit Card</h2>
  <form id="editCard">
    <label>
      Name:
      <input type="text" id="edit-name">
    </label>
    <label>
      Is Premium:
      <input type="checkbox" id="edit-premium">
    </label>
    <div class="button-group">
      <button type="submit" class="success">Update</button>
      <button class="cancel" popovertarget="edit-popover" popovertargetaction="hide">Cancel</button>
      <button type="button" id="delete-btn" class="delete">Delete Card</button>
    </div>
  </form>
</dialog>
* {
  box-sizing: border-box;
}

body {
  background-color: #ddd;
  font-family: 'Tahoma', sans-serif;
}

header {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
}

input[type="text"], select, button {
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 8px;
  margin-block: 4px;
}

input[type="checkbox"] {
  height: 20px;
  width: 20px;
  margin: 0;
  cursor: pointer;
}

input[type="text"] {
  width: 100%;
}

label {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.button-group {
  display: flex;
  gap: 5px;
  margin-top: 20px;
  justify-content: end;
}

button {
  background-color: tomato;
  font-weight: bold;
  color: white;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

button.success {
  background-color: #00ae9d;
}

button.cancel {
  background-color: transparent;
  color: #999;
}

.mr-2 {
  margin-right: 6px;
}

#cards {
  display: flex;
  flex-wrap: wrap;
}

/* Cards */
.card, [popover] {
  background-color: white;
  border-radius: 10px;
  font-weight: bold;
  position: relative;
  padding: 20px;
  margin: 5px;
  min-height: 150px;
  min-width: 300px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
}

.card a {
  color: #333;
  text-decoration: none;
}

.card {
  border-left: 7px solid skyblue;
}

.card.premium {
  border-color: tomato;
}

[popover] {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 1001; 
  max-width: 400px;
  width: 90%;
  transition: opacity 0.3s ease, transform 0.3s ease;
  padding: 30px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Backdrop */
#backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Backdrop Styling */
[popover]::backdrop {
  background: rgba(0, 0, 0, 0.6); 
  backdrop-filter: blur(4px);
}

'use strict';

const container = document.querySelector("#cards");
const addForm = document.querySelector("#newCard");
const editForm = document.querySelector("#editCard");
const addPopover = document.querySelector("#add-popover");
const editPopover = document.querySelector("#edit-popover");
const deleteBtn = document.querySelector("#delete-btn");

let currentEditIndex = null;

const cards = [
  { name: "Miguel Fondeur", id: Date.now(), premium: false },
  { name: "Michael Denny", id: Date.now() + 1, premium: true }
];

// Renders all cards
function renderCards() {
  container.innerHTML = cards
    .map((card, index) => `
      <div class="card ${card.premium ? "premium" : ""}">
        <h3>${card.name}</h3>
        <p>ID: ${card.id}</p>
        <button onclick="openEditPopover(${index})">Edit</button>
      </div>`
    )
    .join("");
}

// Adds a new card
function addCard(e) {
  e.preventDefault();

  const name = addForm.querySelector("#name").value.trim();
  const premium = addForm.querySelector("#premium").checked;

  if (name) {
    const newCard = {
      name,
      premium,
      id: Date.now() // Unique ID using timestamp
    };

    cards.push(newCard);
    renderCards();
    addPopover.hidePopover();
    addForm.reset();
  }
}

// Opens the edit popover with pre-filled data
function openEditPopover(index) {
  currentEditIndex = index;
  const card = cards[index];

  // Pre-fill the form with current card values
  editForm.querySelector("#edit-name").value = card.name;
  editForm.querySelector("#edit-premium").checked = card.premium;

  editPopover.showPopover();
}

// Updates the card with edited values
function updateCard(e) {
  e.preventDefault();

  if (currentEditIndex !== null) {
    const card = cards[currentEditIndex];

    card.name = editForm.querySelector("#edit-name").value.trim();
    card.premium = editForm.querySelector("#edit-premium").checked;

    renderCards();
    editPopover.hidePopover();
  }
}

// Deletes the selected card
function deleteCard() {
  if (currentEditIndex !== null) {
    cards.splice(currentEditIndex, 1);
    renderCards();
    editPopover.hidePopover();
  }
}

// Event Listeners
addForm.addEventListener("submit", addCard);
editForm.addEventListener("submit", updateCard);
deleteBtn.addEventListener("click", deleteCard);

// Initial render
renderCards();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.