- Sobre
- Features
- Adicionar/Remover Transações
- Cálculo automático
- Dark Mode na Página de Finanças
- WebStorage
- Página Finanças Responsiva e Dinâmica
- Landing Page Responsiva e Dinâmica
- Landing Page com EasterEggs
- Como Trocar entre páginas
- Tecnologias
- O que Aprendi?
- Autor
- Known Bugs
- Botão da Landing Page as vezes não clica
O dev.finances é uma aplicação de controle financeiro, onde é possível cadastrar e excluir transações e ver o saldo de entrada e saída.
Projeto para administração financeira pessoal, desenvolvido durante a Maratona Discover com o professor Mayk Brito da Rocket Seat.
Em conjunto com o Projeto do canal Coder coder para criar uma Landing Page Completa e Profissional para a empresa fictícia Dev.Finances
Conheça a Dev.Finances a próxima geração de Banco Digital, utilize seu Controlador de Finanças Gratuito e gerencie suas despesas, com um design bonito e simples, suas transações ficam salvas e podem ser acessadas a qualquer momento pelo seu navegador.
Venha fazer parte e seja um dos primeiros a aproveitar!
- Adicione o Nome da Empresa, Descrição da Compra, Valor e Data
Com isso é possivel criar uma lista organizada e detalhada dos seus gastos, facilitando seu controle de despesas. - Para colocar Despesas, coloque um "-" antes do número
Desse jeito você coloca os Custos e Valores Negativos das suas despesas. - Clique no Traço Vermelho para remover
Assim é facil remover qualquer transação que precisar.
- Depois de Adicionar suas transações, o cálculo é Automatico
Não se preocupe, apenas vá adicionando e veja a mágica acontecer.
- Clique no botão emcima da página para mudar para o Modo Noturno
De noite?, vista cansada?, sem problemas, com o Modo Noturno, o site continua agradável e bonito. (Eu também prefiro o Dark Mode)
- Os dados são salvos no Armazém do Navegador
Medo de perder as alterações?, desde que você não limpe os dados ou troque de navegador, eles continuarão salvos ali para você.
- O site se Adapta dependendo do Aparelho que o abriu
Prefere usar o Celular ou o Tablet?, sem problemas, ele continua funcionando tão bem quanto no Desktop.
- O site se Adapta dependendo do Aparelho que o abriu
Quer ver novamente a beleza da página inicial?, ela fica diferente dependendo do seu aparelho, teste em todos e veja as diferenças.
- A Landing Page tem algumas Referências
Nada como caçar umas Referências por ai, não é?, bom, a Landing Page tem algumas para serem caçadas!.
Para fazer trocar entre a Landing Page e a Página de Finanças(Parte principal),
é só clicar no Botão "Experimente" enquanto estiver na Landing Page.
E no Link "Home" enquanto estiver na Página de Finanças
Nesse projeto foi utilizado HTML, CSS, SASS, JAVASCRIPT
HTML - Utilizado para fazer o Esqueleto das duas páginas.
CSS - Utilizado para fazer a Página de Finanças.
SASS - Utilizado para fazer a Landing Page.
Javascript - Utilizado para fazer as funções das duas Páginas.
Esse foi um projeto de quase 2 semanas, Foi o meu primeiro contato com JavaScript e com SASS, aprendi muita coisa e sinto que estou muito mais preparado para desafios similares que irei fazer no futuro, e também me fez gostar muito de UX Design, talvez eu entre nesse caminho também no futuro.
Gostaria de Agradecer primeiramente ao incrivel professor Mayk Brito da Rocket Seat, que me ensinou durante a Maratona Discover para iniciantes na programação, graças a didática muito boa e leveza com que ele demonstra os passo-a-passo, eu consegui tirar muito proveito e me divertir com a realização da Página de Finanças desse projeto.
Também quero agradecer a Professora americana Jessica Chan do canal Coder coder, que mostrou um pouco de como são feito os sites modernos profissionais, com as técnicas modernas e o uso principal do SASS durante a criação da Landing Page para esse projeto.
Foram professores e cursos separados, mas eu juntei eles por que a ideia era muito boa e fazia sentido, e estou satisfeito com o resultado! ;)
Feito com 💜 e dedicação por mim Guilherme G Cadilhe Aka: Bobnini.
- As vezes ao clicar no botão "Experimente" na Landing Page, em vez de ser direcionado, aparece uma borda quadrada preta no botão, mas que depois que clicado novamente, te direciona normalmente a Página de Finanças