Este é um projeto simples de carrinho de compras, desenvolvido em HTML, CSS e JavaScript. O carrinho permite que o usuário selecione produtos, especifique a quantidade desejada e os adicione ao carrinho. O valor total da compra é atualizado dinamicamente conforme os produtos são adicionados. Além disso, é possível limpar o carrinho.
- index.html: O arquivo HTML principal contendo a estrutura da página.
- style.css: O arquivo CSS que define o estilo da página.
- js/app.js: O arquivo JavaScript contendo a lógica do carrinho de compras.
- O usuário pode selecionar um produto no menu suspenso (
<select>) no formulário. - A seleção do produto é detectada pelo evento
changeno menu suspenso, e as informações do produto (nome e valor) são armazenadas nas variáveisnomeProdutoevalorProduto.
- O botão "Adicionar" permite ao usuário adicionar produtos ao carrinho.
- A função
adicionaré chamada quando o botão "Adicionar" é clicado. - O valor total da compra é calculado multiplicando a quantidade escolhida pelo valor do produto.
- Se a quantidade for zero ou se nenhum produto for selecionado, o usuário é alertado.
- Se houver um produto selecionado e uma quantidade válida, o produto é adicionado à lista do carrinho, e o valor total é atualizado.
- O botão "Limpar" permite ao usuário limpar todos os itens do carrinho.
- A função
limparé chamada quando o botão "Limpar" é clicado. - A lista do carrinho é esvaziada, e o valor total é resetado para zero.
- Baixe todos os arquivos deste repositório.
- Abra o arquivo
index.htmlem um navegador da web para visualizar a página.
- Implementar funcionalidades adicionais, como remoção de itens individuais do carrinho.
- Aprimorar o design da interface do usuário.
- Adicionar animações para uma experiência mais interativa.
Espero que este projeto seja útil como exemplo simples de um carrinho de compras e que possa ser expandido com mais funcionalidades e melhorias.