Gostaria de saber se a maneira que utilizei as arrow functions e functions expressions são relevantes e se aproximam de uma situação real ou se estou equivocado em seus usos. Vi que para criar a section eu fiz bem diferente na aula foi bem mais intuitivo e facil mas é comum manipular o HTML no js?
const createSpan = (tag) => {return document.createElement(tag)};
const addClass = (html, text) => {html.classList.add(text)};
const changeHTML = (html, text) => {html.textContent = text};
const appendChild = (parent, child) => {parent.appendChild(child)};
let totalPrice = 0;
function addToCart() {
let product = document.getElementById('produto').value;
let quantity = parseInt(document.getElementById('quantidade').value);
let list = document.getElementById('lista-produtos');
let newEntry = document.createElement('section');
let total = document.getElementById('valor-total');
// Verify if the quantity field is valid
if(isNaN(quantity) || quantity === '' || quantity <= 0) {
alert('Quantidade inválida! Por favor, insira um número válido.');
return;
}
// Creating new span to add products to cart
let spanQty = createSpan('span');
let spanProd = createSpan('span');
let spanPrice = createSpan('span');
// Getting product name
let prodName = product.split('-')[0].trim();
// Converting the price to a float value and in case the value have a comma swap to dot and accept values with 2 decimals for proper functionality
// Although .trim() .replace() and .toFixed() is not really necessary here i'm just simulating a case where i would need to ensure i would have to properly check and parse the input value
let price = parseFloat(product.split('R$')[1].trim().replace(',', '.'));
// Getting the total price for the product select and quantity
price = price * quantity;
// My new section receveis the same style as the one that is static in the HTML
addClass(newEntry, 'carrinho__produtos__produto');
// Adding style and product qty for the span
addClass(spanQty,'texto-azul');
changeHTML(spanQty, `${quantity}x`);
// Created a new style to provide a margin space between the product name and other info
addClass(spanProd, 'produto-nome')
changeHTML(spanProd, prodName);
// Adding style and price for the span
addClass(spanPrice,'texto-azul');
changeHTML(spanPrice, `R$${price}`);
// Appending the new span to the new section created into the list that already exist in the HTML file
appendChild(newEntry, spanQty);
appendChild(newEntry, spanProd);
appendChild(newEntry, spanPrice);
let existingItem = findExistingItem(list, prodName);
//Check if existingItem is defined meaning receive the html values
if (existingItem) {
updateExistingItem(existingItem, price, quantity, totalPrice, total);
}
else {
addNewItemCart(list, newEntry, price, totalPrice, total);
}
document.getElementById('quantidade').value = '';
}
// Clear the cart of all items
function clearCart() {
// Get the relevant html elements to be cleared.
let list = document.getElementById('lista-produtos');
let total = document.getElementById('valor-total');
list.textContent = '';
total.textContent = '';
document.getElementById('quantidade').value = '';
totalPrice = 0;
}
// Check if the product already exists in the cart by converting the html to an array from list.children getting all relevants elements inside List
// Uses the method find to search the whole array trying to find a matching product
function findExistingItem(list, prodName) {
return Array.from(list.children).find(item => {
const productNameElement = item.querySelector('span:not(.texto-azul)');
return productNameElement && productNameElement.textContent.trim() === prodName;
});
}
function addNewItemCart(list, newEntry, price, updateTotal, total) {
appendChild(list, newEntry);
// Update cart total
totalPrice = updateTotal + price;
changeHTML(total, `R$ ${totalPrice.toFixed(2)}`);
}
function updateExistingItem(existingItem, price, quantity, updateTotal, total) {
const quantitySpan = existingItem.querySelector('.texto-azul');
const priceSpan = existingItem.querySelector('.texto-azul:last-child');
let currentQuantity = parseInt(quantitySpan.textContent);
currentQuantity += quantity;
quantitySpan.textContent = `${currentQuantity}x`;
let currentPrice = parseFloat(priceSpan.textContent.replace('R$', ''));
console.log(price, currentPrice, updateTotal);
currentPrice += price;
console.log(currentPrice);
priceSpan.textContent = `R$${currentPrice.toFixed(2)}`;
totalPrice = updateTotal + price;
changeHTML(total, `R$ ${totalPrice.toFixed(2)}`);
}