Interactive products page for a frontend challenge 🚀
O desafio consiste em desenvolver a landing page de um e-commerce, baseado no layout previamente disponibilizado, consumindo uma API para alimentar dinamicamente os produtos expostos no site.
Deve-se priorizar as boas práticas de programação, a documentação e a responsividade.
Os requisitos do desafio, assim como a API e os Layouts, estão disponíveis neste repositório.
Funcionalidades implementadas no projeto | Status |
---|---|
Construção e responsividade (mobile/desktop) da página principal | ✅ |
Construção da página e-mail | ✅ |
Design diagonal do Header e Footer (layout) | ✅ |
Validação dos inputs: NOME, EMAIL, CPF | ✅ |
Comportamento dos botões: ENVIAR e MAIS PRODUTOS | ✅ |
Consumo dos dados da API e alimentação dinâmica das páginas | ✅ |
Documentação | ✅ |
✔ Desenvolvimento das páginas index (principal) e e-mail, de acordo com os layouts, sendo a principal possuindo sua versão mobile e desktop utilizando media querys.
✔ Os forms da página principal possuem funções para validação em caso de campos vazios ou e-mail inválido, emitindo um alerta e adicionando uma classe de erro ao input para melhor experiência do usuário.
✔ Interatividade nos botões ENVIAR e ENVIAR AGORA (algoritmo e compartilhar, respectivamente), sendo que o ENVIAR traz somente um alerta de agradecimento e o ENVIAR AGORA além do alerta abre em nova aba a página e-mail (para facilitar a visualização dessa página).
✔ Comportamento dos botões MAIS PRODUTOS de acordo com o esperado, trazendo mais produtos para página em suas respectivas quantidades.
✔ Design diagonal no header e footer da página principal. (Não está totalmente idêntico a versão mobile pois não consegui deixar os botões sobrepostos como no layout)
Serão critérios avaliativos:
Faça o clone deste repositório
git clone https://github.com/tayhsn/frontend-developer-challenge
Leia a documentação disponibilizada no diretório “docs”
& Happy Coding :)
Se existir alguma dúvida, abra uma issue neste repositório.