O projeto
-
Cabeçalho
- Abrir e fechar carrinho.
- Abrir e fechar o menu de navegação em dispositivos menores.
-
Seção de Cardápio
- Alternar entre as seções de alimentos e visualizar informações dos mesmos.
- Selecionar a quantidade de itens que deseja.
- Adicionar itens ao carrinho.
- Visualizar mensagem avisando que o item foi adicionado ao carrinho.
-
Seção de Depoimentos
- Alternar entre os depoimentos disponíveis.
-
Carrinho de Compras
-
1º Etapa
- Visualizar informações dos itens escolhidos.
- Aumentar a quantidade que deseja daquele produto.
- Remover a quantidade que deseja daquele produto.
- Visualizar mensagem de erro caso o carrinho esteja vazio e tente ir para próxima etapa.
-
2º Etapa
- Preencher campos input automaticamente ao informar o CEP.
- Visualizar mensagem de erro caso o cep seja inválido.
- Visualizar mensagem de erro caso tente prosseguir sem informar o endereço completo para entrega.
- Visualizar mensagem de erro avisando que algum input específico não foi preenchido.
- Visualizar mensagem de erro caso tente ir para a próxima etapa com o carrinho vazio.
-
3º Etapa
- Visualizar informações de todos os itens escolhidos.
- Visualizar endereço cadastrado.
- Mensagem de confirmação caso o pedido seja concluído.
-
- HTML
- CSS
- JavaScript
- SASS/SCSS
Utilizei também a biblioteca Toastify JS para as mensagens de aviso. E para organização dos arquivos JavaScript utilizei os módulos, que é um recurso nativo da linguagem introduzido na versão ES6 que consiste em separar seu código em difersos arquivos diferentes.
Gabriel de Alencar |