Skip to content

DH-Checkpoints/Checkpoint_2-FrontEnd_2

Repository files navigation

👩‍💻 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.

2022-07-15-20-30-46-_1_.mp4

👏 Integrantes do grupo