Ski Shop

function solve() {
  const addForm = document.getElementById('add-new');
  const availableSect = document.getElementById('products');
  const cartSect = document.getElementById('myProducts');
  const filterDiv = document.querySelector('.filter');
  const filterInput = document.getElementById('filter');

  // get totalPrice field
  const totalPriceHead = document.querySelectorAll('h1')[1];

  // get new product fields
  const [nameInput, quantityInput, priceInput] = Array.from(
    addForm.querySelectorAll('input')
  );

  // totalPrice
  let totalPrice = 0;

  // get addBtn
  const addBtn = addForm.querySelector('button');
  // get cartBtn
  const buyBtn = cartSect.querySelector('button');
  // get filterBtn
  const filterBtn = filterDiv.children[2];

  // listen for clicks on addBtn
  addBtn.addEventListener('click', addProduct);

  // listen for clicks on buyBtn
  buyBtn.addEventListener('click', buyProducts);

  // listen for clicks on filterBtn
  filterBtn.addEventListener('click', filterFunctionality);

  // Helper functions
  const createElement = (ele, text, cl) => {
    let element = document.createElement(ele);

    if (text) {
      element.textContent = text;

      if (!isNaN(parseFloat(text))) {
        element.textContent = parseFloat(text).toFixed(2);
      }
    }

    if (cl) {
      element.classList.add(cl);
    }

    return element;
  };

  // Declarations
  function addProduct(e) {
    e.preventDefault();
    // the first child of the section is the ul
    const availableList = availableSect.children[1];

    // create li with data from fields
    let productLi = document.createElement('li');
    let nameSpan = createElement('span', nameInput.value);
    let quantityStrong = createElement(
      'strong',
      `Available: ${quantityInput.value}`
    );

    let priceStrong = createElement('strong', priceInput.value);
    let div = document.createElement('div');
    let cartBtn = createElement('button', "Add to Client's List");

    // clear inputs
    nameInput.value = '';
    quantityInput.value = '';
    priceInput.value = '';

    // create product's list item
    div.appendChild(priceStrong);
    div.appendChild(cartBtn);

    productLi.appendChild(nameSpan);
    productLi.appendChild(quantityStrong);
    productLi.appendChild(div);

    // append the product to the availableList
    availableList.appendChild(productLi);

    // listen for clicks on add to client's list
    cartBtn.addEventListener('click', addToCart);
  }

  function addToCart(e) {
    const currentProduct = e.target.parentElement.parentElement;
    // the first child of the section is the ul
    const cartList = cartSect.children[1];

    // get current available products
    const availableStrong = currentProduct.children[1];
    let availableItems = Number(availableStrong.textContent.split(' ')[1]);

    // create new li based on currentProduct
    const productLi = document.createElement('li');
    // get name span of current product
    let name = currentProduct.children[0].textContent;
    // get price strong of current product
    let priceText = currentProduct.children[2].children[0].textContent;
    let productData = `${name}<strong>${priceText}</strong>`;

    // for each item increase the totalPrice and decrease available products
    availableItems--;

    // if product availability < 1 => remove it from the ul
    if (availableItems < 1) {
      currentProduct.remove();
    }

    // add text data to li innerHTML
    productLi.innerHTML = productData;

    // add the li to myProducts section ul
    cartList.appendChild(productLi);

    // set the new available value
    availableStrong.textContent = `Available: ${availableItems}`;

    totalPrice += Number(priceText);
    totalPriceHead.textContent = `Total Price: ${totalPrice.toFixed(2)}`;
  }

  function buyProducts(e) {
    // when bought, remove all items from cart and reset the totalPrice
    const allProducts = cartSect.children[1];
    allProducts.textContent = '';
    totalPrice = 0;
    totalPriceHead.textContent = `Total Price: ${totalPrice.toFixed(2)}`;
  }

  function filterFunctionality() {
    // the first child of the section is the ul
    const availableList = availableSect.children[1];
    let keyword = filterInput.value.toLowerCase();
    if (!keyword) return;

    // clear input
    filterInput.value = '';

    // get all products
    productsArr = Array.from(availableList.children);

    productsArr.forEach((productLi) => {
      let productName = productLi.children[0].textContent.toLowerCase();

      if (productName.match(keyword) != null) {
        productLi.style.display = 'block';
      } else {
        productLi.style.display = 'none';
      }
    });
  }
}