👩💻 To-Do List 👨💻
Checkpoint Front End II
✨ Objetivo
Este projeto consiste em um pequeno aplicativo de gerenciamento de tarefas, dentro do qual podemos realizar as seguintes atividades:
- Ver tarefas pendentes.
- Ver tarefas terminadas.
- Marcar uma tarefa como terminada.
- Criar tarefas novas.
- Visualizar a data de criação de uma tarefa.
- Remover tarefas.
Além do citado acima, implementaremos um sistema de autenticação de usuários, que inclui o processo de registro e login.
🗂 Estrutura
Iremos seguir parte do que está proposto, mas incrementar ideias e padrões de desenvolvimento adquiridos no 1º bimestre em Programação Imperativa I .
Iremos utilizar Módulos no Javascript.
A utilização de módulos é essencial para a organização e qualidade do código.
Com eles é possível criar blocos de código,que podem ser reutilizados em diversos lugares e contextos.
Assim, podemos criá-los com responsabilidades determinadas e utilizar em conjunto com outros módulos para realizar tarefas mais complexas.
Ao fazer o clone do projeto a disposição das pastas e aquivos segue o padrão: :open_file_folder: Checkpoint_2-Frontend_2
- 📄 index.html
- 📄 signup.html
- 📄 tarefas.html
- 📁 assets - imagens
- 📁 styles - css
- 📂 constants - arquivos javascript que sao de dados constantes e não irão alterar.
- 📄 URL_BASE.js - nesse arquivo se encontra o link para acessar a API.
- 📂 scripts - javascript
- 📄 main.js
- 📄 index.js
- 📄 login.js
- 📄 tarefas.js
- 📂 requisicoes - arquivos javascript de requisições para API.
- 📄 createUser.js
- 📄 loginUser.js
- 📄 alterUser.js
- 📄 tasksUser.js
- 📄 deleteTasks.js
Como dito acima, módulos são recursos muito úteis, uma vez que proporcionam qualidade e eficiência maior do código produzido, além de proporcionar agilidade no desenvolvimento de novas funcionalidades. Tudo isto devido a não ser necessário duplicar ou triplicar o mesmo bloco para utilizar em diferentes lugares. O módulo é apenas importado e todas as suas funcionalidades são adicionadas ao código que o importou.
📝 Normalizações e validações esperadas
Pagina de Login:
-
Ambos os campos devem ser normalizados (ex: retirar espaços desnecessários);
-
Nenhum dos campos pode ser vazio/nulo;
-
O email deve ser de um tipo válido (ex: aplicar expressões regulares);
-
O botão de acesso deve ser habilitado apenas quando todos os campos do formulário estiverem validados corretamente.
Página de Cadastro:
-
Ambos os campos devem ser normalizados (ex: retirar espaços desnecessários);
-
Nenhum dos campos pode ser vazio/nulo;
-
O email deve ser de um tipo válido (ex: aplicar expressões regulares);
-
Os campos “senha” e “repetir senha” devem possuir a mesma informação para serem considerados válidos;
-
O botão de cadastro deve ser habilitado apenas quando todos os campos do formulário estiverem validados corretamente.
Página de Tarefas
-
Criar tarefas;
-
Vizualizar tarefas pendentes;
-
Deve-se marcar uma tarefa como concluída
-
Vizualizar tarefas concluídas;
-
As tarefas precisam estar com a data de criação no formato DD/MM/AAAA
-
Os valores/textos tarefas podem ser alteradas
-
Uma tarefa pode ser deletada
Responsividade
-
A aplicação deve ser responsiva.
-
Deve-se atender as telas mais comuns
Extras
-
Mostrar mensagem de erro caso seja acessada a página de tarefas sem uma autorização.
-
Redirecioanr o usuário para a página de login caso tente acessar diretamente as tarefas.
-
Criar uma animação de loading
-
Animar as entradas e saída de dados
Experiência
Clique aqui seu cadastro e comece hoje mesmo a organizar suas tarefas do cotidiano.