lab-ironcart-refactor-solution.js

// ITERATION 1

function updateSubtotal($product) {
  // Get DOM elements that hold price and quantity
  const $price = $product.querySelector('.price span');
  const $quantity = $product.querySelector('.quantity input');

  // Extract values from DOM elements
  const priceValue = parseFloat($price.innerText);
  const quantityValue = $quantity.valueAsNumber;

  // Calculate total values
  const subtotalValue = priceValue * quantityValue;

  // Get DOM element that holds the subtotal value for the product
  const $subTotal = $product.querySelector('.subtotal span');

  // Set the product subtotal to the corresponding DOM element
  $subTotal.innerText = subtotalValue;

  // Return subtotal value so it can be used later
  return subtotalValue;
}

// ITERATION 2

function calculateAll() {
  // Get the DOM nodes for each product row
  const $products = document.getElementsByClassName('product');

  // Declare an auxiliary variable that will hold the sum of each product subtotal
  let totalValue = 0;

  // Iterate through the product nodes,
  // call update subtotal on it and add the subtotal to the total value
  for (let $product of $products) {
    totalValue += updateSubtotal($product);
  }

  // ITERATION 3

  // Display the total value of products in cart in the appropriate node
  document.querySelector('#total-value span').innerHTML = totalValue;
}

// Select "calculate prices" button
const $calculateTrigger = document.getElementById('calculate');

// Listen for clicks on "calculate prices" button
// and fire "calculateAll" when it's clicked
$calculateTrigger.addEventListener('click', calculateAll);

// ITERATION 4

function productRemoveListener(event) {
  const $target = event.currentTarget;
  const $row = $target.parentNode.parentNode;
  const $parent = $row.parentNode;
  $parent.removeChild($row);
}

window.addEventListener('load', () => {
  const $removeButtons = document.querySelectorAll('.btn-remove');
  for (let $removeButton of $removeButtons) {
    $removeButton.addEventListener('click', productRemoveListener);
  }
});

// ITERATION 5

function createProduct(event) {
  const $createRow = event.currentTarget.parentNode.parentNode;

  const $productNameInput = $createRow.querySelector('input');
  const $productPriceInput = $createRow.querySelector('input[type="number"]');

  const nameValue = $productNameInput.value;
  const priceValue = $productPriceInput.valueAsNumber;

  const $tableRow = document.createElement('tr');
  $tableRow.classList.add('product');
  $tableRow.innerHTML += `
    <td class="name">
      <span>${nameValue}</span>
    </td>
    <td class="price">$<span>${priceValue.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 $removeButton = $tableRow.querySelector('.btn-remove');

  $removeButton.addEventListener('click', productRemoveListener);

  const $parent = document.querySelector('#cart tbody');

  $parent.appendChild($tableRow);

  $productNameInput.value = '';
  $productPriceInput.valueAsNumber = 0;
}

window.addEventListener('load', () => {
  const $createButton = document.getElementById('create');
  if ($createButton) {
    $createButton.addEventListener('click', createProduct);
  }
});