-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
275 lines (204 loc) · 8.38 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
// ACCOUNTS
const user1 = {
user: 'Dan Angelin',
transfers: [40, 12, -45, 200, 2, 50, ],
pass: 1234
}
const user2 = {
user: 'Rey Skywalker',
transfers: [-30, 34, 11, 6, -50, -33, 88],
pass: 1234
}
const user3 = {
user: 'Kylo Ren',
transfers: [20, -5, 22, 52, 30, -31],
pass: 1234
}
const user4 = {
user: 'Immanuel Bryony',
transfers: [44, 12, -45, 22],
pass: 1234
}
const allUsers = [user1, user2, user3, user4];
// ELEMENTS
const containerTransactions = document.querySelector('.history__transactions');
const currentBalance = document.querySelector('.balance');
const containerBalance = document.querySelector('.current__balance')
const iconAng = `<img class="icon" src="img/icon.svg">`;
const btnLogin = document.querySelector('.btn__login');
const btnLogout = document.querySelector('.btn__logout');
const inputUser = document.querySelector('.input__user');
const inputPass = document.querySelector('.input__pass');
const labelWelcome = document.querySelector('.welcome__message');
const appUi = document.querySelector('.app');
const valueIn = document.querySelector('.value__in');
const valueOut = document.querySelector('.value__out');
const inputTransferTo = document.querySelector('.form__to');
const inputTransferAmount = document.querySelector('.form__value--amount');
const btnTrasferrTo = document.querySelector('.btn__transfer--to');
const bntSort = document.querySelector('.btn__sort');
const btnAdd = document.querySelector('.btn__add');
const inputAdd = document.querySelector('.form__value--add');
const btnClose = document.querySelector('.btn__close');
const inputCloseUser = document.querySelector('.form__close--user');
const inputClosePass = document.querySelector('.form__close--pass');
const labelDate = document.querySelector('.label__date')
const displayTransfers = function(transfers, sort = false) {
containerTransactions.innerHTML = '';
const transfSort = sort ? transfers.slice().sort((a, b) =>
a - b) : transfers;
transfSort.forEach(function(transf, i) {
const type = transf > 0 ? 'deposit' : 'withdrawal';
const html = `<div class="history__row">
<div class="history__type type__${type}">${i + 1} ${type}</div>
<div class="history__value">${transf} <img class="icon" src="img/icon.svg"></div>
</div>`;
containerTransactions.insertAdjacentHTML('afterbegin', html)
})
}
const createUserLogin = function(accUser) {
accUser.forEach(function(usr) {
usr.username = usr.user.toLowerCase().split(' ').map
(name => name[0]).join('');
});
}
createUserLogin(allUsers);
// Current Balance
const displayBalance = function(acc) {
acc.balance = acc.transfers.reduce((acc ,transf) => acc + transf, 0);
currentBalance.innerHTML = `${acc.balance} ${iconAng}`;
};
// Calc summary
const calcSummary = function (transfers) {
const incomes = transfers.filter(transf => transf > 0).reduce((acc, transf) => acc + transf, 0);
valueIn.innerHTML = `${incomes} ${iconAng}`;
const out = transfers.filter(transf => transf < 0).reduce((acc, transf) => acc + transf, 0);
valueOut.innerHTML = `${Math.abs(out)} ${iconAng}`;
}
const updateUI = function(user) {
// Display transfers
displayTransfers(user.transfers);
// Display balance
displayBalance(user);
// Display summary
calcSummary(user.transfers)
}
let currentUser;
const now = new Date();
const day = `${now.getDate()}`.padStart(2, 0);
const month = `${now.getMonth() + 1}`.padStart(2, 0);
const year = now.getFullYear();
const hour = `${now.getHours()}`.padStart(2, 0);
const min = `${now.getMinutes()}`.padStart(2, 0);
labelDate.textContent = `As of ${day}/${month}/${year}, ${hour}:${min}`;
btnLogin.addEventListener('click', function(e) {
e.preventDefault();
currentUser = allUsers.find(acc => acc.username === inputUser.value);
if(currentUser?.pass === +(inputPass.value));
// Display box with details and welcome message
labelWelcome.textContent = `Welcome back, ${currentUser.user}`;
appUi.style.opacity = 100;
containerBalance.style.opacity = 100;
// Clear input
inputUser.value = inputPass.value = '';
document.querySelector(".login__form").style.display = "none";
inputPass.blur();
btnLogout.style.display = "block"
updateUI(currentUser);
});
btnLogout.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(".login__form").style.display = "block";
labelWelcome.textContent = `Login in to get started`;
appUi.style.opacity = 0;
containerBalance.style.opacity = 0;
btnLogout.style.display = "none"
})
// Transfer between users
btnTrasferrTo.addEventListener('click', function(e) {
e.preventDefault();
const amount = +(inputTransferAmount.value);
const receiverUser = allUsers.find(user => user.username === inputTransferTo.value);
inputTransferAmount.value = inputTransferTo.value = '';
if(amount > 0 && receiverUser && currentUser.balance >= amount && receiverUser?.username !==
currentUser.username) {
currentUser.transfers.push(-amount);
receiverUser.transfers.push(amount);
updateUI(currentUser);
}
});
// Sort Transfers
let sorted = false;
bntSort.addEventListener('click', function(e) {
e.preventDefault();
displayTransfers(currentUser.transfers, !sorted);
sorted = !sorted;
});
// Add Amount
btnAdd.addEventListener('click', function(e) {
e.preventDefault();
const amount = +(inputAdd.value);
if(amount > 0 && currentUser.transfers.some(transf => transf >= amount * 0.5)) {
// Add transfer
currentUser.transfers.push(amount);
// Update
updateUI(currentUser);
}
inputAdd.value = '';
});
// Close Account
btnClose.addEventListener('click', function(e) {
e.preventDefault();
if(inputCloseUser.value === currentUser.username && +(inputClosePass.value) === currentUser.pass) {
const index = allUsers.findIndex(user => user.username === currentUser.username)
// Delete user
allUsers.splice(index, 1);
// Hide UI
appUi.style.opacity = 0;
containerBalance.style.opacity = 0;
labelWelcome.textContent = `Login in to get started`;
}
inputCloseUser.value = inputClosePass.value = '';
});
// Widget Top Crypto Price
const pRank1 = document.querySelector('.rank_1');
const rank1Logo = document.querySelector('.rank_1--logo');
const rank1Name = document.querySelector('.rank_1--name');
const rank1Price = document.querySelector('.rank_1--price');
const pRank2 = document.querySelector('.rank_2');
const rank2Logo = document.querySelector('.rank_2--logo');
const rank2Name = document.querySelector('.rank_2--name');
const rank2Price = document.querySelector('.rank_2--price');
const pRank3 = document.querySelector('.rank_3');
const rank3Logo = document.querySelector('.rank_3--logo');
const rank3Name = document.querySelector('.rank_3--name');
const rank3Price = document.querySelector('.rank_3--price');
const pRank4 = document.querySelector('.rank_4');
const rank4Logo = document.querySelector('.rank_4--logo');
const rank4Name = document.querySelector('.rank_4--name');
const rank4Price = document.querySelector('.rank_4--price');
const pRank5 = document.querySelector('.rank_5');
const rank5Logo = document.querySelector('.rank_5--logo');
const rank5Name = document.querySelector('.rank_5--name');
const rank5Price = document.querySelector('.rank_5--price');
async function widget() {
const response = await fetch(`https://api.coinstats.app/public/v1/coins?skip=0&limit=5¤cy=USD`);
const widgetCrypto = await response.json();
try {
const cryptoCoins = widgetCrypto.coins
const cryptoItem = document.querySelector('.widget__crypto');
cryptoCoins.forEach(coin => {
cryptoItem.insertAdjacentHTML('beforeend', `
<div class="crypto">
<p class="rank"># ${coin.rank}</p>
<img src="${coin.icon}" alt="logo_crypto" />
<p class="rank--name">${coin.name}</p>
<p class="rank--price">${coin.price.toFixed(2)} $</p>
</div>
`)
})
} catch (error) {
console.log(error);
}
}
widget()