-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
124 lines (90 loc) · 2.87 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
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
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 text = document.getElementById("text");
const amount = document.getElementById("amount");
// const dummyTransactions = [
// { id: 1, text: "Flower", amount: -20 },
// { id: 2, text: "Salary", amount: 300 },
// { id: 3, text: "Book", amount: -10 },
// { id: 4, text: "Camera", amount: 150 },
// ];
const localStorageTransactions = JSON.parse(
localStorage.getItem("transactions")
);
let transactions =
localStorage.getItem("transactions") !== null ? localStorageTransactions : [];
// Add a transaction
function addTransaction(e) {
e.preventDefault();
if (text.value.trim() === "" || amount.value.trim() === "") {
alert("Please add test and amount");
} else {
const transaction = {
id: generateId(),
text: text.value,
amount: +amount.value,
};
transactions.push(transaction);
addTransactionDOM(transaction);
updateValues();
updateLocalStorage();
text.value = "";
amount.value = "";
}
}
//Generate a random ID
function generateId() {
return Math.floor(Math.random() * 1000000);
}
//Add transactions to DOM list
function addTransactionDOM(transaction) {
//Get sign
const sign = transaction.amount < 0 ? "-" : "+";
const item = document.createElement("li");
//Add class based on value
item.classList.add(transaction.amount < 0 ? "minus" : "plus");
item.innerHTML = `${transaction.text}<span>${sign}${Math.abs(
transaction.amount
)}</span><button class="delete-btn" onclick="removeTransaction(${
transaction.id
})">x</button>`;
list.appendChild(item);
}
//Update balance, income + 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 a transaction(ID)
function removeTransaction(id) {
transactions = transactions.filter((transaction) => transaction.id !== id);
updateLocalStorage();
init();
}
//Update local storage transactions
function updateLocalStorage() {
localStorage.setItem("transactions", JSON.stringify(transactions));
}
//Initialize app
function init() {
list.innerHTML = "";
transactions.forEach(addTransactionDOM);
updateValues();
updateLocalStorage();
}
init();
form.addEventListener("submit", addTransaction);