Working with Objects: Creating, Updating & Deleting

What is CRUD?

Before we get started, let's define CRUD. CRUD stands for Create, Read, Update, Delete. The most common example of a CRUD app is a Todo List. But imagine an app where you're creating a cartoon character, saving your character to be viewed later, and clicking edit to update or delete it. Most of your favorite applications can be reduced to these operations.

For our purposes, we'll stick to the card design from the last post on filtering, searching, and sorting.

Starting Point

We've already introduced some card data and demonstrated how to filter, search, and sort it. Now, using the same structure, let’s take it a step further by adding functionality to create, update, and delete cards.

We'll use three array methods:

• push() to Create
• find() to Update
• splice() to Delete

Creating Cards

Let's start with the Create operation. We'll need a form to add new cards dynamically. There are many ways you can do this: opening a modal, creating a separate page, or editing the card directly. For this example, we'll use a modal, which is a common UI pattern.

To keep things simple and modern, I’ll use the native <dialog> element with the popover attribute, which makes it easy to create modals without relying on JavaScript libraries. We won't go over <dialog> here, but MDN has great documentation on it.

Here's the code:

<header>
  <button id="create" popovertarget="add-popover">Add Card</button>
</header>

<div id="cards"></div>

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

We're adding a simple button at the top to trigger the modal form. The form captures the new card data, which we'll handle with JavaScript.

Here's how you capture and add the card:

const addForm = document.querySelector("#newCard");
const addPopover = document.querySelector("#add-popover");

const addCard = (event) => {
  event.preventDefault();

  const name = event.target.name.value.trim();
  const premium = event.target.premium.checked;

  if (name) {
    cards.push({
      id: Date.now(),
      name,
      premium,
    });

    renderCards();
    addPopover.hidePopover();
    event.target.reset();
  }
};

addForm.addEventListener("submit", addCard);

This captures the form data, creates a new object, and adds it to the cards array. It then re-renders the cards and hides the modal.

Updating Cards

For the Update operation, we'll add another dialog modal form. We'll follow the same structure as before, but with a 'Delete' button included for convenience. We'll also add an 'Edit' button to each card to trigger the modal.

HTML for Edit Modal

<dialog id="edit-popover" popover>
  <h2>Edit Card</h2>
  <form id="editCard">
    <label for="edit-name"
      >Name:
      <input type="text" id="edit-name" required />
    </label>
    <label for="edit-premium"
      >Is Premium:
      <input type="checkbox" id="edit-premium" />
    </label>
    <div class="button-group">
      <button type="submit" class="success">Save</button>
      <button
        type="button"
        class="cancel"
        popovertarget="edit-popover"
        popovertargetaction="hide"
      >
        Cancel
      </button>
      <button type="button" id="delete-btn" class="delete">Delete</button>
    </div>
  </form>
</dialog>

Updating the Render Function

We'll add an "Edit" button to each card so it can trigger the edit modal:

function renderCards() {
  const container = document.querySelector("#cards");

  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("");
}

Opening the Edit Modal

When you click "Edit," it pre-fills the modal with the card's current data, making it easy to modify and save:

const editPopover = document.querySelector("#edit-popover");
let currentEditIndex = null;

function openEditPopover(index) {
  currentEditIndex = index;
  const card = cards[index];

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

  editPopover.showPopover();
}

function updateCard(e) {
  e.preventDefault();

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

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

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

document.querySelector("#editCard").addEventListener("submit", updateCard);

Deleting Cards

To Delete a card, we'll use the same modal. The 'Delete' button will call a function to remove the card from the cards array using splice().

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

document.querySelector("#delete-btn").addEventListener("click", deleteCard);

Final Result

Here's the final implementation. I've removed the previous filtering, searching, and sorting functionality for simplicity. I'll include all features in a future demo of a complete vanilla JavaScript application.

CRUD is a Concept

We just covered a basic CRUD implementation using JavaScript's array methods: push(), find(), and splice(). This is perfect for prototyping ideas.

In the real world, you'd be sending requests to an API, storing data in a database, and handling validation. Whether you're using Firebase, Supabase, or a traditional backend with SQL or NoSQL, the CRUD concept remains the same.

In future posts, we'll expand this app to include API requests, authentication, and additional features like profiles. Stay tuned!