Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Carrinho de Compras: Poderia avaliar minhas functions expressions e arrow functions

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)}`);    
}
1 resposta
solução!

Olá Israel!

Fico feliz em ver seu interesse em melhorar suas habilidades com JavaScript! Vamos dar uma olhada no seu código.

  1. Uso de Arrow Functions e Function Expressions: Você está utilizando arrow functions de forma adequada para funções simples e reutilizáveis, como createSpan, addClass, changeHTML e appendChild. Elas são perfeitas para esses casos, pois tornam o código mais conciso e fácil de ler.

  2. Manipulação de HTML com JavaScript: Sim, é bastante comum manipular o HTML usando JavaScript, especialmente em projetos que exigem interatividade, como um carrinho de compras. Você está no caminho certo ao criar elementos e adicionar classes dinamicamente. Isso é uma prática comum em desenvolvimento web.

  3. Estrutura e Organização: Seu código está bem organizado. Você separou bem as responsabilidades em funções diferentes, o que é ótimo para manutenção e legibilidade. Por exemplo, addNewItemCart e updateExistingItem têm responsabilidades claras.

  4. Validação e Tratamento de Erros: A validação da quantidade é uma boa prática. Isso evita que valores inválidos sejam processados, o que poderia causar erros no cálculo do preço total.

  5. Cálculo de Preço e Atualização do Carrinho: O uso de parseFloat e replace para lidar com valores monetários é uma abordagem prática, especialmente quando você precisa garantir que os valores sejam tratados corretamente.

  6. Pequenas Sugestões:

    • Considere adicionar comentários para explicar partes mais complexas do código, o que pode ajudar outros desenvolvedores (ou você mesmo no futuro) a entenderem rapidamente o que cada parte faz.
    • Se o projeto crescer, pode ser interessante modularizar o código em arquivos separados, especialmente se você começar a adicionar mais funcionalidades.

Em resumo, seu código está bem estruturado e utiliza práticas comuns e eficazes para manipulação de DOM com JavaScript. Continue assim e explore sempre novas maneiras de otimizar e melhorar seu código!

Espero ter ajudado e bons estudos!