-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.js
129 lines (120 loc) · 3.42 KB
/
app.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// Selectors
let currentBalance = document.querySelector('.current-balance');
let income = document.querySelector('.income');
let expense = document.querySelector('.expense');
let historyUl = document.querySelector('.history ul');
let addTransaction = document.querySelector('.add-transaction-button');
let itemNameInput = document.querySelector('.item-name-input');
let itemAmountInput = document.querySelector('.item-amount-input');
// Dummy Transictions
let dummyTrans = [
{
id: 1,
text: 'Sallery',
amount: 1000,
},
{
id: 2,
text: 'Shirt',
amount: -20,
},
{
id: 3,
text: 'laptop',
amount: -120,
},
{
id: 4,
text: 'book',
amount: 100,
},
];
// All Transictions
let transactions = dummyTrans;
// Get Value From User
function addTransactionFunc(e) {
e.preventDefault();
if (itemNameInput.value.trim() == '' || itemAmountInput.value.trim() == '') {
alert('Please Fill Text and Amount Field');
} else {
let transaction = {
id: randomId(),
text: itemNameInput.value,
amount: Number(itemAmountInput.value),
};
transactions.push(transaction);
addToDom(transaction);
updateBalance(transaction);
itemNameInput.value = '';
itemAmountInput.value = '';
}
}
// Random id
function randomId() {
return Math.floor(Math.random() * 1000000000000);
}
// Remove Transaction
function removeTransaction(id) {
transactions = transactions.filter((transaction) => transaction.id !== id);
console.log(transactions);
init();
}
// Add History List to DOM
function addToDom(transaction) {
let sign = transaction.amount < 0 ? '-' : '+';
// Create History Item
let historyItem = document.createElement('li');
historyItem.classList.add(
'history-item',
'd-flex',
'flex-wrap',
'justify-content-between',
'bg-white',
'shadow-sm',
'p-2',
'my-3',
'rounded'
);
historyItem.classList.add(transaction.amount < 0 ? 'minus' : 'plus');
historyItem.innerHTML = `
<span class="item-name p-2 text-dark">${transaction.text}</span>
<span class="item-amount ms-auto p-2 text-dark">${
sign + Number(Math.abs(transaction.amount)).toFixed(2)
}</span>
<span onclick="removeTransaction(
${transaction.id})" class="delete-history-item bg-danger p-2 rounded"
><img
src="trash.svg"
alt="trash"
class="img-fluid text-white"
/></span>`;
historyUl.appendChild(historyItem);
}
// Update Balance
function updateBalance() {
let amounts = transactions.map((transaction) => transaction.amount);
let currentBalanceVal = amounts.reduce((acc, item) => acc + item, 0);
let incomeBalance = amounts
.filter((amount) => amount > 0)
.reduce((acc, item) => acc + item, 0);
let expenseBalance = amounts
.filter((amount) => amount < 0)
.reduce((acc, item) => acc + item, 0);
// Udating Balance in DOM
if (Math.abs(incomeBalance) < Math.abs(expenseBalance)) {
currentBalance.innerHTML = '-$' + Math.abs(currentBalanceVal).toFixed(2);
} else {
currentBalance.innerHTML = '$' + Math.abs(currentBalanceVal).toFixed(2);
}
income.innerHTML = `$${Math.abs(incomeBalance).toFixed(2)}`;
expense.innerHTML = `$${Math.abs(expenseBalance).toFixed(2)}`;
}
// Initialize
function init() {
historyUl.innerHTML = '';
transactions.forEach(addToDom);
updateBalance();
}
init();
// Form Submit
addTransaction.addEventListener('click', addTransactionFunc);