-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
99 lines (80 loc) · 2.97 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const transactionsUl = 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')
const localStorageTransactions = JSON.parse(localStorage
.getItem('transactions'))
let transactions = localStorage
.getItem('transactions') !== null ? localStorageTransactions : []
const removeTransaction = ID => {
transactions = transactions.filter(transaction =>
transaction.id !== ID)
updateLocalStorage()
init()
}
// função para inserir os elementos na DOM
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')
li.classList.add(CSSClass);
li.innerHTML = `
${transaction.name}
<span> ${operator} R$ ${amountWithoutOperator} </span>
<button class = "delete-btn" onClick = "removeTransaction(${transaction.id})">
x
</button>
`
transactionsUl.prepend(li) // o metodo append inseri o elemento que ele recebeu como argumento
}
const updateBalanceValues = () => {
const transactionsAmounts = transactions.map(transaction => transaction.amount)
const total = transactionsAmounts
.reduce((accumulator, transaction) => accumulator + transaction, 0)
.toFixed(2) // to fixed, informa a quantidade de decimais
const income = transactionsAmounts
.filter(value => value > 0)
.reduce((accumulator, value) => accumulator + value, 0)
.toFixed(2)
const expense = Math.abs( transactionsAmounts
.filter(value => value < 0)
.reduce((accumulator, value) => accumulator + value, 0))
.toFixed(2)
balanceDisplay.textContent = `R$ ${total}`
incomeDisplay.textContent = `R$ ${income}`
expenseDisplay.textContent = `R$ ${expense}`
}
const init = () => {
transactionsUl.innerHTML = ''
transactions.forEach(addTransactionIntoDOM)
updateBalanceValues()
}
init()
const updateLocalStorage = () => {
localStorage.setItem('transactions', JSON.stringify(transactions))
}
//gerar ids aleatorios
const generateID = () => Math.round(Math.random() * 1000)
form.addEventListener('submit', event => {
event.preventDefault()
const transactionName = inputTransactionName.value.trim()
const transactionAmount = inputTransactionAmount.value.trim()
if(transactionName === '' || transactionAmount === ''){
alert('Por favor, preencha tanto o novo quanto o valor da transação')
return
}
const transaction = {
id: generateID(),
name: transactionName,
amount: Number(transactionAmount)
}
transactions.push(transaction)
init()
updateLocalStorage()
inputTransactionName.value = ''
inputTransactionAmount.value = ''
})