40 |
41 |
42 |
43 |
Current balance
44 |
45 | As of 05/03/2037
46 |
47 |
48 |
0000€
49 |
53 |
54 |
2 deposit
55 |
3 days ago
56 |
4 000€
57 |
58 |
59 |
60 | 1 withdrawal
61 |
62 |
24/01/2037
63 |
-378€
64 |
65 |
69 |
In
70 |
0000€
71 |
Out
72 |
0000€
73 |
Interest
74 |
0000€
75 |
76 |
80 |
Transfer money
81 |
88 |
89 |
90 |
91 |
92 |
Request loan
93 |
98 |
99 |
100 |
101 |
102 |
Close account
103 |
114 |
115 |
116 |
117 |
118 | You will be logged out in 05:00
119 |
120 |
121 |
122 |
125 |
126 |
127 |
128 |
129 |
--------------------------------------------------------------------------------
/starter/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Use this CSS to learn some intersting techniques,
3 | * in case you're wondering how I built the UI.
4 | * Have fun! 😁
5 | */
6 |
7 | * {
8 | margin: 0;
9 | padding: 0;
10 | box-sizing: inherit;
11 | }
12 |
13 | html {
14 | font-size: 62.5%;
15 | box-sizing: border-box;
16 | }
17 |
18 | html::-webkit-scrollbar-track {
19 | --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
20 | border-radius: 10px;
21 | background-color: #f5f5f5;
22 | }
23 |
24 | html::-webkit-scrollbar {
25 | width: 7px;
26 | background-color: #f5f5f5;
27 | }
28 |
29 | html::-webkit-scrollbar-thumb {
30 | border-radius: 20px;
31 | --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
32 | background-color: #555;
33 | }
34 |
35 | body {
36 | font-family: 'Poppins', sans-serif;
37 | color: #444;
38 | background-color: #f3f3f3;
39 | height: 100vh;
40 | padding: 2rem;
41 | }
42 |
43 | nav {
44 | display: flex;
45 | justify-content: space-between;
46 | align-items: center;
47 | padding: 0 2rem;
48 | }
49 |
50 | .welcome {
51 | font-size: 1.9rem;
52 | font-weight: 500;
53 | }
54 |
55 | .logo {
56 | height: 5.25rem;
57 | }
58 |
59 | .login {
60 | display: flex;
61 | }
62 |
63 | .login__input {
64 | border: none;
65 | padding: 0.5rem 2rem;
66 | font-size: 1.6rem;
67 | font-family: inherit;
68 | text-align: center;
69 | width: 12rem;
70 | border-radius: 10rem;
71 | margin-right: 1rem;
72 | color: inherit;
73 | border: 1px solid #fff;
74 | transition: all 0.3s;
75 | }
76 |
77 | .login__input:focus {
78 | outline: none;
79 | border: 1px solid #ccc;
80 | }
81 |
82 | .login__input::placeholder {
83 | color: #bbb;
84 | }
85 |
86 | .login__btn {
87 | border: none;
88 | background: none;
89 | font-size: 2.2rem;
90 | color: inherit;
91 | cursor: pointer;
92 | transition: all 0.3s;
93 | }
94 |
95 | .login__btn:hover,
96 | .login__btn:focus,
97 | .btn--sort:hover,
98 | .btn--sort:focus {
99 | outline: none;
100 | color: #777;
101 | }
102 |
103 | /* MAIN */
104 | .app {
105 | position: relative;
106 | max-width: 100rem;
107 | margin: 4rem auto;
108 | display: grid;
109 | grid-template-columns: 4fr 3fr;
110 | grid-template-rows: auto repeat(3, 15rem) auto;
111 | gap: 2rem;
112 |
113 | /* NOTE This creates the fade in/out anumation */
114 | opacity: 0;
115 | transition: all 1s;
116 | }
117 |
118 | .balance {
119 | grid-column: 1 / span 2;
120 | display: flex;
121 | align-items: flex-end;
122 | justify-content: space-between;
123 | margin-bottom: 2rem;
124 | }
125 |
126 | .balance__label {
127 | font-size: 2.2rem;
128 | font-weight: 500;
129 | margin-bottom: -0.2rem;
130 | }
131 |
132 | .balance__date {
133 | font-size: 1.4rem;
134 | color: #888;
135 | }
136 |
137 | .balance__value {
138 | font-size: 4.5rem;
139 | font-weight: 400;
140 | }
141 |
142 | /* MOVEMENTS */
143 | .movements {
144 | grid-row: 2 / span 3;
145 | background-color: #fff;
146 | border-radius: 1rem;
147 | overflow: scroll;
148 | overflow-x: hidden;
149 | }
150 |
151 | #style-1::-webkit-scrollbar-track {
152 | --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
153 | border-radius: 10px;
154 | background-color: #f5f5f5;
155 | }
156 |
157 | #style-1::-webkit-scrollbar {
158 | width: 7px;
159 | background-color: #f5f5f5;
160 | }
161 |
162 | #style-1::-webkit-scrollbar-thumb {
163 | border-radius: 20px;
164 | --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
165 | background-color: #555;
166 | }
167 |
168 | .movements__row {
169 | padding: 2.25rem 4rem;
170 | display: flex;
171 | align-items: center;
172 | border-bottom: 1px solid #eee;
173 | }
174 |
175 | .movements__type {
176 | font-size: 1.1rem;
177 | text-transform: uppercase;
178 | font-weight: 500;
179 | color: #fff;
180 | padding: 0.1rem 1rem;
181 | border-radius: 10rem;
182 | margin-right: 2rem;
183 | }
184 |
185 | .movements__date {
186 | font-size: 1.1rem;
187 | text-transform: uppercase;
188 | font-weight: 500;
189 | color: #666;
190 | }
191 |
192 | .movements__type--deposit {
193 | background-image: linear-gradient(to top left, #39b385, #9be15d);
194 | }
195 |
196 | .movements__type--withdrawal {
197 | background-image: linear-gradient(to top left, #e52a5a, #ff585f);
198 | }
199 |
200 | .movements__value {
201 | font-size: 1.7rem;
202 | margin-left: auto;
203 | }
204 |
205 | /* SUMMARY */
206 | .summary {
207 | grid-row: 5 / 6;
208 | display: flex;
209 | align-items: baseline;
210 | padding: 0 0.3rem;
211 | margin-top: 1rem;
212 | }
213 |
214 | .summary__label {
215 | font-size: 1.2rem;
216 | font-weight: 500;
217 | text-transform: uppercase;
218 | margin-right: 0.8rem;
219 | }
220 |
221 | .summary__value {
222 | font-size: 2.2rem;
223 | margin-right: 2.5rem;
224 | }
225 |
226 | .summary__value--in,
227 | .summary__value--interest {
228 | color: #66c873;
229 | }
230 |
231 | .summary__value--out {
232 | color: #f5465d;
233 | }
234 |
235 | .btn--sort {
236 | margin-left: auto;
237 | border: none;
238 | background: none;
239 | font-size: 1.3rem;
240 | font-weight: 500;
241 | cursor: pointer;
242 | }
243 |
244 | .btn--sort:active {
245 | color: hotpink;
246 | }
247 |
248 | /* OPERATIONS */
249 | .operation {
250 | border-radius: 1rem;
251 | padding: 3rem 4rem;
252 | color: #333;
253 | }
254 |
255 | .operation--transfer {
256 | background-image: linear-gradient(to top left, #ffb003, #ffcb03);
257 | }
258 |
259 | .operation--loan {
260 | background-image: linear-gradient(to top left, #39b385, #9be15d);
261 | }
262 |
263 | .operation--close {
264 | background-image: linear-gradient(to top left, #e52a5a, #ff585f);
265 | }
266 |
267 | h2 {
268 | margin-bottom: 1.5rem;
269 | font-size: 1.7rem;
270 | font-weight: 600;
271 | color: #333;
272 | }
273 |
274 | .form {
275 | display: grid;
276 | grid-template-columns: 2.5fr 2.5fr 1fr;
277 | grid-template-rows: auto auto;
278 | gap: 0.4rem 1rem;
279 | }
280 |
281 | /* Exceptions for interst */
282 | .form.form--loan {
283 | grid-template-columns: 2.5fr 1fr 2.5fr;
284 | }
285 | .form__label--loan {
286 | grid-row: 2;
287 | }
288 | /* End exceptions */
289 |
290 | .form__input {
291 | width: 100%;
292 | border: none;
293 | background-color: rgba(255, 255, 255, 0.4);
294 | font-family: inherit;
295 | font-size: 1.5rem;
296 | text-align: center;
297 | color: #333;
298 | padding: 0.3rem 1rem;
299 | border-radius: 0.7rem;
300 | transition: all 0.3s;
301 | }
302 |
303 | .form__input:focus {
304 | outline: none;
305 | background-color: rgba(255, 255, 255, 0.6);
306 | }
307 |
308 | .form__label {
309 | font-size: 1.3rem;
310 | text-align: center;
311 | }
312 |
313 | .form__btn {
314 | border: none;
315 | border-radius: 0.7rem;
316 | font-size: 1.8rem;
317 | background-color: #fff;
318 | cursor: pointer;
319 | transition: all 0.3s;
320 | }
321 |
322 | .form__btn:focus {
323 | outline: none;
324 | background-color: rgba(255, 255, 255, 0.8);
325 | }
326 |
327 | .logout-timer {
328 | padding: 0 0.3rem;
329 | margin-top: 1.9rem;
330 | text-align: right;
331 | font-size: 1.25rem;
332 | }
333 |
334 | .timer {
335 | font-weight: 600;
336 | }
337 |
--------------------------------------------------------------------------------
/starter/app.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /////////////////////////////////////////////////
4 | /////////////////////////////////////////////////
5 | // BANKIST APP
6 |
7 | /////////////////////////////////////////////////
8 | // Data
9 |
10 | // DIFFERENT DATA! Contains movement dates, currency and locale
11 |
12 | const account1 = {
13 | owner: 'Andrew Tsegaye',
14 | movements: [200, 455.23, -306.5, 25000, -642.21, -133.9, 79.97, 1300],
15 | interestRate: 1.2, // %
16 | pin: 1111,
17 |
18 | movementsDates: [
19 | '2020-02-05T16:33:06.386Z',
20 | '2020-04-10T14:43:26.374Z',
21 | '2021-06-22T18:49:59.371Z',
22 | '2021-06-25T12:01:20.894Z',
23 | '2021-07-26T12:01:20.894Z',
24 | '2022-10-29T12:29:35.462Z',
25 | '2022-11-01T12:29:35.462Z',
26 | '2022-11-03T12:29:35.462Z',
27 | ],
28 | currency: 'EUR',
29 | locale: 'pt-PT', // de-DE
30 | };
31 |
32 | const account2 = {
33 | owner: 'Kaleb Tsegaye',
34 | movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
35 | interestRate: 1.5,
36 | pin: 2222,
37 |
38 | movementsDates: [
39 | '2020-02-05T16:33:06.386Z',
40 | '2020-04-10T14:43:26.374Z',
41 | '2021-06-22T18:49:59.371Z',
42 | '2021-06-25T12:01:20.894Z',
43 | '2021-07-26T12:01:20.894Z',
44 | '2022-10-29T12:29:35.462Z',
45 | '2022-11-02T12:29:35.462Z',
46 | '2022-11-03T12:29:35.462Z',
47 | ],
48 | currency: 'USD',
49 | locale: 'en-US',
50 | };
51 |
52 | const accounts = [account1, account2];
53 |
54 | /////////////////////////////////////////////////
55 | // Elements
56 | const labelWelcome = document.querySelector('.welcome');
57 | const labelDate = document.querySelector('.date');
58 | const labelBalance = document.querySelector('.balance__value');
59 | const labelSumIn = document.querySelector('.summary__value--in');
60 | const labelSumOut = document.querySelector('.summary__value--out');
61 | const labelSumInterest = document.querySelector('.summary__value--interest');
62 | const labelTimer = document.querySelector('.timer');
63 |
64 | const containerApp = document.querySelector('.app');
65 | const containerMovements = document.querySelector('.movements');
66 |
67 | const btnLogin = document.querySelector('.login__btn');
68 | const btnTransfer = document.querySelector('.form__btn--transfer');
69 | const btnLoan = document.querySelector('.form__btn--loan');
70 | const btnClose = document.querySelector('.form__btn--close');
71 | const btnSort = document.querySelector('.btn--sort');
72 |
73 | const inputLoginUsername = document.querySelector('.login__input--user');
74 | const inputLoginPin = document.querySelector('.login__input--pin');
75 | const inputTransferTo = document.querySelector('.form__input--to');
76 | const inputTransferAmount = document.querySelector('.form__input--amount');
77 | const inputLoanAmount = document.querySelector('.form__input--loan-amount');
78 | const inputCloseUsername = document.querySelector('.form__input--user');
79 | const inputClosePin = document.querySelector('.form__input--pin');
80 |
81 | /////////////////////////////////////////////////
82 | // Functions
83 |
84 | const formatMovementsDay = function (date, locale) {
85 | const calcDaysPassed = (date1, date2) =>
86 | Math.round(Math.abs((date2 - date1) / (1000 * 60 * 60 * 24)));
87 |
88 | const daysPassed = calcDaysPassed(new Date(), date);
89 |
90 | if (daysPassed === 0) return 'Today';
91 | if (daysPassed === 1) return 'Yesterday';
92 | if (daysPassed <= 7) return `${daysPassed} days ago`;
93 | // const day = `${date.getDate()}`.padStart(2, 0);
94 | // const month = `${date.getMonth()}`.padStart(2, 0);
95 | // const year = date.getFullYear();
96 | // return `${day}/${month}/${year}`;
97 | // day = `${date.toLocaleDateString('en-US', options)}`,
98 | return new Intl.DateTimeFormat(locale).format(date);
99 | };
100 |
101 | const formattedCur = function (value, locale, currency) {
102 | return new Intl.NumberFormat(locale, {
103 | style: 'currency',
104 | currency: currency,
105 | }).format(value);
106 | };
107 |
108 | const displayMovements = function (acc, sort = false) {
109 | containerMovements.innerHTML = '';
110 |
111 | const movs = sort
112 | ? acc.movements.slice().sort((a, b) => a - b)
113 | : acc.movements;
114 |
115 | movs.forEach(function (mov, i) {
116 | const type = mov > 0 ? 'deposit' : 'withdrawal';
117 |
118 | // const options = { weekday: 'long' };
119 | const date = new Date(acc.movementsDates[i]);
120 | const displayDate = formatMovementsDay(date, acc.locale);
121 |
122 | const formattedMov = formattedCur(mov, acc.locale, acc.currency);
123 |
124 | const html = `
125 |