Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,410 --> 00:00:05,320
Let's now finally implement the log in feature
2
2
00:00:05,320 --> 00:00:06,750
of our application,
3
3
00:00:06,750 --> 00:00:09,200
and this is gonna be a lot of work.
4
4
00:00:09,200 --> 00:00:11,313
So let's get started right away.
5
5
00:00:13,090 --> 00:00:16,933
And to start, let's take a look at our demo application.
6
6
00:00:18,520 --> 00:00:20,870
So in this case here in the beginning,
7
7
00:00:20,870 --> 00:00:22,560
we cannot see anything.
8
8
00:00:22,560 --> 00:00:24,730
So there's no logged in user,
9
9
00:00:24,730 --> 00:00:27,610
and then we can input a username.
10
10
00:00:27,610 --> 00:00:29,740
And so this is the kind of username
11
11
00:00:29,740 --> 00:00:33,870
that we computed before, remember, and then the pin.
12
12
00:00:33,870 --> 00:00:35,450
And if that is correct,
13
13
00:00:35,450 --> 00:00:38,653
so if the pin corresponding to this account is correct,
14
14
00:00:39,550 --> 00:00:40,910
then we get logged in.
15
15
00:00:40,910 --> 00:00:43,850
And that's gonna happen whether we click on this button
16
16
00:00:43,850 --> 00:00:46,143
here or hit the enter key.
17
17
00:00:47,150 --> 00:00:49,400
And so then all of this appears.
18
18
00:00:49,400 --> 00:00:51,923
So, all the values here are calculated.
19
19
00:00:53,040 --> 00:00:57,300
And yeah, so that's the main thing that we need to do
20
20
00:00:57,300 --> 00:00:59,090
in this lecture.
21
21
00:00:59,090 --> 00:01:01,650
And then of course, if someone else logs in,
22
22
00:01:01,650 --> 00:01:03,933
then data values are gonna be displayed.
23
23
00:01:06,860 --> 00:01:11,860
And so let's take a look at the HTML here of this form.
24
24
00:01:13,360 --> 00:01:15,910
So indeed here we have a form element,
25
25
00:01:15,910 --> 00:01:18,090
and this form has a button.
26
26
00:01:18,090 --> 00:01:20,580
And so, it's onto this Log in button,
27
27
00:01:20,580 --> 00:01:23,930
that we will attach the add event listener method.
28
28
00:01:23,930 --> 00:01:27,470
Then, as for the inputs, the username is gonna come
29
29
00:01:27,470 --> 00:01:32,450
from this one, with this class, log in user dash dash input,
30
30
00:01:32,450 --> 00:01:35,610
and the pin is gonna come from this one.
31
31
00:01:35,610 --> 00:01:39,643
And as always, I already have all of this here selected.
32
32
00:01:41,180 --> 00:01:42,693
So this is the button here,
33
33
00:01:43,870 --> 00:01:48,870
and then we have input log in username and input log in pin.
34
34
00:01:49,110 --> 00:01:53,123
Okay, so let's now create these event handlers.
35
35
00:01:54,780 --> 00:01:57,633
So event handlers right here.
36
36
00:01:59,400 --> 00:02:01,663
So, button log in,
37
37
00:02:04,500 --> 00:02:06,313
add event listener,
38
38
00:02:07,710 --> 00:02:11,000
for the click and then as always,
39
39
00:02:11,000 --> 00:02:13,490
our callback function.
40
40
00:02:13,490 --> 00:02:17,463
And here let's just look to the console log in.
41
41
00:02:19,350 --> 00:02:22,890
Okay, and now,
42
42
00:02:22,890 --> 00:02:24,970
did you see what happened here?
43
43
00:02:24,970 --> 00:02:28,793
Take a close look down here, what happens as we click.
44
44
00:02:30,610 --> 00:02:33,680
So for a flash there, you saw the log in,
45
45
00:02:33,680 --> 00:02:36,740
and then the page reloaded, right?
46
46
00:02:36,740 --> 00:02:40,350
And that's because this is the button in a form element.
47
47
00:02:40,350 --> 00:02:43,110
And so in HTML, the default behavior,
48
48
00:02:43,110 --> 00:02:46,633
when we click the Submit button, is for the page to reload.
49
49
00:02:47,520 --> 00:02:50,120
So we need to stop that from happening.
50
50
00:02:50,120 --> 00:02:53,080
And for that, we need to actually give this function
51
51
00:02:53,080 --> 00:02:57,300
here, the event parameter, and let's just call it event.
52
52
00:02:57,300 --> 00:03:01,090
And you already know how this callback function gets access
53
53
00:03:01,090 --> 00:03:04,110
to this event object, remember?
54
54
00:03:04,110 --> 00:03:07,240
And so on that event, we can call a method
55
55
00:03:07,240 --> 00:03:11,103
called prevent default, like this.
56
56
00:03:12,110 --> 00:03:15,460
And so as the name says, this will then prevent
57
57
00:03:15,460 --> 00:03:17,253
this form from submitting.
58
58
00:03:18,260 --> 00:03:22,273
So, prevent form from submitting.
59
59
00:03:24,210 --> 00:03:26,300
So let's do that again.
60
60
00:03:26,300 --> 00:03:30,980
And now we've fixed that problem and we can see log in.
61
61
00:03:30,980 --> 00:03:35,210
Okay, now another thing that's great about forms,
62
62
00:03:35,210 --> 00:03:37,550
is that whenever we have one of these fields here,
63
63
00:03:37,550 --> 00:03:40,690
input it, and when we then hit enter,
64
64
00:03:40,690 --> 00:03:44,380
like this, then that will actually automatically trigger
65
65
00:03:44,380 --> 00:03:47,430
a click event on this button.
66
66
00:03:47,430 --> 00:03:51,800
Okay, so once again, hitting enter in this field,
67
67
00:03:51,800 --> 00:03:54,860
or in this field is exactly the same as the user
68
68
00:03:54,860 --> 00:03:56,750
clicking right here.
69
69
00:03:56,750 --> 00:04:00,380
So, both of these things will trigger a click event.
70
70
00:04:00,380 --> 00:04:03,010
So you see, as I hit enter,
71
71
00:04:03,010 --> 00:04:04,883
we get more and more click events.
72
72
00:04:05,740 --> 00:04:10,370
So that's why we get then, log in locked to the console.
73
73
00:04:10,370 --> 00:04:12,900
But now, let's do the actual work.
74
74
00:04:12,900 --> 00:04:15,020
So to lock the user actually in,
75
75
00:04:15,020 --> 00:04:18,160
we need to find the account from the accounts array,
76
76
00:04:18,160 --> 00:04:21,020
with the username that the user inputted.
77
77
00:04:21,020 --> 00:04:25,410
And so that's where our find method comes into play again.
78
78
00:04:25,410 --> 00:04:28,193
So we can do accounts.find,
79
79
00:04:29,750 --> 00:04:32,020
and then this is actually the same that we did
80
80
00:04:32,020 --> 00:04:33,073
in the last video.
81
81
00:04:34,180 --> 00:04:39,180
So account.owner should be the same as,
82
82
00:04:39,540 --> 00:04:42,300
so, three equals actually.
83
83
00:04:42,300 --> 00:04:44,450
And so, remember we have this value
84
84
00:04:44,450 --> 00:04:47,923
at input log in username.
85
85
00:04:49,120 --> 00:04:52,930
Okay, so that is this element here, and then from there,
86
86
00:04:52,930 --> 00:04:56,950
we need to take the value property, remember that?
87
87
00:04:56,950 --> 00:05:01,930
So we did this here, I think, in the "Guess my Number" game,
88
88
00:05:01,930 --> 00:05:05,500
where we also read the value out of an input field.
89
89
00:05:05,500 --> 00:05:07,193
And so here, this is the same.
90
90
00:05:08,700 --> 00:05:12,160
And so now, let's actually save this into a variable.
91
91
00:05:12,160 --> 00:05:15,890
Now this variable needs to be defined outside
92
92
00:05:15,890 --> 00:05:18,440
of this function, okay?
93
93
00:05:18,440 --> 00:05:20,930
And that's because we will need this information
94
94
00:05:20,930 --> 00:05:25,010
about the current account also later in other functions.
95
95
00:05:25,010 --> 00:05:29,010
So, it's a good thing to have this big important information
96
96
00:05:29,010 --> 00:05:31,900
outside of this function, so that we can then remember
97
97
00:05:31,900 --> 00:05:35,030
it for other actions in our application.
98
98
00:05:35,030 --> 00:05:37,473
For example, when we transfer money here,
99
99
00:05:37,473 --> 00:05:40,610
then we need to know from which account that money
100
100
00:05:40,610 --> 00:05:41,860
should actually go.
101
101
00:05:41,860 --> 00:05:45,633
And so for that, we need the current account.
102
102
00:05:47,720 --> 00:05:51,660
So current account, and here we just define it,
103
103
00:05:51,660 --> 00:05:53,323
and that's why we need a let.
104
104
00:05:54,190 --> 00:05:56,563
And so then here, we assign it to this value.
105
105
00:05:57,710 --> 00:05:59,343
So current account.
106
106
00:06:02,440 --> 00:06:03,983
Okay, so let's check that.
107
107
00:06:08,100 --> 00:06:12,920
So JS and we get undefined.
108
108
00:06:12,920 --> 00:06:15,010
So there was some problem here,
109
109
00:06:15,010 --> 00:06:18,310
and the problem is, as I see it right away,
110
110
00:06:18,310 --> 00:06:20,170
is that we are looking for the owner,
111
111
00:06:20,170 --> 00:06:22,940
but we need to look for the username.
112
112
00:06:22,940 --> 00:06:26,150
So the owner is the whole name, but the username property,
113
113
00:06:26,150 --> 00:06:29,360
is these properties that we created earlier.
114
114
00:06:29,360 --> 00:06:31,693
So here in this function, remember?
115
115
00:06:33,750 --> 00:06:37,530
So we need to compare this value here, that the user inputs,
116
116
00:06:37,530 --> 00:06:39,363
of course, to that username.
117
117
00:06:40,480 --> 00:06:42,170
So try that again.
118
118
00:06:42,170 --> 00:06:44,100
And now here we get to the object,
119
119
00:06:44,100 --> 00:06:47,280
which has exactly this username.
120
120
00:06:47,280 --> 00:06:51,823
Alright, and so it is here, my object basically.
121
121
00:06:53,030 --> 00:06:57,330
Alright, so we got the user,
122
122
00:06:57,330 --> 00:06:59,360
that is trying to log in,
123
123
00:06:59,360 --> 00:07:02,120
and now all we need to do in order to actually lock
124
124
00:07:02,120 --> 00:07:06,180
the user in, is to check if the pin is correct.
125
125
00:07:06,180 --> 00:07:08,480
So, pin here is like a password,
126
126
00:07:08,480 --> 00:07:12,460
but something that we usually use, like in an ATM.
127
127
00:07:12,460 --> 00:07:15,700
And so I decided to just go with that here,
128
128
00:07:15,700 --> 00:07:17,960
because I think this also looks a little bit
129
129
00:07:17,960 --> 00:07:20,140
like an ATM machine here.
130
130
00:07:21,376 --> 00:07:23,626
So let's then do that test.
131
131
00:07:25,232 --> 00:07:27,399
So, if currentaccount.pin,
132
132
00:07:30,280 --> 00:07:34,483
is equal to input log in pin.
133
133
00:07:35,400 --> 00:07:38,680
Okay, so that's the variable that holds the selection
134
134
00:07:38,680 --> 00:07:40,270
of selecting this element.
135
135
00:07:40,270 --> 00:07:43,920
And then again, we need to take the value.
136
136
00:07:43,920 --> 00:07:46,320
And finally, we also need to convert
137
137
00:07:47,320 --> 00:07:50,100
this to a number,
138
138
00:07:50,100 --> 00:07:52,290
because as I mentioned earlier,
139
139
00:07:52,290 --> 00:07:54,453
this value will always be a string.
140
140
00:07:56,170 --> 00:07:59,330
Alright, and so here, before we do anything,
141
141
00:07:59,330 --> 00:08:03,890
let's just log in again here to the console.
142
142
00:08:03,890 --> 00:08:07,193
Okay, so, JS,
143
143
00:08:09,680 --> 00:08:11,023
and we got logged in.
144
144
00:08:11,870 --> 00:08:14,153
But if we only input JS,
145
145
00:08:15,110 --> 00:08:17,860
then we simply get the object itself,
146
146
00:08:17,860 --> 00:08:21,563
but without being logged in, because the pin is correct.
147
147
00:08:22,600 --> 00:08:25,190
And now let's try just some other user,
148
148
00:08:25,190 --> 00:08:26,523
to see what happens here.
149
149
00:08:28,060 --> 00:08:30,290
And we get an error.
150
150
00:08:30,290 --> 00:08:34,780
So that error is, cannot read property pin of undefined.
151
151
00:08:34,780 --> 00:08:37,980
And so the reason for this is, that this object here,
152
152
00:08:37,980 --> 00:08:40,310
is now undefined, right?
153
153
00:08:40,310 --> 00:08:44,920
Because no account could be found for this username.
154
154
00:08:44,920 --> 00:08:47,660
And so the find method, so this one here,
155
155
00:08:47,660 --> 00:08:52,043
will return undefined, if no element matches this condition.
156
156
00:08:52,890 --> 00:08:55,680
So that's something that we haven't seen before,
157
157
00:08:55,680 --> 00:08:57,810
and so that's why I'm showing this to you.
158
158
00:08:57,810 --> 00:09:01,050
But anyway, how should we solve this?
159
159
00:09:01,050 --> 00:09:04,130
Well, the first thing that might come into mind,
160
160
00:09:04,130 --> 00:09:08,020
is to simply check if the current account exists,
161
161
00:09:08,020 --> 00:09:10,740
like this, okay.
162
162
00:09:10,740 --> 00:09:12,680
So this would fix the problem,
163
163
00:09:12,680 --> 00:09:16,180
but we can do better because we already learned
164
164
00:09:16,180 --> 00:09:19,643
about something called optional chaining, remember?
165
165
00:09:20,740 --> 00:09:24,650
So we can do this, and then this pin property
166
166
00:09:24,650 --> 00:09:27,880
will only be read in case that the current account
167
167
00:09:27,880 --> 00:09:31,800
here actually exists, remember that?
168
168
00:09:31,800 --> 00:09:36,070
And so, this is a lot easier and a lot more elegant.
169
169
00:09:36,070 --> 00:09:37,203
So let's try that.
170
170
00:09:39,690 --> 00:09:41,370
And so now nothing happened.
171
171
00:09:41,370 --> 00:09:44,890
So no error, all we get here is the undefined,
172
172
00:09:44,890 --> 00:09:48,800
because yeah, this account does not exist.
173
173
00:09:48,800 --> 00:09:50,623
But that's of course not a problem.
174
174
00:09:51,730 --> 00:09:55,530
Okay, but now in case that the account does exist
175
175
00:09:55,530 --> 00:09:58,433
and that the pin is correct, what should we do?
176
176
00:09:59,330 --> 00:10:02,480
Well, let's take a look at our flow chart here.
177
177
00:10:02,480 --> 00:10:04,630
So this is the part we already checked.
178
178
00:10:04,630 --> 00:10:08,720
So if we have the correct credentials, right?
179
179
00:10:08,720 --> 00:10:12,553
And so if yes, then we should display DUI,
180
180
00:10:12,553 --> 00:10:14,580
and the welcome message.
181
181
00:10:14,580 --> 00:10:16,793
So let's write that here in our script,
182
182
00:10:18,010 --> 00:10:18,913
put that here.
183
183
00:10:22,540 --> 00:10:25,450
And so I like to kind of plan out what I'm doing
184
184
00:10:25,450 --> 00:10:27,290
here using comments,
185
185
00:10:27,290 --> 00:10:31,443
display UI and a welcome message.
186
186
00:10:35,250 --> 00:10:39,720
Next up, we should display and calculate the balance.
187
187
00:10:39,720 --> 00:10:41,210
Then the same with the summary,
188
188
00:10:41,210 --> 00:10:43,990
and the same with the movements.
189
189
00:10:43,990 --> 00:10:47,460
Okay, this part here we are leaving for the next section
190
190
00:10:47,460 --> 00:10:49,560
about the timer.
191
191
00:10:49,560 --> 00:10:52,523
Okay, so display balance, summary, and movements.
192
192
00:10:59,410 --> 00:11:01,123
So display movements,
193
193
00:11:02,600 --> 00:11:07,600
display balance, display summary,
194
194
00:11:10,540 --> 00:11:12,960
and let's start with the message here.
195
195
00:11:12,960 --> 00:11:14,913
So that is this element here.
196
196
00:11:15,790 --> 00:11:19,233
So, let me inspect that.
197
197
00:11:21,220 --> 00:11:24,780
So, it's this paragraph here called welcome.
198
198
00:11:24,780 --> 00:11:28,800
And so as always, I already have that selected.
199
199
00:11:28,800 --> 00:11:33,800
So it's a label, so probably it's called label welcome.
200
200
00:11:34,750 --> 00:11:37,520
Label, indeed, here it is,
201
201
00:11:37,520 --> 00:11:41,523
labelwelcome.textcontent as always.
202
202
00:11:42,610 --> 00:11:45,270
And then here we are gonna write, welcome back,
203
203
00:11:45,270 --> 00:11:47,170
and then the first name of the person.
204
204
00:11:48,250 --> 00:11:53,250
Welcome back and then the owner of the current account.
205
205
00:11:54,210 --> 00:11:57,670
So that's current account.owner,
206
206
00:11:57,670 --> 00:11:59,840
and then only the first word.
207
207
00:11:59,840 --> 00:12:02,260
So, how do we do that?
208
208
00:12:02,260 --> 00:12:04,683
Well, we use our good friend, split.
209
209
00:12:06,020 --> 00:12:07,920
And we split it with the space.
210
210
00:12:07,920 --> 00:12:10,970
So as I said, we use this one all the time.
211
211
00:12:10,970 --> 00:12:13,230
And then from the resulting array,
212
212
00:12:13,230 --> 00:12:17,150
we simply take the first element, like this.
213
213
00:12:17,150 --> 00:12:21,010
Okay, so this displays the message.
214
214
00:12:21,010 --> 00:12:23,410
And now about displaying DUI,
215
215
00:12:23,410 --> 00:12:26,320
remember how in the beginning we set the opacity
216
216
00:12:26,320 --> 00:12:31,320
here from zero, basically back to 100, which is the default.
217
217
00:12:31,900 --> 00:12:35,200
So usually, the opacity here is at zero.
218
218
00:12:35,200 --> 00:12:37,160
And so now when we lock the user in,
219
219
00:12:37,160 --> 00:12:40,613
we actually set this opacity here to 100.
220
220
00:12:41,670 --> 00:12:45,193
So as we save this now, it will all disappear.
221
221
00:12:46,980 --> 00:12:51,860
And so now, what we will do is the container app,
222
222
00:12:51,860 --> 00:12:54,360
I think, yes.
223
223
00:12:54,360 --> 00:12:58,490
So container app is the element that we selected previously,
224
224
00:12:58,490 --> 00:13:00,343
which has this app class.
225
225
00:13:01,920 --> 00:13:04,070
Okay, so this element,
226
226
00:13:04,070 --> 00:13:08,160
we will manipulate the style and in particular,
227
227
00:13:08,160 --> 00:13:09,633
the opacity style.
228
228
00:13:11,180 --> 00:13:14,040
Now remember how I said in another project,
229
229
00:13:14,040 --> 00:13:17,410
that it's also good to use classes for this?
230
230
00:13:17,410 --> 00:13:20,870
Okay, but in this case, it's really just one style.
231
231
00:13:20,870 --> 00:13:24,650
So it's not a big work to just do it like this.
232
232
00:13:24,650 --> 00:13:27,063
So let's test this one out for now.
233
233
00:13:28,430 --> 00:13:30,943
So JS and my pin,
234
234
00:13:31,930 --> 00:13:35,060
and indeed we get our message here,
235
235
00:13:35,060 --> 00:13:38,583
and also we get everything here now back to visible.
236
236
00:13:39,680 --> 00:13:44,100
And Jessica Davis now, which has pin two, two, two, two.
237
237
00:13:44,100 --> 00:13:46,223
And so now we also get Jessica.
238
238
00:13:47,320 --> 00:13:51,000
Now, as you see these balances and these movements here,
239
239
00:13:51,000 --> 00:13:56,000
they're all still hard-coded from what we had back here.
240
240
00:13:56,520 --> 00:13:59,700
So here we called calc display summary,
241
241
00:13:59,700 --> 00:14:02,410
and also the balance and the movements.
242
242
00:14:02,410 --> 00:14:06,020
But now we want to do that, not here, but actually inside
243
243
00:14:06,020 --> 00:14:07,483
of the login function.
244
244
00:14:08,360 --> 00:14:09,993
So let's remove all of this,
245
245
00:14:11,670 --> 00:14:15,170
again, because we do not want to call these functions
246
246
00:14:15,170 --> 00:14:18,030
right in the beginning, when our script is loaded.
247
247
00:14:18,030 --> 00:14:21,020
We only want to calculate and display the balance,
248
248
00:14:21,020 --> 00:14:23,070
and the movements, and the summary.
249
249
00:14:23,070 --> 00:14:25,420
And as soon as we actually get the data
250
250
00:14:25,420 --> 00:14:27,670
that we want to display, right?
251
251
00:14:27,670 --> 00:14:28,593
That makes sense.
252
252
00:14:30,660 --> 00:14:32,773
So, let's remove all of that,
253
253
00:14:33,900 --> 00:14:35,893
and actually do it here.
254
254
00:14:39,540 --> 00:14:42,493
So, display movements,
255
255
00:14:44,040 --> 00:14:49,040
and then it is the currentaccount.movements, right?
256
256
00:14:52,060 --> 00:14:54,300
And that's because this method here,
257
257
00:14:54,300 --> 00:14:56,010
or actually this function here,
258
258
00:14:56,010 --> 00:14:58,580
it expects a movement argument.
259
259
00:14:58,580 --> 00:15:00,220
And as we hovered this function name,
260
260
00:15:00,220 --> 00:15:04,470
VS code is so smart that it actually shows it to us here.
261
261
00:15:04,470 --> 00:15:07,210
And so from there, we can immediately see what we need
262
262
00:15:07,210 --> 00:15:09,300
to pass into the function.
263
263
00:15:09,300 --> 00:15:10,773
So that's really handy.
264
264
00:15:11,700 --> 00:15:14,100
Then the same with the balance.
265
265
00:15:14,100 --> 00:15:18,173
So display or calc display balance actually.
266
266
00:15:19,250 --> 00:15:20,463
And so once again,
267
267
00:15:21,300 --> 00:15:24,120
let's just hover this here to make sure what we need,
268
268
00:15:24,120 --> 00:15:25,270
and it is the movement.
269
269
00:15:26,570 --> 00:15:30,743
So that data is stored in the currentaccount.movements.
270
270
00:15:33,290 --> 00:15:35,323
And finally, also the summary.
271
271
00:15:36,210 --> 00:15:40,170
So, calc display summary.
272
272
00:15:40,170 --> 00:15:42,723
And once again, we will need a movement.
273
273
00:15:43,790 --> 00:15:48,530
So that data is in currentaccount.movements.
274
274
00:15:48,530 --> 00:15:51,410
Alright, now we will have to come back to this function
275
275
00:15:51,410 --> 00:15:53,970
here by the end of this lecture,
276
276
00:15:53,970 --> 00:15:55,870
but for now, let's leave it like this.
277
277
00:15:56,820 --> 00:16:00,063
And let's log in again, first with Jonas.
278
278
00:16:01,490 --> 00:16:05,440
And so this is the data that we are already used to seeing,
279
279
00:16:05,440 --> 00:16:08,090
this balance value and this movements here,
280
280
00:16:08,090 --> 00:16:11,070
because we have always been printing these values
281
281
00:16:11,070 --> 00:16:13,320
here using that account.
282
282
00:16:13,320 --> 00:16:16,640
But now as we log in as Jessica Davis,
283
283
00:16:16,640 --> 00:16:18,960
you will see that these values here,
284
284
00:16:18,960 --> 00:16:21,060
will all change accordingly.
285
285
00:16:21,060 --> 00:16:23,713
So let's see, and yes.
286
286
00:16:24,860 --> 00:16:26,580
So that's great.
287
287
00:16:26,580 --> 00:16:28,690
Now we are getting all of these values.
288
288
00:16:28,690 --> 00:16:31,010
So this data here dynamically,
289
289
00:16:31,010 --> 00:16:33,900
really from the account object itself.
290
290
00:16:33,900 --> 00:16:36,660
So we have all her movements,
291
291
00:16:36,660 --> 00:16:40,760
we calculated all of these statistics or summaries.
292
292
00:16:40,760 --> 00:16:42,860
And of course also the balance,
293
293
00:16:42,860 --> 00:16:45,973
is now really about this account itself.
294
294
00:16:46,920 --> 00:16:48,023
And we have more.
295
295
00:16:49,630 --> 00:16:50,910
Let's try Steven here.
296
296
00:16:50,910 --> 00:16:53,150
So Steven Thomas Williams,
297
297
00:16:53,150 --> 00:16:54,993
with pin three, three, three, three.
298
298
00:16:56,830 --> 00:17:01,530
And this, kind of messed up our UI here,
299
299
00:17:01,530 --> 00:17:03,113
because of this calculation.
300
300
00:17:05,050 --> 00:17:07,970
So Steven only has a balance of 10 Euros.
301
301
00:17:07,970 --> 00:17:10,173
And now finally, we can try Sarah Smith.
302
302
00:17:13,740 --> 00:17:15,220
And so once again,
303
303
00:17:15,220 --> 00:17:17,743
we see all her different movements here,
304
304
00:17:18,810 --> 00:17:21,390
and yeah, this is great.
305
305
00:17:21,390 --> 00:17:24,883
So this now really works depending on the user's data.
306
306
00:17:26,200 --> 00:17:27,763
So let's go back here.
307
307
00:17:30,400 --> 00:17:33,280
So what I want to do next is to, as we log in,
308
308
00:17:33,280 --> 00:17:35,683
also get rid of this data here.
309
309
00:17:37,060 --> 00:17:40,530
Okay, so basically emptying these two fields.
310
310
00:17:40,530 --> 00:17:43,570
And also as we log in, like this,
311
311
00:17:43,570 --> 00:17:46,423
I didn't want this field here to lose its focus.
312
312
00:17:48,720 --> 00:17:51,283
So let's do that before this.
313
313
00:17:55,230 --> 00:17:57,920
So, clear the input fields.
314
314
00:17:57,920 --> 00:18:00,180
And so, we already know that the fields
315
315
00:18:00,180 --> 00:18:04,730
are input login username,
316
316
00:18:04,730 --> 00:18:07,630
which we want to set to the empty string,
317
317
00:18:07,630 --> 00:18:10,210
and then also input login pin.
318
318
00:18:10,210 --> 00:18:12,033
And we can do it like this,
319
319
00:18:13,600 --> 00:18:16,600
login pin also set it to equal,
320
320
00:18:16,600 --> 00:18:20,280
because the assignment operator works from right to left.
321
321
00:18:20,280 --> 00:18:25,280
So it will start here assigning equal to this field here,
322
322
00:18:26,010 --> 00:18:28,500
and then this here will become the empty string.
323
323
00:18:28,500 --> 00:18:31,733
And so then empty string will also be assigned to this one.
324
324
00:18:32,700 --> 00:18:36,183
We are just missing the dot value here.
325
325
00:18:37,720 --> 00:18:40,970
Otherwise we would set the entire element to the empty
326
326
00:18:40,970 --> 00:18:43,173
string, I'm I right?
327
327
00:18:44,470 --> 00:18:46,653
So JS, one, one, one, one.
328
328
00:18:48,020 --> 00:18:50,830
Okay, and now this happens, what I mentioned
329
329
00:18:50,830 --> 00:18:54,870
before is that this field here is still has this focus,
330
330
00:18:54,870 --> 00:18:57,490
so we can see the cursor there blinking.
331
331
00:18:57,490 --> 00:19:00,970
And so, that's a bit ugly.
332
332
00:19:00,970 --> 00:19:02,850
And so on that field,
333
333
00:19:02,850 --> 00:19:05,850
so input login pin.
334
334
00:19:05,850 --> 00:19:09,570
We can use this blur function or method.
335
335
00:19:09,570 --> 00:19:12,300
So just call blur, and so that will make
336
336
00:19:12,300 --> 00:19:14,993
it so that this field loses its focus.
337
337
00:19:18,070 --> 00:19:20,603
So you see, now it looks great.
338
338
00:19:21,490 --> 00:19:22,870
And now just to finish,
339
339
00:19:22,870 --> 00:19:26,630
we also need to come back to this function here,
340
340
00:19:26,630 --> 00:19:28,680
just as I mentioned earlier.
341
341
00:19:28,680 --> 00:19:31,653
So calc display summary, and let's go there,
342
342
00:19:33,240 --> 00:19:35,810
so this one here.
343
343
00:19:35,810 --> 00:19:38,440
And as you see, we calculated the interest
344
344
00:19:38,440 --> 00:19:42,600
using this 1.2 rate, right?
345
345
00:19:42,600 --> 00:19:44,690
So right now, for all of the accounts,
346
346
00:19:44,690 --> 00:19:47,270
the interest rate is now calculated using
347
347
00:19:47,270 --> 00:19:49,650
this 1.2 interest rate.
348
348
00:19:49,650 --> 00:19:52,690
However, as we take a look at the accounts,
349
349
00:19:52,690 --> 00:19:56,000
each of them actually has a different interest rate.
350
350
00:19:56,000 --> 00:20:00,430
So this one has 1.2, but this one has 1.5,
351
351
00:20:00,430 --> 00:20:04,710
and this one has less, so it gets a less interest.
352
352
00:20:04,710 --> 00:20:08,830
And so now of course, we also want to dynamically use
353
353
00:20:08,830 --> 00:20:12,830
this interest rate depending on the current user, right?
354
354
00:20:12,830 --> 00:20:13,883
That makes sense.
355
355
00:20:14,780 --> 00:20:19,510
And so, we have to modify this function here a little bit.
356
356
00:20:19,510 --> 00:20:22,920
And so, in order to get access to that data,
357
357
00:20:22,920 --> 00:20:24,540
so to that interest rate,
358
358
00:20:24,540 --> 00:20:27,260
we now need more than just the movements.
359
359
00:20:27,260 --> 00:20:31,200
Instead of the movements, we want now, the entire account.
360
360
00:20:31,200 --> 00:20:34,460
Because then we can take the movements from the account,
361
361
00:20:34,460 --> 00:20:36,470
and also the interest rate.
362
362
00:20:36,470 --> 00:20:40,520
Alright, so again, we will now change this function
363
363
00:20:40,520 --> 00:20:42,930
and pass in the entire account,
364
364
00:20:42,930 --> 00:20:45,280
and not just the movements array.
365
365
00:20:45,280 --> 00:20:48,090
And so then from there, we will be able to take
366
366
00:20:48,090 --> 00:20:50,430
the movements that we need to calculate
367
367
00:20:50,430 --> 00:20:52,500
these three statistics here.
368
368
00:20:52,500 --> 00:20:55,723
And then also the interest rate that we have here.
369
369
00:20:57,930 --> 00:21:00,863
So account, let's just call it,
370
370
00:21:01,710 --> 00:21:05,543
or let's just call ACC one more time.
371
371
00:21:07,260 --> 00:21:09,540
So here, now we need to take the movements
372
372
00:21:09,540 --> 00:21:13,023
from that account, the same here and here.
373
373
00:21:14,810 --> 00:21:19,330
Alright, and now here, instead of this 1.2 fixed rate,
374
374
00:21:19,330 --> 00:21:20,970
we take ACC.interestrate
375
375
00:21:24,580 --> 00:21:27,153
that's in there, alright.
376
376
00:21:28,320 --> 00:21:31,660
So let's just see if everything still works,
377
377
00:21:31,660 --> 00:21:34,290
and let's see it with Steven.
378
378
00:21:34,290 --> 00:21:38,063
So that was STW and three, three, three, three.
379
379
00:21:39,110 --> 00:21:42,333
And you see that now our UI is no longer messed up.
380
380
00:21:43,220 --> 00:21:46,620
Ah, but of course we forgot to call
381
381
00:21:46,620 --> 00:21:48,510
this function here correctly.
382
382
00:21:48,510 --> 00:21:50,560
That's probably why we got to this error.
383
383
00:21:52,850 --> 00:21:56,610
Yeah, alright, so,
384
384
00:21:56,610 --> 00:21:59,540
so down here we are still calling this function
385
385
00:21:59,540 --> 00:22:01,073
only with the movements array.
386
386
00:22:02,130 --> 00:22:05,600
So we need to instead, pass in the entire account
387
387
00:22:05,600 --> 00:22:09,033
because as you see, now we do need the account here.
388
388
00:22:10,260 --> 00:22:11,557
So try that again, TW,
389
389
00:22:18,180 --> 00:22:20,480
and so now we get to correct interest.
390
390
00:22:20,480 --> 00:22:23,520
And to, maybe you remember that before it was different,
391
391
00:22:23,520 --> 00:22:26,740
it was this crazy long number with a lot of zeroes,
392
392
00:22:26,740 --> 00:22:29,393
which messed up our user interface here.
393
393
00:22:30,840 --> 00:22:34,270
So, this means that it is now being calculated
394
394
00:22:34,270 --> 00:22:36,550
differently for each of the user,
395
395
00:22:36,550 --> 00:22:39,860
according to their own specific interest rate.
396
396
00:22:39,860 --> 00:22:43,850
Great, and with this, we implemented all of the tasks
397
397
00:22:43,850 --> 00:22:47,630
that we had in our flow chart for this functionality.
398
398
00:22:47,630 --> 00:22:49,350
And in practice, what this means,
399
399
00:22:49,350 --> 00:22:52,350
is that for the first time, we made all of this data
400
400
00:22:52,350 --> 00:22:55,330
that we see here in our application, dynamic.
401
401
00:22:55,330 --> 00:22:58,963
So depending on which user is actually logging in.
402
402
00:23:00,720 --> 00:23:02,880
So let's see that change again,
403
403
00:23:02,880 --> 00:23:04,837
let's try a wrong pin here.
404
404
00:23:04,837 --> 00:23:06,940
And so now nothing happens.
405
405
00:23:06,940 --> 00:23:10,330
And of course we could now hide the user interface,
406
406
00:23:10,330 --> 00:23:12,290
and display an error message,
407
407
00:23:12,290 --> 00:23:14,130
but I want to keep it simple here.
408
408
00:23:14,130 --> 00:23:16,610
So this is just a simple learning application.
409
409
00:23:16,610 --> 00:23:19,670
So we don't need to mess with all of that.
410
410
00:23:19,670 --> 00:23:23,470
What matters is only the correct version for now.
411
411
00:23:23,470 --> 00:23:25,120
And so with the correct pin,
412
412
00:23:25,120 --> 00:23:27,130
now as you saw the data changed here,
413
413
00:23:27,130 --> 00:23:29,113
back to this Jonas account.
414
414
00:23:30,230 --> 00:23:32,190
Awesome, that's great.
415
415
00:23:32,190 --> 00:23:34,340
So, that's really great progress.
416
416
00:23:34,340 --> 00:23:38,550
Congratulations for making it this far in this section.
417
417
00:23:38,550 --> 00:23:42,100
I know there's a lot to learn and a lot to take in,
418
418
00:23:42,100 --> 00:23:46,000
but I hope that this lecture too, was clear to you,
419
419
00:23:46,000 --> 00:23:48,110
how everything worked here.
420
420
00:23:48,110 --> 00:23:51,210
And just to recap, clearly the most important part
421
421
00:23:51,210 --> 00:23:55,420
here is the usage of this find method here.
422
422
00:23:55,420 --> 00:23:59,070
And knowing that this is the correct method for the job.
423
423
00:23:59,070 --> 00:24:01,640
So maybe analyze this line here a little bit,
424
424
00:24:01,640 --> 00:24:04,430
and then see exactly what happens here.
425
425
00:24:04,430 --> 00:24:07,493
Also this nice usage of the optional chaining,
426
426
00:24:08,340 --> 00:24:11,620
and then we are ready to implement our next feature.
427
427
00:24:11,620 --> 00:24:14,010
We're just gonna be transferring money,
428
428
00:24:14,010 --> 00:24:16,193
from one of our users to another.
37267
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.