O objetivo deste projeto é focar na evolução do desenvolvimento da linguagem javascript. Para isso, decidi criar um gerenciador financeiro, que apresentará as despesas e receitas pessoais, e o saldo total. O usuário será capaz de inserir e excluir itens adicionados à lista.
🔨 Javascript 🔨 CSS3 🔨 HTML5
Estou muito feliz de concluir este projeto. Totalmente autoral, e principalmente por ter realizado a criação e execução da linha de código javascript de forma autônoma. Desta vez, todo o conhecimento que possuo no momento sobre javascript foram colocados em práticas, sem a necessidade de "copiar e colar" códigos na internet, como no projeto anterior da calculadora.
O primeiro código que desenvolvi para criação da lista ao submeter os lançamentos no input foram conforme observa-se abaixo:
var lancamento = document.createElement('div')
lancamento.setAttribute('class','lcm')
lancamento.innerHTML = `<p>${Descricao.value}</p><p>${(Number(Valor.value)).toFixed(2)}</p><p>${tipo}</p>`
lancamento.style.display = 'flex'
lancamento.style.justifyContent = 'space-between'
lancamento.style.fontSize = '15px'
lancamento.style.margin = '10px 0px'
var printInput = document.querySelector('#printInput')
printInput.appendChild(lancamento)
Esse era o resultado:
O grande problema, era que os lançamentos estavam sendo apresentados de forma desordenada na tela. Dependendo da descrição de cada lançamento, o texto não se alinhava com os demais, e visualmente isso era péssimo para o projeto. Posteriormente, lembrei que poderia utilizar tabelas em html, e decidi alterar a criação de elementos por tabela. isso resolveu totalmente a questão de alinhamentos, uma vez que cada item adicionado, se alinhava exatamente conforme desejado.
var lancamento = document.createElement('tr')
lancamento.setAttribute('class','lcm')
var lanDescricao = document.createElement('td')
var lanValor = document.createElement('td')
var lanTipo = document.createElement('td')
lanDescricao.innerText = `${Descricao.value}`
lanValor.innerText = `${(Number(Valor.value)).toFixed(2)}`
lanTipo.innerText = `${tipo}`
lancamento.appendChild(lanDescricao)
lancamento.appendChild(lanValor)
lancamento.appendChild(lanTipo)
var printCab = document.querySelector('.printCab')
printCab.appendChild(lancamento)
Esse foi o resultado com alteração para tabela:
Outras alterações realizadas durante o desenvolvimento do projeto, foi o desmembramento de funções. Inicialmente, todo o código estava dentro do evento clique do botão input, porém, com o decorrer, fui fazendo testes, e criando funções com os códigos que estavam dentro da função principal, e isso ajudou principalmente a não necessitar repetir o código para a execução de outro evento.
⚆ Cabeçalho de página com Logo e Nome do Produto
⚆ Página Inicial de identificação
⚆ Página de ação com cabeçalho de valores de entradas, saídas e saldo total
⚆ Página de ação com formulários de entradas de descrição, valores e tipo de lançamento
⚆ Página de ação com botão de input
⚆ Página de ação com lista de lançamentos
⚆ Todos os demais itens de tela, como orientação financeira, proporções de despesas e receitas por dia, proproção de despesas por real gasto, botão salvar, foram conteúdos que tive a idéia de colocar durante a execução do projeto.
Situação Financeira Saudável:
Situação Financeira Apertada:
Situação Financeira Preocupante:
