VanillaCartJS - Carrinho de Compras JavaScript ES6

Crie um Projeto de Carrinho de Compras Real e Aprenda JavaScript ES6 no Caminho

Avaliação: 4.6 de 5230 avaliações

2.5 horas totais

9 palestras

Todos os Níveis

Crie um Projeto de Carrinho de Compras Real e Aprenda JavaScript ES6 no Caminho

Se você sempre quis construir um carrinho de compras simples, mas poderoso, com JavaScript, este curso é definitivamente para você. Este curso não se trata de criar uma solução de comércio eletrônico ultra grande. Trata-se de criar um projeto do mundo real com uma atitude pronta para negócios.

Todos os produtos deste projeto vêm diretamente do código HTML. Não há banco de dados ou qualquer código de back-end. Se você quiser adicionar um novo produto, basta copiar e colar um trecho de código HTML.

Você criará um projeto com as seguintes funcionalidades:

• Adicionar produtos ao carrinho de compras
• Alterar a quantidade de itens no carrinho
• Remover um único item ou todos os itens de uma vez do carrinho
• Fazer um pedido via checkout do PayPal

Escrever código deve ser emocionante, e espero que seja assim neste curso. Na verdade, o projeto do carrinho de compras é apenas uma capa. O verdadeiro objetivo é que, com este curso, você aprenda programação em JavaScript usando recursos do ES6.

Vale mencionar que cada palestra possui seus próprios arquivos de código-fonte. Portanto, se você ficar preso de alguma forma, sempre poderá comparar seu código com o código de uma palestra específica.

O que você aprenderá

• Escrever código com menos erros usando o modo estrito
• Declarar funções, incluindo funções de seta
• Usar código JavaScript dentro de uma string com strings de modelo
• Criar uma matriz de objetos para armazenar itens do carrinho
• Usar os métodos de matriz forEach e filter
• Obter elementos do DOM pelos métodos querySelector e querySelectorAll
• Armazenar itens do carrinho no localStorage do navegador
• Adicionar, remover e obter itens de uma matriz
• Usar declarações if e shorthand inline
• Declarar variáveis usando as palavras-chave const e let
• Adicionar e remover classes em elementos HTML
• Atrasar ações com a função setTimeout
• Inserir novo código HTML no DOM
• Capturar eventos de clique pelo método addEventListener
• Remover elementos do DOM
• Adicionar/remover nomes de classes e atributos em elementos do DOM
• Usar os seguintes operadores: ++, --, +=, ===, !==, ||, >, <
• Converter uma matriz para o formato JSON
• Refatoração de código
• Enviar formulários HTML remotamente
• Usar o PayPal como método de checkout