-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
97 lines (80 loc) · 2.77 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
const balance = document.getElementById('balance');
const money_plus = document.getElementById('money-plus');
const money_minus = document.getElementById('money-minus');
const list = document.getElementById('list');
const form = document.getElementById('form');
const description = document.getElementById('description');
const amount = document.getElementById('amount');
const dummyTransactions = [
{ id: 1, description: 'Lunch', amount: -20 },
{ id: 2, description: 'Check', amount: 400 },
{ id: 3, description: 'Books', amount: -12 },
{ id: 4, description: 'New TV', amount: -150 },
];
let transactions = dummyTransactions;
// Add a new transaction
function addTransaction(e) {
e.preventDefault();
if (description.value.trim() === '' || amount.value.trim() === '') {
alert('Please enter description and amount');
} else {
const transaction = {
id: generateID(),
description: description.value,
amount: +amount.value
}
transactions.push(transaction);
addTransactionDOM(transaction);
updateValues();
description.value = '';
amount.value = '';
}
}
// Generate random ID
function generateID() {
return Math.floor(Math.random() * 1000000000);
}
// Add transactions to DOM list
function addTransactionDOM(transaction) {
// Get sign (either positive + or negative -)
const sign = transaction.amount < 0 ? '-' : '+';
// Create list item element
const item = document.createElement('li');
// Add class based on sign value
item.classList.add(transaction.amount < 0 ? 'minus' : 'plus');
item.innerHTML = `
${transaction.description} <span>${sign}${Math.abs(transaction.amount)}</span>
<button class="delete-btn" onClick="removeTransaction(${transaction.id})">x</button>
`;
list.appendChild(item);
}
// Update the balance, income, and expense
function updateValues() {
const amounts = transactions.map(transaction => transaction.amount);
const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
const income = amounts
.filter(item => item > 0)
.reduce((acc, item) => (acc += item), 0)
.toFixed(2);
const expense = (amounts
.filter(item => item < 0)
.reduce((acc, item) => (acc += item), 0) * -1)
.toFixed(2);
balance.innerText = `$${total}`;
money_plus.innerText = `+$${income}`;
money_minus.innerText = `-$${expense}`;
}
// Remove transaction by Id
function removeTransaction(id) {
transactions = transactions.filter(transaction => transaction.id !== id);
init();
}
// Init app
function init() {
list.innerHTML = '';
transactions.forEach((item) => addTransactionDOM(item));
updateValues();
}
init();
// Event listeners
form.addEventListener('submit', addTransaction);