/js-unit-tests

Primary LanguageJavaScript

Projeto Trybewarts Wizarding School 🧙

Este projeto foi desenvolvido como parte do curso da Trybe, com o objetivo de criar um formulário interativo para a escola de bruxos Trybewarts. A seguir, você encontrará informações sobre como configurar e executar o projeto, bem como detalhes sobre as funcionalidades implementadas.

Tecnologias Utilizadas

  • JavaScript
  • HTML
  • CSS

Funcionalidades do Projeto

A página desenvolvida apresenta as seguintes características:

  1. Barra Superior: Uma barra verde na parte superior da página com a classe header e cor de fundo rgb(50, 167, 145).
  2. Logotipo da Trybewarts: O logotipo está posicionado dentro do header.
  3. Formulário de Login: Um formulário com inputs de email e senha, que dispara alertas com base na validação dos dados inseridos.
  4. Título Centralizado: Um título "Trybewarts" centralizado no cabeçalho.
  5. Formulário Principal: Um formulário dentro da tag main com largura de 675px.
  6. Direção Vertical: Os itens do formulário estão organizados verticalmente.
  7. Logo ao Lado Direito: A logo da Trybewarts posicionada ao lado direito da página.
  8. Inputs: Campos para nome, sobrenome e email no formulário.
  9. Select: Um campo select com opções de casas.
  10. Campos lado a lado: Campos de Nome/Sobrenome e Email/Casa posicionados lado a lado.
  11. Inputs do Tipo Radio: Três inputs do tipo radio para a escolha da família.
  12. Checkboxes: Seis opções de checkbox para conteúdos desejados.
  13. Campo de Avaliação: Um campo de avaliação de 1 a 10 sobre a Trybewarts.
  14. Textarea: Uma textarea com limite de 500 caracteres para feedback.
  15. Checkbox de Validação: Um checkbox para validar as informações digitadas.
  16. Botão de Enviar: Um botão de submit para enviar o formulário.
  17. Habilitação do Botão: O botão de enviar é habilitado ou desabilitado conforme o checkbox.
  18. Rodapé: Um rodapé com direitos reservados à Trybewarts.

Requisitos Bônus

  • Contador de Caracteres: Um contador que atualiza o número de caracteres enquanto a textarea é digitada.
  • Substituição do Formulário: Ao clicar no botão Enviar, o formulário é substituído pelas informações preenchidas pelo usuário.
  • Versão Mobile: O formulário é responsivo e otimizado para dispositivos móveis.

Instruções de Instalação e Uso

  1. Faça um Fork do Repositório:

  2. Clone o Repositório Forkado:

    • Após fazer o fork, copie o link do seu repositório e clone-o para o seu computador:
    git clone git@github.com:seu-usuario/project-trybewarts.git

  3. Navegue até o Diretório do Projeto:

    cd project-trybewarts

  4. Instale as Dependências:

    npm install

  5. Visualize o Projeto:

    • Abra o arquivo index.html em seu navegador para visualizar o projeto.

Lembre-se de substituir "seu-usuario" pelo seu nome de usuário no GitHub para que o link do fork seja correto.