Skip to main content

​
Overview

The Products component (products.js) provides the interface for managing the product inventory. It allows users to add new products with name and price, view all existing products, and delete products from the system.

​
Responsibilities

  • Display all products in the inventory
  • Add new products to the database
  • Delete products from the database
  • Show empty state when no products exist
  • Provide visual feedback for all operations

​
DOM Elements

  • #productForm - Form for adding new products
  • #pName - Input field for product name
  • #pPrice - Input field for product price
  • #productList - Container for product cards
  • #emptyState - Empty state message (shown when no products)

​
Functions

​
renderProducts()

Fetches and displays all products in a grid layout. 
async function renderProducts()
Behavior:
  1. Fetches all products from database
  2. If empty, shows empty state message
  3. Otherwise, renders product cards with delete buttons
  4. Attaches delete event handlers to each product
Empty State: 
if (products.length === 0) {
  productList.innerHTML = '';
  emptyState.classList.remove('hidden');
  return;
}
Product Card Rendering: 
emptyState.classList.add('hidden');
productList.innerHTML = products.map(p => `
  <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
    <div class="flex items-start justify-between mb-2">
      <h3 class="font-semibold text-gray-900">${p.name}</h3>
      <button data-id="${p.id}" class="del-btn text-red-600 hover:text-red-700">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
        </svg>
      </button>
    </div>
    <div class="text-2xl font-bold text-indigo-600">₹${money(p.price)}</div>
  </div>
`).join('');
Delete Handler: Each product card has a delete button with confirmation: 
document.querySelectorAll('.del-btn').forEach(btn => {
  btn.addEventListener('click', async (e) => {
    if (confirm('Delete this product?')) {
      await deleteProduct(btn.dataset.id);
      showToast('Product deleted');
      renderProducts();
    }
  });
});

​
Event Handlers

​
Product Form Submit

Handles adding new products to the inventory. 
productForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  await addProduct(pName.value.trim(), pPrice.value);
  showToast('Product added successfully');
  pName.value = '';
  pPrice.value = '';
  renderProducts();
});
Form Behavior:
  1. Prevents default form submission
  2. Calls addProduct() with trimmed name and price
  3. Shows success toast notification
  4. Clears form inputs
  5. Re-renders product list to show new product

​
Data Flow

​
Adding a Product

​
Deleting a Product

​
Dependencies

​
db.js
module
Database module providing:
  • addProduct(name, price) - Adds a new product
  • getProducts() - Retrieves all products
  • deleteProduct(id) - Deletes a product by ID
​
shared.js
module
Shared utilities providing:
  • money(n) - Formats numbers as currency
  • showToast(message, type) - Displays notification toast

​
Data Structure

Product Object: 
{
  id: number,        // Auto-generated unique ID
  name: string,      // Product name
  price: number      // Product price in rupees
}

​
Auto-Execution

The product list automatically loads when the module is imported: 
renderProducts();

​
User Interactions

​
Adding a Product

  1. User enters product name in #pName input
  2. User enters product price in #pPrice input
  3. User submits form (click button or press Enter)
  4. Product is saved to database
  5. Success toast appears
  6. Form is cleared
  7. Product list refreshes to show new product

​
Deleting a Product

  1. User clicks delete button (trash icon) on a product card
  2. Confirmation dialog appears: “Delete this product?”
  3. If user confirms:
    • Product is removed from database
    • Success toast appears
    • Product list refreshes without the deleted product
  4. If user cancels, no action is taken

​
UI States

​
Empty State

When no products exist, the #emptyState element is shown and #productList is empty.

​
Populated State

When products exist:
  • #emptyState is hidden
  • #productList contains a grid of product cards
  • Each card shows product name, price, and delete button
  • Cards have hover effects for better UX

Build docs developers (and LLMs) love

Get started for freeTalk to us