Skip to content

Página Monibank: Formulário de cadastro de conta fictícia com diversos tipos de validações de dados sendo alguns no próprio HTML e outros via JavaScript. Ao fazer o seu cadastro, o usuário é direcionado à uma página onde ele deve tirar uma foto direto do navegador, usando a câmera do dispositivo, para envio dos dados e abertura de conta.

Notifications You must be signed in to change notification settings

hyanguimaraes/Monibank

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Monibank

📝 Descrição do projeto

Página Monibank: Formulário de cadastro de conta fictícia com diversos tipos de validações de dados sendo alguns no próprio HTML e outros via JavaScript. Ao fazer o seu cadastro, o usuário é direcionado à uma página onde ele deve tirar uma foto direto do navegador, usando a câmera do dispositivo, para envio dos dados e abertura de conta.

O objetivo deste estudo era aprender a fazer diversos tipos de validações de dados usando HTML5 e JavaScript: Além das validações de campos obrigatórios e limites mínimos e máximos de caracteres em certos campos, também foi aplicada, através do JavaScript, uma verificação de número de CPF que, primeiramente invalida números repetidos como "111.111.111-11" e também se o CPF digitado é valido, através da verificação dos dois últimos dígitos do mesmo. Também via JavaScript, foi criada uma verificação de data de nascimento, de modo que o usuário só pode continuar com o cadastro caso seja maior de idade (18 anos ou mais). As informações fornecidas pelo usuário, juntamente com a imagem são salvas, neste caso, no local storage do browser do usuário, uma vez que o foco do projeto eram as validações em sí.

Assim, os arquivos HTML e CSS da foram fornecidos pela Alura para estudo no curso "JavaScript: Validando formulários". Os scripts foram separados em módulos:

  1. script.js: Possui as chamadas das funções de verificações dos campos de input e mensagens de erro personalizadas para cada campo, assim como toda a lógica necessária para que isto ocorra. Aqui também se encontra as funções para envio das informações para o local storage.
  2. validacaoCPF.js: Possui exclusivamente o código responsável pela validação do campo de CPF com verificação de números repetidos e digitos do CPF.
  3. validacaoIdade.js: Possui exclusivamente o código responsável pela validação de maioridade do usuário.
  4. camera.js: Possui toda o código de acesso necessária para manipulação do DOM, ativação da câmera do dispositivo do usuário, captura da imagem e envio para o local storage.

O projeto Monibank foi todo desenvolvido seguindo a metodologia Mobile first.

✅ Versão mobile 428px 📱

✅ Versão tablet 1024px 📱

✅ Versão desktop 1728px 🖥️

🔗 Acesse o projeto 🔗 Acesse o meu portfólio 🔗 Acesse o meu LinkedIn

📚 Página do curso "JavaScript: Validando Formulários" na plataforma Alura

🛠️ Tecnologias utilizadas

  • HTML5
  • CSS3
  • JavaScript

✍🏻 Autor


Hyan Nascimento Guimarães

About

Página Monibank: Formulário de cadastro de conta fictícia com diversos tipos de validações de dados sendo alguns no próprio HTML e outros via JavaScript. Ao fazer o seu cadastro, o usuário é direcionado à uma página onde ele deve tirar uma foto direto do navegador, usando a câmera do dispositivo, para envio dos dados e abertura de conta.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published