Menu On-line 🍔

Sobre o Projeto • Funcionalidades • Tecnologias • Autor

📱 Acessar Projeto

🎨 Layout

📃 Sobre o projeto

O projeto $\color{orange}{\textsf{Menu On-line}}$ é uma plataforma digital que permite aos clientes selecionar e encomendar refeições para entrega, focando em praticidade e eficiência no serviço de pedidos online.

⚙ Funcionalidades

• 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.

🛠 Tecnologias

• 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.

👨🏻‍💻 Autor

Gabriel de Alencar