Teste FrontEnd UpNext

Olá,

Queremos saber um pouco mais das suas habilidades em HTML, CSS e JS!

Neste repositório constam alguns arquivos iniciais junto com todas as imagens necessárias.

Objetivo

Seu objetivo é construir uma aplicação sem uso de frameworks (Ex: React, Angular entre outros) de acordo com esse layout:

• Desktop
• Mobile
• Styleguide

A aplicação deve ser responsiva, portanto, se adaptar ao desktop e mobile.

Funcionamento do JS

Para que o projeto funcione como o desenhado, os selects devem trazer a lista de plantas de acordo com o que foi selecionado. Sendo estas as opções:

• sunlight ["no", "low", "high"]
• water ["regularly", "daily", "rarely"]
• pets [true, false]

No arquivo plants.json constam todas plantas e suas caracteristicas, a partir destas informações você pode criar a lista de plantas. Por exemplo:

• Caso o usuário selecione a opção "low" no select "sunlight", deve ser apresentada a lista de plantas que contenham o valor de "sun" igual a "low".
• Se na sequência o usuário selecionar a opção "true" no select "pets", deve ser apresentada a lista de plantas que contenham o valor de "toxicity" igual a "false", alem de limpar a seleção dos outros selects.

** A lista de plantas pode ser gerada dinâmicamente pelo js, ou ser montada em html, com o js sendo responsável apenas por exibir/ocultar o resultado correto.

Como serei avaliado?

Para facilitar o entendimento e deixar mais claro como usar melhor o tempo, você será avaliado sob essas dimensões abaixo, mas não deixe de dar o seu melhor caso não tenha alguma coisa na lista que você acredite ser bom, os detalhes contam :D !

• Layout
  • Fidelidade
  • Responsividade
• HTML
  • Semantica
  • Indentação e Organização de Código
• CSS
  • Legibilidade
  • Organização
  • Boas práticas
  • Escalabilidade
• JS
  • Legibilidade
  • Organização
  • Boas práticas

Pronto para começar o desafio?

• Faça um "fork" desse repositório na sua conta do Github
• Crie uma branch com o seu nome e sobrenome ex: patrick-santos
• Após completar o desafio, faça o merge da branch criada para master
• Finalizando esses itens, envie o link do seu repositório para o email [email protected] com cópia para [email protected]

** Valorizamos pessoas que queiram aprender, então caso tenha alguma dificuldade, ou não consiga realizar todo teste, pode entrar em contato comigo para te ajudar: [email protected]