Entrar Ainda não tem acesso?
1
resposta

[Projeto] Projeto Carrinho de Compras com exerc 1

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Carrinho de Compras e atividade Desafio: hora da prática

por Mike Guilherme
| 6.7k xp | 7 posts
let precoTotal
limpar();

function adicionar() {
    //recuperar produto e quantidade válida
    let produto = document.getElementById('produto').value;
    let quantidade = document.getElementById('quantidade').value;
    if (produto === '' || quantidade <= 0) {
        alert('Por Favor, selecione um produto e insira uma quantidade válida.');
        return;
    }
    let nomeProduto = produto.split('-')[0];
    let valorUnitario = produto.split('R$')[1];

    // calcular preço e subtotal
    let preco = quantidade * valorUnitario;
    // add produto e subtotal ao carrinho
    let produtoNoCarrinho = document.getElementById('lista-produtos');
    produtoNoCarrinho.innerHTML = produtoNoCarrinho.innerHTML + ` <section class="carrinho__produtos__produto">
            <span class="texto-azul">${quantidade}x</span> ${nomeProduto} <span class="texto-azul">R$${preco}</span>
            </section>`
    // calcular e fornecer valor total
    precoTotal = precoTotal + preco;
    let valorTotal = document.getElementById('valor-total');
    valorTotal.textContent = `R$${precoTotal}`;
    document.getElementById('quantidade').value = 0;
}

function limpar() {
    document.getElementById('produto').value = '';
    document.getElementById('quantidade').value = '';
    document.getElementById('lista-produtos').innerHTML = '';
    document.getElementById('valor-total').textContent = 'R$ 0';
    precoTotal = 0;

}
1 resposta
por Daniel Nogueira
| 2331.1k xp | 5190 posts
Alura Scuba Team Analista de Suporte Educacional

Olá, Mike! Como vai?

Parabéns pela resolução da atividade!

Observei que você explorou o uso de funções para organizar a lógica com JavaScript, utilizou muito bem o DOM para manipular elementos da página e ainda compreendeu a importância do controle de estado para atualizar o carrinho corretamente.

Continue postando as suas soluções, com certeza isso ajudará outros estudantes e tem grande relevância para o fórum.

Uma dica interessante para o futuro é converter o valor unitário em número antes de calcular o preço. Assim: 

let valorUnitario = Number(produto.split('R$')[1]);
let preco = quantidade * valorUnitario;

Isso faz com que os cálculos sejam mais precisos e evita problemas de tipo.

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

AluraConte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA