// Category Grid
const categoryGrid = document.querySelector('.category-grid');

function createCategoryItem(category) {
  const categoryItem = document.createElement('div');
  categoryItem.classList.add('category-item');

  const categoryImage = document.createElement('img');
  categoryImage.src = category.imageUrl;
  categoryImage.alt = category.name;

  const categoryName = document.createElement('h3');
  categoryName.textContent = category.name;

  const categoryLink = document.createElement('a');
  categoryLink.href = `#`;
  categoryLink.classList.add('btn');
  categoryLink.textContent = 'Shop Now';
  categoryLink.addEventListener('click', () => filterProducts(category.id));

  categoryItem.appendChild(categoryImage);
  categoryItem.appendChild(categoryName);
  categoryItem.appendChild(categoryLink);

  return categoryItem;
}

const categories = [
  {
    id: 1,
    name: 'Clothing',
    imageUrl: 'https://via.placeholder.com/300x200?text=Clothing'
  },
  {
    id: 2,
    name: 'Accessories',
    imageUrl: 'https://via.placeholder.com/300x200?text=Accessories'
  },
  {
    id: 3,
    name: 'Home & Living',
    imageUrl: 'https://via.placeholder.com/300x200?text=Home+%26+Living'
  },
  {
    id: 4,
    name: 'Beauty',
    imageUrl: 'https://via.placeholder.com/300x200?text=Beauty'
  }
];

categories.forEach(category => {
  const categoryItem = createCategoryItem(category);
  categoryGrid.appendChild(categoryItem);
});

// Product Filtering
let filteredProducts = [...products];

function filterProducts(categoryId) {
  filteredProducts = products.filter(product => product.categoryId === categoryId);
  updateProductGrid();
}

function updateProductGrid() {
  productGrid.innerHTML = '';
  filteredProducts.forEach(product => {
    const productItem = createProductItem(product);
    productGrid.appendChild(productItem);
  });
```javascript
// Checkout Page
const checkoutButton = document.querySelector('.cart a');
const checkoutModal = document.createElement('div');
checkoutModal.classList.add('checkout-modal');

function openCheckoutModal() {
  checkoutModal.innerHTML = '';
  const checkoutContainer = document.createElement('div');
 checkoutContainer.classList.add('checkout-container');

  const checkoutHeader = document.createElement('div');
  checkoutHeader.classList.add('checkout-header');
  const checkoutTitle = document.createElement('h2');
  checkoutTitle.textContent = 'Checkout';
  const closeButton = document.createElement('button');
  closeButton.classList.add('close-button');
  closeButton.innerHTML = '×';
  closeButton.addEventListener('click', closeCheckoutModal);
  checkoutHeader.appendChild(checkoutTitle);
  checkoutHeader.appendChild(closeButton);

  const checkoutItems = document.createElement('div');
  checkoutItems.classList.add('checkout-items');
  cart.forEach(item => {
    const checkoutItem = createCheckoutItem(item);
    checkoutItems.appendChild(checkoutItem);
  });

  const checkoutTotal = document.createElement('div');
  checkoutTotal.classList.add('checkout-total');
  const totalLabel = document.createElement('h3');
  totalLabel.textContent = 'Total:';
  const totalAmount = document.createElement('p');
  totalAmount.textContent = `$${calculateTotal().toFixed(2)}`;
  checkoutTotal.appendChild(totalLabel);
  checkoutTotal.appendChild(totalAmount);

  const checkoutActions = document.createElement('div');
  checkoutActions.classList.add('checkout-actions');
  const continueButton = document.createElement('button');
  continueButton.classList.add('btn');
  continueButton.textContent = 'Continue';
  continueButton.addEventListener('click', processCheckout);
  checkoutActions.appendChild(continueButton);

  checkoutContainer.appendChild(checkoutHeader);
  checkoutContainer.appendChild(checkoutItems);
  checkoutContainer.appendChild(checkoutTotal);
  checkoutContainer.appendChild(checkoutActions);

  checkoutModal.appendChild(checkoutContainer);
  document.body.appendChild(checkoutModal);
}

function closeCheckoutModal() {
  checkoutModal.remove();
}

function createCheckoutItem(item) {
  const checkoutItem = document.createElement('div');
  checkoutItem.classList.add('checkout-item');

  const itemImage = document.createElement('img');
  itemImage.src = item.imageUrl;
  itemImage.alt = item.name;

  const itemDetails = document.createElement('div');
  itemDetails.classList.add('item-details');
  const itemName = document.createElement('h3');
  itemName.textContent = item.name;
  const itemPrice = document.createElement('p');
  itemPrice.textContent = `$${item.price}`;
  itemDetails.appendChild(itemName);
  itemDetails.appendChild(itemPrice);

  const removeButton = document.createElement('button');
  removeButton.classList.add('remove-button');
  removeButton.textContent = 'Remove';
  removeButton.addEventListener('click', () => removeFromCart(item));

  checkoutItem.appendChild(itemImage);
  checkoutItem.appendChild(itemDetails);
  checkoutItem.appendChild(removeButton);

  return checkoutItem;
}

function removeFromCart(item) {
  cart = cart.filter(cartItem => cartItem !== item);
  updateCartCount();
  openCheckoutModal();
}

function calculateTotal() {
  return cart.reduce((total, item) => total + item.price, 0);
}

function processCheckout() {
  // Implement your checkout processing logic here
  alert('Thank you for your order!');
  cart = [];
  updateCartCount();
  closeCheckoutModal();
}

checkoutButton.addEventListener('click', openCheckoutModal);