- CURSO: ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
- DISCIPLINA: RESPONSIVE WEB DEVELOPMENT
- PROFESSOR: ALEXANDRE C. DE JESUS
- TURMA: 1TDS
- Você deve criar um projeto html para realizar este checkpointde nome NOMEGRUPO-CP3,onde nomegrupo é o nome do seu grupo do Challenger seguido de um CP3.
- Este projeto deve ser desenvolvido em grupo (o grupo do Challenger).
- A IDE a ser utilizada deve ser o VS-Code.-Obrigatório o versionamento.
- Todos os membros devem participar do projeto.
- Mínimo de commits por membro da equipe: 10 commits-Mínimo de commits do projeto: 30 commits
- A estilização é obrigatória e a cargo da equipe.
- Adicionar no arquivo de integrantes a URL do repositório e do Gitpages.(OBRIGATÓRIO)
- RM: 99632 - Gabriel Eringer de Oliveira (GEdO23)
- RM: 551616 - Yago Marques de Souza Farah (YagoFarah)
- No arquivo index.htmldeve ser criado umformulário de cadastro contendo os seguintes campos para serem validados:
(8 Pts)
- Primeiro nome:
- mínimo de 5 caracteres digitados;
- campo não pode ser vazio.
- Segundo nome:
- mínimo de 5 caracteres digitados;
- campo não pode ser vazio.
- Email:
- mínimo de 5 caracteres digitados;
- campo não pode ser vazio;
- verificar na string se existe o caractere “@”.
- Senha:
- mínimo de 6 caracteres digitados;
- máximo de 8 caracteres digitados;
- campo não pode ser vazio.
- Confirmação de Senha:
- Comparar com a senhapara garantir que seja igual.
Validação dos campos do formulário:
A - A validação decampos deformuláriosnão podeser realizada através deatributos HTML, somente pelo Javascript. Ex: required, pattern.
B - A validação deve ser realizada tanto com alterações do estilo visual do elemento que é preenchido, quanto com alertas em janelas.
C - Todos os campos devem ser validados.
D – Os campos devem ser validados tanto durante a digitação dos dados, também no momento do submit dos dados.
E – A validação somente pode ser realizada através de eventos no contexto raiz (somente no código Javascript),e não através de eventos inline.
F – Todo o procedimento de validação dos dados deve ser realizado no arquivo cp3.js.
- Crie um efeito de Dark mode na página:
(2 Pts)
- Crie um efeito de Dark Modepara a página de modo que ao clicarmos em um ícone na página index.html, todo o contexto da página se altere de modo que fique com um contraste escuro. Veja que não basta alterar o BackGroundColor da página, pois o texto pode ficar escuro e outros elementos podem ficar perdidos e não visíveis.
- Crie uma estratégia quefaça com que todos os elementos fiquem visíveis nesse modo.
Aplicação do Dark Mode:
A - A aplicação do Dark Mode só pode ser realizada através do Javascript.
B - Pode ser inseridos novos atributos através do Javascript nos elementos.
C - Todo o procedimento de validação dos dados deve ser realizado no arquivo cp3.js.
- Entrega:
- O projeto deve serentregueno TEAMS em um arquivo compactado.Ou seja, como você já realizou o versionamento do projeto e consolidou todas as atualizações na Branch main.
- Basta ir até o botão code do seu repositório e ir até a opção Download ZIP. Pegue o arquivo e envie para o TEAMS.
Somente um aluno do grupo entrega o projeto os demais não precisam entregar, pois seus nomes já estão no arquivo integrantes.- A entrega do projeto deve ser realizada no TEAMs na tarefa que foi criada onde deve possuir os seguintes artefatos:
- a) arquivo index.html
- b) arquivo cp3.js
- c) arquivo index.css
- d) arquivo integrantes.txt (Neste arquivo deve ser adicionado os nomes dos integrantes do grupo).
- Critérios:
- Além do mencionado nos pontos (1 e 2), podem influenciar na avaliação também:
- Boas Práticas
- Semântica
Obs: Atraso na entrega irá custar 20 pontos.