Skip to content
This repository was archived by the owner on Oct 1, 2025. It is now read-only.

Commit abcc629

Browse files
ralvarezdevralvarezdev
committed
feat: Completed Work in Arrays Section of the Bankist Project
1 parent cecd9e6 commit abcc629

File tree

6 files changed

+667
-0
lines changed

6 files changed

+667
-0
lines changed

‎05-arrays-bankist/Bankist-flowchart.png‎

834 KB
Loading

‎05-arrays-bankist/icon.png‎

3.83 KB
Loading

‎05-arrays-bankist/index.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<link rel="shortcut icon" type="image/png" href="./icon.png" />
9+
10+
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap" rel="stylesheet" />
11+
12+
<link rel="stylesheet" href="./style.css" />
13+
<title>Bankist</title>
14+
</head>
15+
16+
<body>
17+
<!-- TOP NAVIGATION -->
18+
<nav>
19+
<p class="welcome">Log in to get started</p>
20+
<img src="./logo.png" alt="Logo" class="logo" />
21+
<form class="login">
22+
<input type="text" placeholder="user" class="login__input login__input--user" />
23+
<!-- In practice, use type="password" -->
24+
<input type="text" placeholder="PIN" maxlength="4" class="login__input login__input--pin" />
25+
<button class="login__btn">&rarr;</button>
26+
</form>
27+
</nav>
28+
29+
<main class="app">
30+
<!-- BALANCE -->
31+
<div class="balance">
32+
<div>
33+
<p class="balance__label">Current balance</p>
34+
<p class="balance__date">
35+
As of <span class="date">05/03/2037</span>
36+
</p>
37+
</div>
38+
<p class="balance__value">0000€</p>
39+
</div>
40+
41+
<!-- MOVEMENTS -->
42+
<div class="movements">
43+
</div>
44+
45+
<!-- SUMMARY -->
46+
<div class="summary">
47+
<p class="summary__label">In</p>
48+
<p class="summary__value summary__value--in">0000€</p>
49+
<p class="summary__label">Out</p>
50+
<p class="summary__value summary__value--out">0000€</p>
51+
<p class="summary__label">Interest</p>
52+
<p class="summary__value summary__value--interest">0000€</p>
53+
<button class="btn--sort">&downarrow; SORT</button>
54+
</div>
55+
56+
<!-- OPERATION: TRANSFERS -->
57+
<div class="operation operation--transfer">
58+
<h2>Transfer money</h2>
59+
<form class="form form--transfer">
60+
<input type="text" class="form__input form__input--to" />
61+
<input type="number" class="form__input form__input--amount" />
62+
<button class="form__btn form__btn--transfer">&rarr;</button>
63+
<label class="form__label">Transfer to</label>
64+
<label class="form__label">Amount</label>
65+
</form>
66+
</div>
67+
68+
<!-- OPERATION: LOAN -->
69+
<div class="operation operation--loan">
70+
<h2>Request loan</h2>
71+
<form class="form form--loan">
72+
<input type="number" class="form__input form__input--loan-amount" />
73+
<button class="form__btn form__btn--loan">&rarr;</button>
74+
<label class="form__label form__label--loan">Amount</label>
75+
</form>
76+
</div>
77+
78+
<!-- OPERATION: CLOSE -->
79+
<div class="operation operation--close">
80+
<h2>Close account</h2>
81+
<form class="form form--close">
82+
<input type="text" class="form__input form__input--user" />
83+
<input type="password" maxlength="6" class="form__input form__input--pin" />
84+
<button class="form__btn form__btn--close">&rarr;</button>
85+
<label class="form__label">Confirm user</label>
86+
<label class="form__label">Confirm PIN</label>
87+
</form>
88+
</div>
89+
90+
<!-- LOGOUT TIMER -->
91+
<p class="logout-timer">
92+
You will be logged out in <span class="timer">05:00</span>
93+
</p>
94+
</main>
95+
96+
<!-- <footer>
97+
&copy; by Jonas Schmedtmann. Don't claim as your own :)
98+
</footer> -->
99+
100+
<script src="./script.js"></script>
101+
</body>
102+
103+
</html>

‎05-arrays-bankist/logo.png‎

4.16 KB
Loading

‎05-arrays-bankist/script.js‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
'use strict';
2+
3+
/////////////////////////////////////////////////
4+
/////////////////////////////////////////////////
5+
// BANKIST APP
6+
7+
// Data
8+
const account1 = {
9+
owner: 'Jonas Schmedtmann',
10+
movements: [200, 450, -400, 3000, -650, -130, 70, 1300],
11+
interestRate: 1.2, // %
12+
pin: 1111,
13+
};
14+
15+
const account2 = {
16+
owner: 'Jessica Davis',
17+
movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
18+
interestRate: 1.5,
19+
pin: 2222,
20+
};
21+
22+
const account3 = {
23+
owner: 'Steven Thomas Williams',
24+
movements: [200, -200, 340, -300, -20, 50, 400, -460],
25+
interestRate: 0.7,
26+
pin: 3333,
27+
};
28+
29+
const account4 = {
30+
owner: 'Sarah Smith',
31+
movements: [430, 1000, 700, 50, 90],
32+
interestRate: 1,
33+
pin: 4444,
34+
};
35+
36+
const accounts = [account1, account2, account3, account4];
37+
38+
// Elements
39+
const labelWelcome = document.querySelector('.welcome');
40+
const labelDate = document.querySelector('.date');
41+
const labelBalance = document.querySelector('.balance__value');
42+
const labelSumIn = document.querySelector('.summary__value--in');
43+
const labelSumOut = document.querySelector('.summary__value--out');
44+
const labelSumInterest = document.querySelector('.summary__value--interest');
45+
const labelTimer = document.querySelector('.timer');
46+
47+
const containerApp = document.querySelector('.app');
48+
const containerMovements = document.querySelector('.movements');
49+
50+
const btnLogin = document.querySelector('.login__btn');
51+
const btnTransfer = document.querySelector('.form__btn--transfer');
52+
const btnLoan = document.querySelector('.form__btn--loan');
53+
const btnClose = document.querySelector('.form__btn--close');
54+
const btnSort = document.querySelector('.btn--sort');
55+
56+
const inputLoginUsername = document.querySelector('.login__input--user');
57+
const inputLoginPin = document.querySelector('.login__input--pin');
58+
const inputTransferTo = document.querySelector('.form__input--to');
59+
const inputTransferAmount = document.querySelector('.form__input--amount');
60+
const inputLoanAmount = document.querySelector('.form__input--loan-amount');
61+
const inputCloseUsername = document.querySelector('.form__input--user');
62+
const inputClosePin = document.querySelector('.form__input--pin');
63+
64+
/////////////////////////////////////////////////
65+
/////////////////////////////////////////////////
66+
// LECTURES
67+
68+
const currencies = new Map([
69+
['USD', 'United States dollar'],
70+
['EUR', 'Euro'],
71+
['GBP', 'Pound sterling'],
72+
]);
73+
74+
const createUsernames = accounts =>
75+
accounts.forEach(account =>
76+
account.username = account.owner.toLowerCase().split(' ').map(name => name[0]).join(''));
77+
createUsernames(accounts);
78+
console.log(accounts);
79+
80+
const updateUI = () =>
81+
{
82+
displayMovements(currAccount.movements);
83+
calcDisplayBalance(currAccount.movements);
84+
calcDisplaySummary(currAccount.movements);
85+
};
86+
87+
let currAccount;
88+
89+
btnLogin.addEventListener('click', event =>
90+
{
91+
event.preventDefault();
92+
93+
currAccount = accounts.find(acc => acc.username == inputLoginUsername.value);
94+
95+
if (currAccount?.pin !== Number(inputLoginPin.value))
96+
return;
97+
98+
labelWelcome.textContent = `Welcome back, ${ currAccount.owner.split(' ')[0] }`;
99+
100+
containerApp.style.opacity = 1;
101+
102+
inputLoginUsername.value = inputLoginPin.value = '';
103+
104+
inputLoginUsername.blur();
105+
inputLoginPin.blur();
106+
107+
updateUI();
108+
109+
const eurToUSD = 1.1;
110+
111+
const movementsUSD = currAccount.movements.map(mov => Math.trunc(mov * eurToUSD));
112+
113+
console.log(currAccount.movements);
114+
console.log(movementsUSD);
115+
116+
const movementsDescription = currAccount.movements.map((mov, i) =>
117+
`Movement ${ i + 1 }: You ${ mov > 0 ? 'deposited' : 'withdrew' } ${ Math.abs(mov) } `);
118+
console.log(movementsDescription);
119+
120+
const deposits = currAccount.movements.filter(mov => mov > 0);
121+
console.log(deposits);
122+
123+
const withdrawals = currAccount.movements.filter(mov => mov < 0);
124+
console.log(withdrawals);
125+
126+
const balance = currAccount.movements.reduce((acc, cur) => acc += cur, 0);
127+
console.log(balance);
128+
129+
const max = currAccount.movements.reduce((acc, mov) => (acc > mov) ? acc : mov, currAccount.movements[0]);
130+
console.log(max);
131+
132+
const totalDepositsUSD = currAccount.movements.filter(mov => mov > 0).reduce((acc, mov) => acc + mov * eurToUSD, 0);
133+
console.log(totalDepositsUSD);
134+
135+
const totalWithdrawalsUSD = currAccount.movements.filter(mov => mov < 0).reduce((acc, mov) => acc + mov * eurToUSD, 0);
136+
console.log(totalWithdrawalsUSD);
137+
});
138+
139+
btnTransfer.addEventListener('click', event =>
140+
{
141+
event.preventDefault();
142+
143+
let amount = Number(inputTransferAmount.value);
144+
let toAccount = accounts.find(acc => acc.username == inputTransferTo.value);
145+
146+
if (!toAccount)
147+
return;
148+
149+
if (currAccount.balance >= amount && toAccount?.username !== currAccount.username)
150+
{
151+
currAccount.movements.push(-1 * amount);
152+
toAccount.movements.push(amount);
153+
updateUI();
154+
155+
console.log('Transfer Valid');
156+
}
157+
});
158+
159+
btnLoan.addEventListener('click', event =>
160+
{
161+
event.preventDefault();
162+
163+
const amount = Number(inputLoanAmount.value);
164+
165+
if (amount > 0 && currAccount.movements.some(mov => mov >= amount * 0.1))
166+
{
167+
currAccount.movements.push(amount);
168+
169+
inputLoanAmount.value = '';
170+
updateUI();
171+
172+
console.log('Loan Valid');
173+
}
174+
});
175+
176+
btnClose.addEventListener('click', event =>
177+
{
178+
event.preventDefault();
179+
180+
if (currAccount.username === inputCloseUsername.value && currAccount.pin === Number(inputClosePin.value))
181+
{
182+
const index = accounts.findIndex(acc => acc.username === currAccount.username);
183+
accounts.splice(index, 1);
184+
185+
inputCloseUsername.value = inputClosePin.value = '';
186+
containerApp.style.opacity = 0;
187+
188+
labelBalance.textContent = 'Log in to get started';
189+
190+
console.log('Account Deleted');
191+
}
192+
});
193+
194+
let sorted = false;
195+
196+
btnSort.addEventListener('click', event =>
197+
{
198+
event.preventDefault();
199+
sorted = !sorted;
200+
displayMovements(currAccount.movements, sorted);
201+
});
202+
203+
const displayMovements = (movements, sort = false) =>
204+
{
205+
containerMovements.innerHTML = '';
206+
207+
const movs = sort ? movements.slice().sort((a, b) => a - b) : movements;
208+
209+
movs.forEach((mov, i) =>
210+
{
211+
const type = mov > 0 ? 'deposit' : 'withdrawal';
212+
213+
const html = `
214+
<div class="movements__row">
215+
<div class="movements__type movements__type--${ type }">${ i + 1 } ${ type }</div>
216+
<div class="movements__value">${ mov }€</div>
217+
</div>
218+
`;
219+
// <div class="movements__date">3 days ago</div>
220+
221+
containerMovements.insertAdjacentHTML('afterbegin', html);
222+
});
223+
};
224+
225+
const calcDisplayBalance = movements =>
226+
{
227+
const balance = movements.reduce((acc, mov) => acc + mov, 0);
228+
229+
currAccount.balance = balance;
230+
labelBalance.textContent = `${ balance }€`;
231+
};
232+
233+
const calcDisplaySummary = movements =>
234+
{
235+
const income = movements.filter(mov => mov > 0).reduce((acc, mov) => acc + mov, 0);
236+
const outcome = movements.filter(mov => mov < 0).reduce((acc, mov) => acc + mov, 0);
237+
const interest = movements.filter(mov => mov > 0)
238+
.map(mov => mov * currAccount.interestRate / 100)
239+
.filter(mov => mov >= 1)
240+
.reduce((acc, mov) => acc + mov, 0);
241+
242+
labelSumIn.textContent = `${ income }€`;
243+
labelSumOut.textContent = `${ Math.abs(outcome) }€`;
244+
labelSumInterest.textContent = `${ interest }€`;
245+
};
246+
247+
const overallBalance = accounts.flatMap(acc => acc.movements).reduce((acc, curr) => acc += curr, 0);
248+
console.log(`Overall Balance: ${ overallBalance }`);
249+
250+
const allMovements = accounts.flatMap(acc => acc.movements);
251+
252+
const bankDeposits = allMovements.filter(mov => mov > 0).reduce((acc, curr) => acc += curr);
253+
console.log(`Total Bank Deposits: ${ bankDeposits }`);
254+
255+
const bankWithdrawals = allMovements.filter(mov => mov < 0).reduce((acc, curr) => acc += curr);
256+
console.log(`Total Bank Withdrawals: ${ bankWithdrawals }`);
257+
258+
const { deposits, withdrawals } = allMovements.reduce((total, curr) =>
259+
{
260+
total[curr > 0 ? 'deposits' : 'withdrawals'] += curr;
261+
return total;
262+
}, { deposits: 0, withdrawals: 0 });
263+
console.log(`Bank Total Movements\nDeposits: ${ deposits }\nWithdrawals: ${ withdrawals }`);
264+
265+
/////////////////////////////////////////////////

0 commit comments

Comments
 (0)