- Descrição do projeto
- Requisitos
- Como rodar a aplicação
- Linguagens, dependencias e libs utilizadas
- Principais dificuldades encontradas
- Extras
- 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
-
Adicionar um ícone para o YouTube no header apontando para https://www.youtube.com/channel/UCLI4tg1oh_oLiJJteExJdUQ.
-
Crie um novo item dropdown para o menu e o intitule
Veículos
. Os itensNovos
eSeminovos
devem ser realocados para esse novo dropdown. O itemVeículos
deve ser o primeiro do menu. -
Modifique o formulário de
Estou Interessado
disponível em https://testes.autoforce.com.br/autoforce-ford/novos/territory-2022.
Adicione os seguintes campos: - 1 Select com as opções: `SUV`, `Senda`, `Hatch` e `Pickup`; - 1 Textarea com placeholder `Mensagem`.
- 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
-
Codifica a seguinte interface.
-
Não há necessidade de criar um dropdown nos botões do header. Crie um hyperlink para o telefone e um para o WhatsApp.
-
Link do vídeo para a área
Conheça o BMW
: https://www.youtube.com/watch?v=cFyrTEYyq64
Parte I
- Para cada arquivo .js, copiar todo o código e colar no console da respectiva página.
Parte II
- Clonar o repositório na sua máquina:
git clone [email protected]:JonasVasconcelos/Autoforce.git
- Rodar no plugin live server do VS Code
- 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.