diurivjWorkshopsTalksBlog

Crea tu App de Finanzas con JavaScript

09 July, 2020

En este workshop aprenderemos a crear una aplicación de finanzas personales, para poner en práctica conocimientos básicos de JavaScript y la manipulación del DOM.

Presentación

Siéntete libre de revisar esta presentación como referencia.

Starter code

Aquí podrás encontrar todo lo que necesitas para empezar a tomar el workshop:

Edit nervous-sara-mr1pq

Resultado final

Así es como quedará nuestra app al final:

Edit twilight-feather-jlb5j

Code snippets

HTML Expense Structure

<li>
  <div>
    <span>Tortillas</span>
    -
    <span>$15.00</span>
  </div>
  <span class="remove">x</span>
</li>

Selectors

// budget variables
const budgetInput = document.querySelector('#add-budget-input')
const budgetButton = document.querySelector('.add-budget button')
const budgetInfo = document.querySelector('.budget p:last-child')

// expenses variables
const expenseList = document.querySelector('.expenses-list ul')
const expenseNameInput = document.querySelector('#add-expense-name-input')
const expenseAmountInput = document.querySelector('#add-expense-amount-input')
const expenseButton = document.querySelector('.add-expense button')
const expenseInfo = document.querySelector('.expenses p:last-child')

// balance variables
const balanceInfo = document.querySelector('.balance p:last-child')

Update budget

function updateBudget() {
  // Set the value on the dashboard budget section
  budgetInfo.innerText = budgetInput.value

  // Set the value on the dashboard balance section
  balanceInfo.innerText = budgetInput.value

  // Clean the input
  budgetInput.value = ''
}

Add expenses to dashboard

function addExpenseToDashboard() {
  // Get the previous amount of expenses from dashboard
  const previousAmount = Number(expenseInfo.innerText)

  // Set the value on the dashboard expenses section
  expenseInfo.innerText = previousAmount + Number(expenseAmountInput.value)
}

Add expense to list

function addExpenseToList() {
  // Get the name and the amount of the expense
  const expenseName = expenseNameInput.value
  const expenseAmount = expenseAmountInput.value

  // Create the expense in a tag of HTML
  const expense = document.createElement('li')

  // Append the content of the expense
  expense.innerHTML = `
  <div>
    <span>${expenseName}</span>
    -
    <span>$${expenseAmount}</span>
  </div>
  `

  const deleteButton = document.createElement('span')
  deleteButton.setAttribute('class', 'remove')
  deleteButton.onclick = function () {
    const previousAmount = Number(expenseInfo.innerText)
    expenseList.removeChild(this.parentNode)
    expenseInfo.innerText = previousAmount - Number(expenseAmount)
    updateBalance()
  }
  deleteButton.innerHTML = 'x'

  expense.appendChild(deleteButton)

  // Append the expense to the list
  expenseList.appendChild(expense)
}

Update balance

function updateBalance() {
  const totalExpense = Number(expenseInfo.innerText)
  const budget = Number(budgetInfo.innerText)
  const balance = budget - totalExpense
  balanceInfo.innerText = balance
}

Add expense

function addExpense() {
  addExpenseToDashboard()
  addExpenseToList()
  updateBalance()
  expenseNameInput.value = ''
  expenseAmountInput.value = ''
}

Todo el contenido fue creado por Diego Vazquez