Controle de Despesas JavaScript

🔗 JavaScript

🚀 Uma aplicação para controle financeiro, controle de despesas. Feita com HTML5, CSS3 e JavaScript puro. Na qual o usuário poderá inserir as informações de suas transações financeiras, tanto quando ganhos como despesas que irão sair. E serão refletidas na tela do navegador.

E ainda essa insformações estão salvar no browser, por meio da API do localStorage, na qual irá manter as informações salvas, mesmo que feche o navegador, ou reinicie ele (F5)

Features

Pode-se aplicar alguns conhecimentos adquiridos nesse projeto com o JavaScript, que são:

Hight-order Functions

map:
percorre o array da esquerda para a direita invocando uma função de retorno em cada elemento com parâmetros. Para cada chamada de retorno, o valor devolvido se torna o elemento do novo array. Depois que todos os elementos foram percorridos, map() retorna o novo array com todos os elementos “traduzidos”.

const transactionAmounts = transactions.map(({ amount }) => amount);

filter:
percorre o array da esquerda para a direita invocando uma função de retorno em cada elemento. O valor retornado deve ser um booleano que indica se o elemento será mantido ou descartado. Depois de todos os elementos terem sido analisados, filter() retorna um novo array com todos os elementos que retornaram como verdadeiro.

const getIncome = transactionAmounts => transactionAmounts
  .filter(value => value > 0)
  .reduce((accumulator, value) => accumulator + value, 0)
  .toFixed(2);

reduce:
percorre o array da esquerda para a direita invocando uma função de retorno em cada elemento. O valor retornado é o valor acumulado passado de callback para callback. Depois de todos os elementos terem sido avaliados, reduce() retorna o valor acumulado/concatenado.

const getTotal = transactionAmounts => transactionAmounts
  .reduce((accumulator, transaction) => accumulator + transaction, 0)
  .toFixed(2);

Destructuring

A sintaxe de atribuição via desestruturação (destructuring assignment) é uma expressão JavaScript que possibilita extrair dados de arrays ou objetos em variáveis distintas.

Antes de aplicar o Destructuring

const addTransactionIntoDOM = transaction => {
  const operator = transaction.amount < 0 ? '-' : '+';
  const CSSClass = transaction.amount < 0 ? 'minus' : 'plus';
  const amountWithoutOperator = Math.abs(transaction.amount);
  const li = document.createElement('li');

Após a aplicação do Destructuring

const addTransactionIntoDOM = ({ amount, name, id }) => {
  const operator = amount < 0 ? '-' : '+';
  const CSSClass = amount < 0 ? 'minus' : 'plus';
  const amountWithoutOperator = Math.abs(amount);
  const li = document.createElement('li');

Com a aplicação do Destructuring, pode-se eliminar a sintaxe de objeto ponto propriedade. Que cópia do objeto que estava sendo passado por parâmetro o valores da propriedade amount, name, id

Pré-requisitos

Para pode começar a usa-lo, poderá fazer de duas formas diferentes

clonando o repositório

# Clone este repositório
$ git clone https://github.com/CristianoDaSilvaFerreira/controle-de-despesas-javascript.git

# Acesse a pasta do projeto no terminal/cmd
$ cd controle-de-despesas-javascript

# Execute a aplicação (caso use o VSCode - e tenha essa função)
$ code .

# O VSCode irá abrir com os arquivos necessários para fazer alterações caso haja
    
# O site irá roda localmente no Browser

Ou poderá acessa-lo diretamente na hospetagem do meu repositório no GitPage Controle de Despesas JavaScript