lab-dom-ironhack-cart-possible-solution.js

// ITERATION 1

function updateSubtotal(productElement) {
  const productPriceElement = productElement.querySelector('.price span');
  const productQuantityInputElement =
    productElement.querySelector('.quantity input');

  const priceValue = Number(productPriceElement.innerText);
  const quantityValue = productQuantityInputElement.valueAsNumber;

  const subtotalValue = priceValue * quantityValue;

  const productSubTotalElement = productElement.querySelector('.subtotal span');

  productSubTotalElement.innerText = subtotalValue.toFixed(2);

  return subtotalValue;
}

function calculateAll() {
  const productElements = document.querySelectorAll('.product');

  let totalValue = 0;
  for (const productElement of productElements) {
    totalValue += updateSubtotal(productElement);
  }

  const totalElement = document.querySelector('#total-value span');
  totalElement.innerText = totalValue.toFixed(2);
}

// ITERATION 4

function removeProduct(event) {
  const productRemoveButtonElement = event.currentTarget;

  const productElement = productRemoveButtonElement.parentNode.parentNode;
  const productParentElement = productElement.parentNode;

  productParentElement.removeChild(productElement);
}

// ITERATION 5

function createProduct() {
  //... your code goes here
  // const newProductNameInputElement = document.querySelector(
  //   '.create-product td:first-child input'
  // );
  // const newProductPriceInputElement = document.querySelector(
  //   '.create-product td:nth-child(2) input'
  // );
  const newProductNameInputElement = document.querySelector(
    '.create-product input[type="text"]'
  );
  const newProductPriceInputElement = document.querySelector(
    '.create-product input[type="number"]'
  );

  const newProductNameValue = newProductNameInputElement.value;
  const newProductPrice = newProductPriceInputElement.valueAsNumber;

  const productElement = document.createElement('tr');
  // productElement.className = 'product';
  productElement.classList.add('product');

  productElement.innerHTML = `
    <td class="name">
      <span>${newProductNameValue}</span>
    </td>
    <td class="price">$<span>${newProductPrice.toFixed(2)}</span></td>
    <td class="quantity">
      <input type="number" value="0" min="0" placeholder="Quantity" />
    </td>
    <td class="subtotal">$<span>0</span></td>
    <td class="action">
      <button class="btn btn-remove">Remove</button>
    </td>
  `;

  const productRemoveButtonElement =
    productElement.querySelector('.btn-remove');

  productRemoveButtonElement.addEventListener('click', removeProduct);

  const tableBodyElement = document.querySelector('#cart tbody');
  tableBodyElement.append(productElement);

  newProductNameInputElement.value = '';
  newProductPriceInputElement.valueAsNumber = 0;
}

window.addEventListener('load', () => {
  const calculatePricesBtn = document.getElementById('calculate');
  calculatePricesBtn.addEventListener('click', calculateAll);

  const removeButtonElements = document.querySelectorAll('.btn-remove');
  for (const removeButtonElement of removeButtonElements) {
    removeButtonElement.addEventListener('click', removeProduct);
  }

  const createProductTriggerElement = document.getElementById('create');
  createProductTriggerElement.addEventListener('click', createProduct);
});