📦 projeto concluído com sucesso

index.html

@@ -28,11 +28,7 @@ <h4>Despesas</h4>
 
       <h3>Transações</h3>
 
-      <ul id="transactions" class="transactions">
-        <!-- <li class="minus">
-          Salário <span>-$400</span><button class="delete-btn">x</button>
-        </li> -->
-      </ul>
+      <ul id="transactions" class="transactions"></ul>
 
       <h3>Adicionar transação</h3>
 

js/script.js

@@ -0,0 +1,133 @@
+const transactionUl = document.querySelector('#transactions');
+const incomeDisplay = document.querySelector('#money-plus');
+const expenseDisplay = document.querySelector('#money-minus');
+const balanceDisplay = document.querySelector('#balance');
+const form = document.querySelector('#form');
+const inputTransactionName = document.querySelector('#text');
+const inputTransactionAmount = document.querySelector('#amount');
+
+// Método para salvar as informações no localStorage
+const localStorageTransactions = JSON.parse(localStorage
+  .getItem('transactions'));
+let transactions = localStorage
+.getItem('transactions') !== null ? localStorageTransactions : []
+
+// Método para remover uma transação
+const removeTransaction = ID => {
+  transactions = transactions.filter(transaction => 
+    transaction.id !== ID);
+  updateLocalStorage();
+  init();
+} // removeTransaction;
+
+// Método de adicionar uma transação
+const addTransactionIntoDOM = ({ amount, name, id }) => {
+  // Obtendo o operador matemático
+  const operator = amount < 0 ? '-' : '+';
+  const CSSClass = amount < 0 ? 'minus' : 'plus';
+  const amountWithoutOperator = Math.abs(amount);
+  const li = document.createElement('li');
+
+  li.classList.add(CSSClass);
+  li.innerHTML = 
+  ` 
+    ${name} 
+    <span>${operator} R$ ${amountWithoutOperator}</span>
+    <button class="delete-btn" onClick="removeTransaction(${id})">x</button>
+  `
+  transactionUl.append(li);  
+} // addTranscationIntoDOM;
+
+// Método de recepimento de valores das despesas das transações
+const getExpenses = transactionAmounts => Math.abs(transactionAmounts
+  .filter(value => value < 0)
+  .reduce((accumulator, value) => accumulator + value, 0))
+  .toFixed(2); // getExpenses();
+
+// Método reduce reduz o "array" para um único componente
+
+// Método filter retorna um novo array que o filter estar gerando. O Método icome gerar um novo array usando o filter somanto os valores positivos
+const getIncome = transactionAmounts => transactionAmounts
+  .filter(value => value > 0)
+  .reduce((accumulator, value) => accumulator + value, 0)
+  .toFixed(2); //getIncome();
+
+// Método para exibir o soldo total
+const getTotal = transactionAmounts => transactionAmounts
+  .reduce((accumulator, transaction) => accumulator + transaction, 0)
+  .toFixed(2);
+
+// Método de atualização das informações das transações
+const updateBalanceValues = () => {
+  const transactionAmounts = transactions.map(({ amount }) => amount);
+
+  const total = getTotal(transactionAmounts);
+
+  const income = getIncome(transactionAmounts);
+
+  const expense = getExpenses(transactionAmounts);
+
+  // Exibindo o soldo total no display
+  balanceDisplay.textContent = `R$ ${total}`;
+  // Exibindo o valor total das receitas no display
+  incomeDisplay.textContent = `R$ ${income}`;
+  // Exibindo o valor total despesas no display
+  expenseDisplay.textContent = `R$ ${expense}`;
+
+} // updateBalanceValues();
+
+// A função init que executará o estado de preenchimento das aplicações quando a página for carregada
+const init = () => {
+  transactionUl.innerHTML = '';
+  transactions.forEach(addTransactionIntoDOM);
+  updateBalanceValues();
+} // init();
+
+init();
+
+// Função que irá inserir as informações no localStorage
+const updateLocalStorage = () => {
+  localStorage.setItem('transactions', JSON.stringify(transactions));
+}
+
+// Função para gerar ID aleatório
+const generateID = () => Math.round(Math.random() * 1000);
+
+// Método para adicionar as transações no array
+const addToTransactionArray = (transactionName, transactionAmount) => {
+  transactions.push({
+    id: generateID(),
+    name: transactionName,
+    amount: Number(transactionAmount)
+  });
+} // addToTransactionArray();
+
+// Método para limpar os inputs
+const clearInputs = () => {
+  inputTransactionName.value = '';
+  inputTransactionAmount.value = '';
+} // clearInputs();
+
+// Método para adicionar os componentes do form
+const handleFormSubmit = event => {
+  event.preventDefault();
+
+  const transactionName = inputTransactionName.value.trim();
+  const transactionAmount = inputTransactionAmount.value.trim();
+  const isSomeInputEmpty = transactionName === '' || transactionAmount === '';
+
+  // Verificando se os inputs estão preenchidos
+  if (isSomeInputEmpty) {
+    alert('Por favor, preencha tanto o nome quando o valor da transação');
+    return;
+  }
+
+  addToTransactionArray(transactionName, transactionAmount);
+  init();
+  updateLocalStorage();
+  clearInputs();
+
+} // form();
+
+// Método de observação de eventos no form
+form.addEventListener('submit', handleFormSubmit)