🏦 K2 Banco Digital
Projeto educacional desenvolvido para praticar lógica de programação, JavaScript, manipulação do DOM, HTML, CSS, Git e GitHub por meio da evolução contínua de um sistema bancário.
A versão atual adiciona uma página de login responsiva para controlar o acesso visual ao sistema. O login funciona apenas no front-end e utiliza credenciais simuladas para fins de estudo.
📌 Status do projeto
🚧 Projeto em desenvolvimento
Versão atual: v4.0.0
🎯 Objetivo
O objetivo do projeto é transformar gradualmente um sistema bancário executado com prompt() e alert() em uma aplicação visual completa.
Durante o desenvolvimento, são praticados:
- Lógica de programação;
- JavaScript;
- Manipulação do DOM;
- Eventos;
- Validação de formulários;
- HTML semântico;
- CSS responsivo;
- Git e GitHub;
- Branches;
- Commits;
- Pull Requests;
- Tags;
- Releases;
- Versionamento semântico.
🆕 Novidades da v4.0.0
A versão v4.0.0 inicia a migração do projeto para uma interface visual.
Nesta versão, foi criada uma página de login utilizando HTML, CSS, JavaScript e manipulação do DOM.
Principais mudanças
- Criação de uma página de login;
- Utilização do
index.html como página inicial;
- Redirecionamento para
painel.html após o login;
- Campos de e-mail e senha;
- Validação de campos vazios;
- Validação das credenciais;
- Mensagens de erro exibidas na própria página;
- Opção para mostrar ou esconder a senha;
- Limpeza automática das mensagens ao digitar;
- Envio do formulário pelo botão ou pela tecla
Enter;
- Layout responsivo;
- Aplicação da identidade visual do K2 Banco Digital;
- Utilização da fonte Inter;
- Utilização de variáveis CSS.
🔐 Credenciais de teste
Utilize as seguintes credenciais para acessar o sistema:
E-mail: clienteK@k2banco.com
Senha: jovemtech
As credenciais são utilizadas apenas para simular um login durante os estudos.
⚠️ Aviso sobre autenticação
O login da versão v4.0.0 é apenas uma simulação feita no front-end.
As credenciais ficam armazenadas no JavaScript e podem ser visualizadas pelo navegador. Além disso, o arquivo painel.html ainda pode ser acessado diretamente pela URL.
Esta versão não utiliza:
- Backend;
- Banco de dados;
- Criptografia de senha;
- Sessões;
- Tokens;
- Proteção real de rotas;
sessionStorage ou localStorage para autenticação.
Uma autenticação segura será implementada futuramente após o estudo de desenvolvimento backend.
✨ Funcionalidades atuais
Página de login
- Campo de e-mail;
- Campo de senha;
- Botão para entrar;
- Checkbox para mostrar ou esconder a senha;
- Validação de campos vazios;
- Validação de credenciais incorretas;
- Mensagem de erro na página;
- Limpeza da mensagem ao alterar os campos;
- Redirecionamento para o painel;
- Funcionamento pela tecla
Enter;
- Layout responsivo.
Sistema bancário
- Cadastro básico do cliente;
- Consulta de saldo;
- Depósitos;
- Saques;
- Validação de valores;
- Histórico de transações;
- Extrato completo;
- Filtro de depósitos;
- Filtro de saques;
- Busca por ID;
- Resumo da conta;
- Exibição dos dados do cliente;
- Formatação monetária no padrão brasileiro.
📋 Histórico de versões
v4.0.0 — Página de login com DOM
- Criação da interface de login;
- HTML semântico;
- CSS responsivo;
- Identidade visual do K2 Banco Digital;
- Fonte Inter;
- Variáveis CSS;
- Captura de elementos com DOM;
- Validação de formulário;
- Mensagens na página;
- Mostrar e esconder senha;
- Redirecionamento para o painel.
v3.1.1 — Validações e correções
- Validação do cadastro;
- Tratamento de cancelamentos;
- Tratamento de espaços;
- Validação aprimorada de depósitos e saques;
- Validação da busca por ID;
- Formatação monetária brasileira;
- Padronização das mensagens.
v3.1.0 — Filtros, busca e cálculos
- Implementação de
filter();
- Implementação de
find();
- Implementação de
reduce();
- Filtro de depósitos;
- Filtro de saques;
- Busca de transação por ID;
- Totais calculados com
reduce().
v3.0.0 — Objetos e dados da conta
- Cadastro básico do cliente;
- Dados organizados em objetos;
- Conta como objeto interno;
- Transações armazenadas como objetos;
- IDs únicos;
- Data e horário;
- Exibição dos dados da conta.
v2.1.0 — Resumo da conta
- Numeração das transações;
- Total depositado;
- Total sacado;
- Quantidade de operações;
- Saldo no resumo.
v2.0.1 — Correções e melhorias
- Tratamento de operações canceladas;
- Tratamento de campos vazios;
- Validação de valores;
- Melhorias nas mensagens.
v2.0.0 — Histórico e extrato
- Histórico de transações;
- Registro de depósitos;
- Registro de saques;
- Implementação do extrato;
- Utilização de Arrays.
v1.1.0 — Validações
- Bloqueio de depósitos inválidos;
- Bloqueio de saques inválidos;
- Verificação de saldo insuficiente;
- Tratamento de opções inválidas.
v1.0.0 — Primeira versão
- Consulta de saldo;
- Depósito;
- Saque;
- Menu interativo;
- Funções bancárias.
🛠️ Tecnologias utilizadas
- HTML5;
- CSS3;
- JavaScript;
- Git;
- GitHub;
- Visual Studio Code.
🌿 Fluxo de desenvolvimento
- Criar uma branch;
- Desenvolver as alterações;
- Fazer commits organizados;
- Enviar a branch para o GitHub;
- Abrir um Pull Request;
- Fazer o merge na
main;
- Criar a tag da versão;
- Publicar a Release;
- Apagar a branch concluída.
📖 Aviso
Este é um projeto educacional.
O sistema não possui conexão com bancos reais, não utiliza dados financeiros verdadeiros e não deve ser utilizado para operações bancárias reais.
A página de login não representa uma autenticação segura.
👨💻 Autor
Desenvolvido por Kherlysson Ryann durante os estudos de lógica de programação, JavaScript e desenvolvimento front-end.