Criar esse tipo de projeto é muito bom para aprender e treinar uma tecnologia.

Além de criar do zero, é interessante implementar novas funcionalidades, porque isso vai fazendo com que um projeto pequeno comece a ganhar mais complexidade, os desafios vão aumentando e você vai aprendendo mais.

Para a tela de login, desenvolvi duas novas funcionalidades bem legais para o projeto.

A primeira delas é uma barra de carregamento do site, essa barra é útil para dar um feedback ao usuário sobre o carregamento. Em ambiente local o carregamento é rápido, mas em produção pode demorar um pouco mais, e esse recurso ajuda.

A outra funcionalidade é a validação dos campos do formulário, caso os campos estejam vazios e o usuário clique para fazer o login, o formulário não será enviado, e será mostrado uma linha vermelha abaixo de cada campo, indicando que é obrigatório.

Veja no vídeo como implementar essas duas funcionalidades bem legais.

— Tempos do vídeo —

  • 00:00 - Apresentação
  • 01:25 - Barra de progresso
  • 04:42 - Validação do formulário

— Links —
💻 Código fonte: https://github.com/VitorCeron/Formulario_Login

📜 Artigo relacionado: https://programandosolucoes.dev.br/2021/05/25/login-parte-2/(abrir em uma nova aba)

#html #css #javascript #web-development

Tela de login - parte 2 - validação do formulário e barra de carregamento da tela
1.85 GEEK