项目作者: tayhsn

项目描述 :
Interactive products page for a frontend challenge 🚀
高级语言: CSS
项目地址: git://github.com/tayhsn/products_page.git
创建时间: 2021-07-12T20:57:06Z
项目社区:https://github.com/tayhsn/products_page

开源协议:

下载


Frontend Developer Challenge

Linx Impulse

Github.io | Vercel 📲

Sobre 📝

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.

Implementações :hammer:

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)

Avaliação 📈

Serão critérios avaliativos:

  • HTML semântico e CSS estruturado,
  • JavaScript documentado e funções reutilizáveis,
  • Boas práticas na escrita de códigos,
  • Commits semânticos,
  • Organização do projeto,
  • Responsividade sem frameworks.

Instruções 🗃️

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