Skip to content

Commit 80b9345

Browse files
AnaskaysarAnaskaysar
committed
Project 3
1 parent fcb7c0d commit 80b9345

File tree

8 files changed

+520
-0
lines changed

8 files changed

+520
-0
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎03_Banklist/.DS_Store‎

6 KB
Binary file not shown.

‎03_Banklist/Bankist-flowchart.png‎

834 KB
Loading

‎03_Banklist/icon.png‎

3.83 KB
Loading

‎03_Banklist/index.html‎

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

‎03_Banklist/logo.png‎

4.16 KB
Loading

‎03_Banklist/script.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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+
const disPlayMovements = function (movements) {
66+
containerMovements.innerHTML = '';
67+
movements.forEach(function (mov, i) {
68+
const type = mov > 0 ? 'deposit' : 'withdrawal';
69+
const html = `
70+
<div class="movements__row">
71+
<div class="movements__type movements__type--${type}">${i + 1} ${type} </div>
72+
<div class="movements__value">${mov}</div>
73+
</div>
74+
`
75+
containerMovements.insertAdjacentHTML('afterbegin', html);
76+
});
77+
};
78+
79+
disPlayMovements(account1.movements);
80+
// console.log(containerMovements.innerHTML)
81+
82+
83+
/////////////////////////////////////////////////
84+
/////////////////////////////////////////////////
85+
// LECTURES
86+
87+
const currencies = new Map([
88+
['USD', 'United States dollar'],
89+
['EUR', 'Euro'],
90+
['GBP', 'Pound sterling'],
91+
]);
92+
93+
const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
94+
95+
/////////////////////////////////////////////////

0 commit comments

Comments
 (0)