Project Trybewarts

Descrição do Projeto

Implementação de uma página de formulário da Escola de Magia de Trybewarts, em que as pessoas estudantes poderão enviar seus feedbacks sobre ela. O tema desse projeto é baseado na obra 'Harry Potter', de J. K. Rowling, já que programar é o mais próximo que podemos chegar de algo verdadeiramente mágico!

Habilidades desenvolvidas

• HTML & CSS: Formulários;
• Bibliotecas JavaScript: Bootstrap;
• CSS Flexbox;
• Responsividade;

---

Requisitos Obrigatórios

1. Crie uma barra verde na parte superior da página.

A barra deve possuir a classe header, ser um flex container e ter a cor de fundo rgb(50, 167, 145)

O que será testado:

• O elemento deve possuir a classe header;
• O elemento deve possuir a propriedade CSS display: flex;
• O elemento deve possuir a propriedade CSS background-color: rgb(50, 167, 145).

2. Adicione o logotipo da Trybewarts.

O logotipo deve estar dentro do header e ser um elemento img

• Crie uma tag img dentro do elemento com a classe header:
• Adicione a classe trybewarts-header-logo;
• Adicione o atributo src com o valor images/trybewarts-header-logo.svg;

O que será testado:

• O elemento img deve possuir a classe trybewarts-header-logo;
• O elemento img deve possuir o atributo src apontando para images/trybewarts-header-logo.svg.

3. Acrescente um formulário de login no header.

Crie um formulário de login com os inputs de email, senha e um botão para login. O formulário deve estar posicionado à direita da logo; O botão deve validar os dados inseridos no formulário de forma que um alerta seja disparado quando o email e a senha forem corretos, e outro alerta seja disparado quando os inputs email ou senha estiverem incorretos.

• Crie um formulário com a classe trybewarts-login;

• Crie o input de email dentro do formulário:

  • Adicione o atributo name com o valor email;
  • Adicione o atributo placeholder com o valor Email;

• Crie o input de senha dentro do formulário:

  • Adicione o atributo name com o valor password;
  • Adicione o atributo placeholder com o valor Senha;

• Crie um botão com o texto "Entrar";

  • Faça com que o formulário seja um flex container;
  • Faça com que o formulário fique à direita da logo;

• Valide o formulário:

  • Ao preencher o formulário e clicar no botão, será validado que:
  • Caso o email seja "tryber@teste.com" e a senha seja "123456", será emitido um alerta contendo o texto "Olá, Tryber!";
  • Em todos os outro casos deverá ser emitido um alerta contendo o texto "Email ou senha inválidos.";

De olho na dica 👀: adicione a propriedade flex que faz os elementos terem o espaçamento máximo entre eles no header

O que será testado:

• O formulário deve possuir a tag form e classe trybewarts-login;
• O formulário possui a propriedade CSS display: flex;
• O formulário está à direita da logo;
• Um dos inputs deve possuir o atributo name com valor igual a email e o atributo placeholder com valor igual a Email;
• Um dos inputs deve possuir o atributo name com valor igual a password e o placeholder com valor igual a Senha;
• O botão deve possuir o texto Entrar;
• O botão de login deve disparar um alert com o texto Email ou senha inválidos, no caso de erro de preenchimento dos dados;
• O botão de login deve disparar um alert com o texto Olá, Tryber!, no caso de preenchimento correto dos dados.

4. Crie um título com o texto "Trybewarts" centralizado dentro do Header.

Deve existir um elemento h1 com o texto Trybewarts, posicionado no meio do cabeçalho. Será necessário criar três elementos filhos para diagramar o cabeçalho

• Crie a tag h1 com o id igual a trybewarts-header-title;

• O título h1 deverá ter o texto "Trybewarts";

• O título deverá estar no meio da barra verde:

  • O header deve ter exatamente três elementos filhos;
  • O filho do meio deve ser o título;

O que será testado:

• O h1 deve possuir ID igual a trybewarts-header-title e com o texto Trybewarts;
• O elemento com a classe header deve possuir exatos 3 elementos filhos;
• O filho do meio do elemento com a classe header deve ser o título h1 com o texto Trybewarts.

5. Adicione um formulário no corpo da página.

Crie um formulário dentro de uma tag main. Ambos, formulário e tag main devem ser flex containers e a largura do formulário deve ser de 675px

• Crie um formulário com o ID igual a evaluation-form;
• Insira o formulário dentro de uma tag main;
• Faça com que o formulário seja um flex container;
• Faça com que o main, seja um flex containers;
• Adicione uma largura de 675px ao formulário.

O que será testado:

• O elemento form deve possuir o ID igual a evaluation-form;
• O elemento form deve estar dentro da tag main;
• O elemento main e o form deve possuir a propriedade CSS display: flex;
• O elemento form deve possuir a propriedade CSS width: 675px.

6. Faça com que a direção do formulário seja vertical.

A direção dos itens do formulário com o ID igual a evaluation-form devem estar na vertical, em coluna.

O que será testado:

• O elemento evaluation-form deve possuir a propriedade CSS flex-direction: column.

7. Adicione a logo da Trybewarts ao lado direito da página.

Crie um elemento com a tag img e modifique sua altura para 500px

• Crie um elemento img com o ID igual a trybewarts-forms-logo;
• Adicione o atributo src com o valor images/trybewarts-colored.svg;
• Adicione o estilo css height de 500px;

O que será testado:

• O elemento img deve possuir o ID igual a trybewarts-forms-logo;
• O elemento img deve possuir o atributo src com o valor images/trybewarts-colored.svg;
• O elemento img deve possuir o estilo css height de 500px.

8. Acrescente inputs de nome, sobrenome e email ao formulário.

Dentro do formulário adicione os inputs de nome, sobrenome e email

• Crie um input com o ID igual a input-name:

  • Adicione o atributo placeholder com o valor Nome;

• Crie um input com o ID igual a input-lastname:

  • Adicione o atributo placeholder com o valor Sobrenome;

• Crie um input com o ID igual a input-email:

  • Adicione o atributo placeholder com o valor Email.

O que será testado:

• O input para nome deve possuir o ID igual a input-name e placeholder Nome;
• O input para sobrenome deve possuir o ID igual a input-lastname e placeholder Sobrenome;
• O input para email deve possuir o ID igual a input-email e placeholder Email.

9. Acrescente um select ao formulário.

O formulário deve possuir um input tipo select, com as opções Gitnória, Reactpuff, Corvinode e Pytherina

• Crie um select com o ID igual a house;
• Adicione ao select:
  • A opção Gitnória com o ID igual a gitnoria-house e o atributo value igual a Gitnória;
  • A opção Reactpuff com o ID igual a reactpuff-house e o atributo value igual a Reactpuff;
  • A opção Corvinode com o ID igual a corvinode-house e o atributo value igual a Corvinode;
  • A opção Pytherina com o ID igual a pytherina-house e o atributo value igual a Pytherina.

O que será testado:

• O select deve possuir ID igual a house;
• O select deve possuir 4 opções;
• Uma das opções deve possuir text e value igual a Gitnória e ID igual a gitnoria-house;
• Uma das opções deve possuir text e value igual a Reactpuff e ID igual a reactpuff-house;
• Uma das opções deve possuir text e value igual a Corvinode e ID igual a corvinode-house;
• Uma das opções deve possuir text e value igual a Pytherina e ID igual a pytherina-house;

10. Posicione os campos de Nome e Sobrenome lado a lado.

Os campos de Nome e Sobrenome devem estar lado a lado, com o campo de Sobrenome à direita

O que será testado:

• O campo de Sobrenome deve estar à direita do campo de Nome.

11. Posicione os campos de Email e Casa lado a lado.

Os campos de Email e Casa devem estar lado a lado, com o campo de Casa à direita

O que será testado:

• O campo de Casa deve estar à direita do campo de Email.

12. Adicione 3 inputs do tipo radio ao formulário.

O formulário deve possuir um campo de entrada com 3 inputs, um abaixo do outro, do tipo radio para que a pessoa estudante escolha com qual família mais se identifica.

• Crie uma label com o ID igual a label-family e acrescente o texto "Qual sua família?";

• Adicione ao formulário os seguintes elementos:

  • um input do tipo radio com o atributo name igual a family e value igual a Frontend;
  • um input do tipo radio com o atributo name igual a family e value igual a Backend;
  • um input do tipo radio com o atributo name igual a family e value igual a FullStack;

• Posicione os radio buttons para ficar abaixo um do outro e na sequência: Frontend, Backend e FullStack;

• Posicione os radio buttons abaixo da label.

O que será testado:

• O elemento label com o id igual a label-family deve possuir o conteúdo de texto igual a Qual sua família?;
• O primeiro input deve possuir o tipo radio com o atributo name igual a family e value igual a Frontend;
• O segundo input deve possuir o tipo radio com o atributo name igual a family e value igual a Backend;
• O terceiro input deve possuir o tipo radio com o atributo name igual a family e value igual a FullStack;
• Os inputs do tipo radio devem estar um abaixo do outro na sequência Frontend, Backend e FullStack.
• Os inputs do tipo radio devem estar abaixo do texto da label

13. Crie inputs do tipo checkbox.

Os campos de entrada do tipo checkbox devem conter seis opções: Hofs, Jest, Promises, React, SQL, Python com a classe subject estando abaixo de uma label com ID igual a Qual conteúdo você está com mais vontade de aprender?

• Crie um elemento com o id igual a label-content e acrescente o texto "Qual conteúdo você está com mais vontade de aprender?";
• Crie um input do tipo checkbox com a classe subject e o value igual a HoFs;
• Crie um input do tipo checkbox com a classe subject o value igual a Jest;
• Crie um input do tipo checkbox com a classe subject o value igual a Promises;
• Crie um input do tipo checkbox com a classe subject o value igual a React;
• Crie um input do tipo checkbox com a classe subject o value igual a SQL;
• Crie um input do tipo checkbox com a classe subject o value igual a Python;
• Posicione as checkboxes abaixo da label.

O que será testado:

• O elemento label deve possuir o ID igual a label-content com conteúdo de texto igual a Qual conteúdo você está com mais vontade de aprender?;
• O primeiro input do tipo checkbox deve possuir a classe subject e o atributo value igual a HoFs;
• O segundo input do tipo checkbox deve possuir a classe subject e o atributo value igual a Jest;
• O terceiro input do tipo checkbox deve possuir a classe subject e o atributo value igual a Promises;
• O quarto input do tipo checkbox deve possuir a classe subject e o atributo value igual a React;
• O quinto input do tipo checkbox deve possuir a classe subject e o atributo value igual a SQL;
• O sexto input do tipo checkbox deve possuir a classe subject e o atributo value igual a Python;
• Os elementos checkbox então posicionados abaixo da label.

14. Crie um campo de avaliação.

O campo deve possuir 10 inputs do tipo radio para avaliar de 1 a 10 o nível de satisfação com a Trybewarts. Estes inputs devem ficar abaixo de uma label com texto Como você avalia a Trybewarts? e devem estar posicionados lado a lado.

• Crie uma label com o ID igual a label-rate e acrescente o texto "Como você avalia a Trybewarts?";

• Crie 10 radio buttons, contendo as opções de 1 a 10:

  • Adicione o atributo value com o valor de 1 a 10;
  • Adicione ao atributo name dos radios buttons o valor rate;

• Posicione os radio buttons de modo que fiquem lado a lado.

O que será testado:

• O elemento label deve possuir o ID igual a label-rate e o conteúdo de texto Como você avalia a Trybewarts?;
• Os 10 radio-buttons devem possuir o atributo name igual a rate;
• Os 10 radio-buttons devem possuir o atributo value de 1 a 10.
• Os 10 radio-buttons devem estar posicionados lado a lado.

15. Crie uma textarea.

Crie uma textarea com número máximo de caracteres igual à 500 abaixo de um label com texto Deixe seu comentário:

• Crie uma textarea;
• Crie uma label com a classe textarea e que possua o texto "Deixe seu comentário:";
• Adicione ao elemento textarea o limite de 500 caracteres.

O que será testado:

• O elemento label deve possuir a classe textarea e o texto Deixe seu comentário:;
• O elemento textarea deve possuir um limite de 500 caracteres.

16. Crie uma checkbox que servirá para validar as informações digitadas pela pessoa usuária.

Adicione um campo de entrada do tipo checkbox ao lado direito de uma label com texto "Você concorda com o uso das informações acima?"

• Crie um campo de entrada do tipo checkbox com o ID igual a agreement;
• Crie uma label com o ID igual a label-infos e que possua o texto "Você concorda com o uso das informações acima?";
• Posicione o checkbox ao lado da label.

O que será testado:

• O elemento label deve possuir o ID igual a label-infos e texto igual a Você concorda com o uso das informações acima?;
• O input deve ser do tipo checkbox com ID igual a agreement.

17. Crie um botão de "Enviar" para submeter o formulário.

Crie um botão do tipo submit com o texto Enviar para submeter o formulário.

• Crie um botão do tipo submit com o ID igual a submit-btn;
• Adicione o texto "Enviar" ao botão.

O que será testado:

• O botão deve possuir tipo submit
• O botão deve possuir id submit-btn
• O botão deve possuir o texto Enviar;

18. Habilite o botão "Enviar" após a validação do checkbox.

Faça com que o botão seja habilitado ou desabilitado de acordo com o checkbox criado.

• Desabilite o botão caso o checkbox não esteja selecionado;
• Habilite o botão caso o checkbox seja selecionado.

O que será testado:

• O botão deve estar inicialmente desabilitado;
• O botão deve se tornar habilitado ao marcar o checkbox com id igual a agreement;

19. Crie um rodapé ao final da página.

O rodapé deverá conter a tag footer e texto "Direitos reservados à Trybewarts©"

O que será testado:

• O elemento footer deve possuir o texto Direitos reservados à Trybewarts©.

---

Requisitos Bônus

20. Crie um contador de caracteres.

O contador deve possuir o número de caracteres, que deverá ser atualizado à medida que algo for digitado na textarea. O valor deve ser inicialmente de 500 e decrementar até 0 a medida que algo for escrito, ou incrementar à medida que caracteres forem sendo apagados.

• Crie o contador e adicione o ID igual a counter;
• Adicione ao contador o valor inicial de 500:
  • O contador deve variar entre 500 caracteres e 0;
• Decremente o contador à medida que caracteres forem sendo escritos no campo textarea;
• Incremente o contador à medida que caracteres forem sendo deletados no campo textarea;
• Adicione ao elemento textarea o ID igual a textarea.

O que será testado:

• O contador deve possuir ID igual a counter;
• O contador deve possuir valor inicial igual a 500;
• O elemento de classe textarea deve possuir um ID de mesmo nome;
• O contador deve ter seu valor atualizado conforme a pessoa usuária acrescente ou apague caracteres no elemento de ID textarea.

21. Substitua o formulário pelas informações da pessoa estudante.

Faça com que, ao clicar no botão Enviar, o formulário seja substituído pelas informações preenchidas pela pessoa estudante.

• Crie um elemento com ID igual a form-data e dentro dele:
  • Crie um campo que vai receber o nome digitado pela pessoa usuária, no formato Nome: Alguem Aqui;
  • Crie um campo que vai receber o email digitado pela pessoa usuária, no formato Email: email@mail.com;
  • Crie um campo que vai receber a casa escolhida pela pessoa usuária, no formato Casa: Casa Escolhida;
  • Crie um campo que vai receber a família selecionada pela pessoa usuária, no formato Família: Família Escolhida;
  • Crie um campo que vai receber os conteúdos selecionados pela pessoa usuária, no formato Matérias: Matérias, Marcadas, Aqui;

De olho na dica 👀 : os conteúdos devem estar separados por uma vírgula e um espaço

• Crie um campo que vai receber a avaliação selecionada pela pessoa usuária, no formato Avaliação: NotaAqui;
• Crie um campo que vai receber o comentário digitado pela pessoa usuária, no formato Observações: Observações aqui.
• Substitua os campos do formulário pelas informações da pessoa usuária;

O que será testado:

• O elemento de tag form com ID igual a form-data deve ser exibido na tela após o botão de enviar ser clicado;
• Um dos campos criados deve possuir um texto no formato Nome: -Nome- -Sobrenome- após o botão de enviar ser clicado;
• Um dos campos criados deve possuir um texto no formato Email: -Email- após o botão de enviar ser clicado;
• Um dos campos criados deve possuir um texto no formato Casa: -Casa- após o botão de enviar ser clicado;
• Um dos campos criados deve possuir um texto no formato Família: -Família- após o botão de enviar ser clicado;
• Um dos campos criados deve possuir um texto no formato Matérias: -Matérias Selecionadas- após o botão de enviar ser clicado;
• Um dos campos criados deve possuir um texto no formato Avaliação: -Avaliação- após o botão de enviar ser clicado;
• Um dos campos criados deve possuir um texto no formato Observações: -Observações- após o botão de enviar ser clicado;

22. Desenvolva a versão mobile do formulário Trybewarts

Realize o desenvolvimento da versão mobile do formulário Trybewarts

• Utilize media queries para inserir breakpoints para telas de diferentes tamanhos;
• Leve em conta a largura da tela e a experiência do usuário ao reorganizar o layout para dispositivos menores;
• Tente inserir um 'menu hambúrguer' na barra superior para lidar com o login usando javascript. Se não conseguir, tente criar uma página separada de login, uma prática muito comum;
• Deixe sua criatividade fluir! Preferimos não avaliar esse requisito justamente pra que você tenha liberdade para executar a responsividade da maneira que você achar mais agradável!