1. Descrição do projeto
2. Requisitos
3. Como rodar a aplicação
4. Linguagens, dependencias e libs utilizadas
5. Principais dificuldades encontradas
6. Extras
7. Próximos passos

Este repositório foi desenvolvido para ser avaliado no processo seletivo da vaga Suport Front End Jr na AutoForce. Na primeira parte do projeto foram desenvolvidos programas que alteram a DOM de páginas específicas da empresa de acordo com requisitos pré-estabelecidos. Na segunda parte do projeto foi codificada uma interface disponibilizada pela AutoForce utilizando HTML, CSS e JavaScript.

Parte I - Manipulando o DOM

1. Adicionar um ícone para o YouTube no header apontando para https://www.youtube.com/channel/UCLI4tg1oh_oLiJJteExJdUQ.

2. Crie um novo item dropdown para o menu e o intitule Veículos. Os itens Novos e Seminovos devem ser realocados para esse novo dropdown. O item Veículos deve ser o primeiro do menu.

3. Modifique o formulário de Estou Interessado disponível em https://testes.autoforce.com.br/autoforce-ford/novos/territory-2022.

4. Crie um botão flutuante de WhatsApp. Crie um popup de WhatsApp fixado no canto inferior esquerdo da tela, ao clicar nesse botão três números devem aparecer:

• Seminovos: +55 (11) 99999-9999;
• Serviços +55 (11) 11111-11111 e
• Central de Vendas: +55 (11) 88888-8888).
  Um novo clique em qualquer um desses números deve encaminhar o usuário diretamente para o WhatsApp.

Parte II - Montando Layout

1. Codifica a seguinte interface.

2. Não há necessidade de criar um dropdown nos botões do header. Crie um hyperlink para o telefone e um para o WhatsApp.

3. Link do vídeo para a área Conheça o BMW: https://www.youtube.com/watch?v=cFyrTEYyq64

Parte I

1. Para cada arquivo .js, copiar todo o código e colar no console da respectiva página.

Parte II

1. Clonar o repositório na sua máquina:

git clone [email protected]:JonasVasconcelos/Autoforce.git

2. Rodar no plugin live server do VS Code
3. Ajustar a tela pra 1440 x 2358 px

• [HTML5]
• [CSS3]
• [JavaScript]

Parte I

Os requisitos 3 e 4 apresentaram inconsistências não explicadas. Para maiores detalhes, veja os scripts.

Parte II

Não entendi para onde os hyperlinks dos botões de LIGUE AGORA e WHATSAPP deveriam apontar, pois não foi passado nenhum link e não encontrei essa informação na página ou no modelo do Figma.

Portanto, eu direcionei o hyperlink de LIGUE AGORA a página real de contatos da Autoforce. Já o hyperlink do WHATSAPP, eu preferi apontar para o footer, onde é possível encontrar outras informações.

Parte I

No requisito 1 pedia apenas o ícone do Youtube e eu adicionei os ícones das redes Instagram e LinkedIn, além de manter a estilização da página.

No requisito 2 eu consegui manter todas as animações dos dropdowns e implementei a função de checagem e validação dos dropdowns ativos.

Parte II

Na segunda parte, era solicitado a codificação do modelo do figma e os hyperlinks de LIGUE AGORA e WHATSAPP. Eu consegui manter a estilização da página, implementei a animação do botão do play, criei os hyperlink para as redes sociais e para o mapa informando a localidação da matriz.

1. Reescrever o código usando React e Redux.

2. Desenvolver os testes unitários para garantir a renderização e o funcionamento da página.