WEBVTT 1 00:00:01.410 --> 00:00:05.040 Let's now finally implement the login feature 2 00:00:05.040 --> 00:00:06.750 of our application. 3 00:00:06.750 --> 00:00:09.180 And this is gonna be a lot of work 4 00:00:09.180 --> 00:00:11.313 so let's get started right away. 5 00:00:13.080 --> 00:00:16.923 And to start, let's take a look at our demo application. 6 00:00:18.510 --> 00:00:20.880 So in this case here in the beginning, 7 00:00:20.880 --> 00:00:24.720 we cannot see anything, so there's no logged in user. 8 00:00:24.720 --> 00:00:27.600 And then we can input a username. 9 00:00:27.600 --> 00:00:30.480 And so this is the kind of username that we computed 10 00:00:30.480 --> 00:00:33.870 before, remember, and then the PIN. 11 00:00:33.870 --> 00:00:35.460 And if that is correct, 12 00:00:35.460 --> 00:00:38.643 so if the PIN corresponding to this account is correct, 13 00:00:39.480 --> 00:00:40.920 then we get logged in. 14 00:00:40.920 --> 00:00:44.580 And that's gonna happen whether we click on this button here 15 00:00:44.580 --> 00:00:46.143 or hit the Enter key. 16 00:00:47.130 --> 00:00:49.380 And so then all of this appears, 17 00:00:49.380 --> 00:00:52.023 so all the values here are calculated. 18 00:00:53.040 --> 00:00:56.460 And yeah, so that's the main thing that we need 19 00:00:56.460 --> 00:00:59.130 to do in this lecture. 20 00:00:59.130 --> 00:01:01.650 Then of course, if someone else logs in, 21 00:01:01.650 --> 00:01:04.113 then their values are gonna be displayed. 22 00:01:06.870 --> 00:01:11.870 And so let's take a look at the HTML here of this form. 23 00:01:13.350 --> 00:01:15.900 So indeed here we have a form element 24 00:01:15.900 --> 00:01:18.090 and this form has a button. 25 00:01:18.090 --> 00:01:20.580 And so it's onto this login button 26 00:01:20.580 --> 00:01:23.910 that we will attach the addEventListener method. 27 00:01:23.910 --> 00:01:25.950 Then as for the inputs, 28 00:01:25.950 --> 00:01:28.800 the username is gonna come from this one 29 00:01:28.800 --> 00:01:32.460 with this class, login user dash dash input. 30 00:01:32.460 --> 00:01:35.610 And the PIN is gonna come from this one. 31 00:01:35.610 --> 00:01:39.633 And as always, I already have all of this here selected. 32 00:01:41.190 --> 00:01:42.693 So this is the button here. 33 00:01:43.982 --> 00:01:47.757 And then we have inputLoginUsername and inputLoginPin. 34 00:01:49.372 --> 00:01:53.133 So let's now create these event handlers. 35 00:01:54.780 --> 00:01:57.633 So event handlers right here. 36 00:02:00.759 --> 00:02:02.909 So btnLogin.addEventListener for the click. 37 00:02:09.450 --> 00:02:13.470 And then as always, our callback function. 38 00:02:13.470 --> 00:02:17.463 And here, let's just log to the console, LOGIN. 39 00:02:21.900 --> 00:02:24.990 And now did you see what happened here? 40 00:02:24.990 --> 00:02:28.803 Take a close look down here what happens as we click. 41 00:02:30.600 --> 00:02:33.660 So for a flash there, you saw the login 42 00:02:33.660 --> 00:02:35.313 and then the page reloaded. 43 00:02:36.720 --> 00:02:40.350 And that's because this is the button in a form element. 44 00:02:40.350 --> 00:02:41.730 And so in HTML, 45 00:02:41.730 --> 00:02:45.000 the default behavior when we click the Submit button 46 00:02:45.000 --> 00:02:47.520 is for the page to reload. 47 00:02:47.520 --> 00:02:50.100 So we need to stop that from happening. 48 00:02:50.100 --> 00:02:53.460 And for that, we need to actually give this function here 49 00:02:53.460 --> 00:02:57.300 the event parameter and let's just call it event. 50 00:02:57.300 --> 00:03:01.080 And you already know how this callback function gets access 51 00:03:01.080 --> 00:03:04.110 to this event object, remember? 52 00:03:04.110 --> 00:03:07.260 And so on that event, we can call a method 53 00:03:07.260 --> 00:03:11.103 called preventDefault, like this. 54 00:03:12.120 --> 00:03:13.650 And so as the name says, 55 00:03:13.650 --> 00:03:17.253 this will then prevent this form from submitting. 56 00:03:18.240 --> 00:03:22.263 So prevent form from submitting. 57 00:03:24.210 --> 00:03:25.473 So let's do that again. 58 00:03:26.310 --> 00:03:30.333 And now we fixed that problem and we can see LOGIN. 59 00:03:32.250 --> 00:03:35.190 Now another thing that's great about forms 60 00:03:35.190 --> 00:03:38.580 is that whenever we have one of these fields here inputted, 61 00:03:38.580 --> 00:03:41.970 and when we then hit Enter like this, 62 00:03:41.970 --> 00:03:44.370 then that will actually automatically trigger 63 00:03:44.370 --> 00:03:46.653 a click event on this button. 64 00:03:48.012 --> 00:03:51.780 So once again, hitting Enter in this field 65 00:03:51.780 --> 00:03:54.210 or in this field is exactly the same 66 00:03:54.210 --> 00:03:56.730 as the user clicking right here. 67 00:03:56.730 --> 00:04:00.390 So both of these things will trigger a click event. 68 00:04:00.390 --> 00:04:03.000 So you see as I hit Enter, 69 00:04:03.000 --> 00:04:04.893 we get more and more click events. 70 00:04:05.730 --> 00:04:10.380 So that's why we get then LOGIN logged to the console. 71 00:04:10.380 --> 00:04:12.900 But now let's do the actual work. 72 00:04:12.900 --> 00:04:15.030 So to log the user actually in, 73 00:04:15.030 --> 00:04:18.150 we need to find the account from the accounts array 74 00:04:18.150 --> 00:04:21.000 with the username that the user inputted. 75 00:04:21.000 --> 00:04:25.410 And so that's where our find method comes into play again. 76 00:04:25.410 --> 00:04:28.203 So we can do accounts.find, 77 00:04:29.760 --> 00:04:31.500 and then this is actually the same 78 00:04:31.500 --> 00:04:33.063 that we did in the last video. 79 00:04:34.170 --> 00:04:39.170 So account.owner should be the same as, 80 00:04:39.540 --> 00:04:42.300 so three equals actually. 81 00:04:42.300 --> 00:04:46.317 And so remember we have this value at inputLoginUsername. 82 00:04:49.159 --> 00:04:52.080 So that is this element here. 83 00:04:52.080 --> 00:04:55.380 And then from there we need to take the value property. 84 00:04:55.380 --> 00:04:56.940 Remember that? 85 00:04:56.940 --> 00:05:01.920 So we did this here, I think in the guess my number game 86 00:05:01.920 --> 00:05:05.460 where we also read the value out of an input field. 87 00:05:05.460 --> 00:05:07.203 And so here, this is the same. 88 00:05:08.700 --> 00:05:12.180 And so now let's actually save this into a variable. 89 00:05:12.180 --> 00:05:14.970 Now this variable needs to be defined 90 00:05:14.970 --> 00:05:17.013 outside of this function. 91 00:05:18.520 --> 00:05:20.940 And that's because we will need this information 92 00:05:20.940 --> 00:05:25.020 about the current account also later in other functions. 93 00:05:25.020 --> 00:05:29.010 So it's a good thing to have this big important information 94 00:05:29.010 --> 00:05:32.670 outside of this function so that we can then remember it 95 00:05:32.670 --> 00:05:35.040 for other actions in our application. 96 00:05:35.040 --> 00:05:38.220 For example, when we transfer money here, then we need 97 00:05:38.220 --> 00:05:41.880 to know from which account that money should actually go. 98 00:05:41.880 --> 00:05:45.633 And so for that, we need the current account. 99 00:05:47.700 --> 00:05:51.660 So currentAccount, and here we just define it 100 00:05:51.660 --> 00:05:53.313 and that's why we need a let. 101 00:05:54.180 --> 00:05:56.583 And so then here we assign it this value. 102 00:05:57.720 --> 00:05:59.333 So currentAccount. 103 00:06:02.850 --> 00:06:03.993 So let's check that. 104 00:06:08.100 --> 00:06:12.930 So js, and we get undefined. 105 00:06:12.930 --> 00:06:15.000 So there was some problem here, 106 00:06:15.000 --> 00:06:18.300 and the problem is, as I see right away, 107 00:06:18.300 --> 00:06:20.160 is that we are looking for the owner, 108 00:06:20.160 --> 00:06:22.950 but we need to look for the username. 109 00:06:22.950 --> 00:06:24.630 So the owner is the whole name, 110 00:06:24.630 --> 00:06:27.570 but the username property is these properties 111 00:06:27.570 --> 00:06:29.370 that we created earlier. 112 00:06:29.370 --> 00:06:31.713 So here in this function, remember? 113 00:06:33.750 --> 00:06:37.530 So we need to compare this value here that the user inputs 114 00:06:37.530 --> 00:06:39.363 of course, to that username. 115 00:06:40.500 --> 00:06:42.180 So try that again. 116 00:06:42.180 --> 00:06:44.820 And now here we get the object which has 117 00:06:44.820 --> 00:06:46.533 exactly this username. 118 00:06:48.120 --> 00:06:51.843 And so it is here, my object basically. 119 00:06:54.330 --> 00:06:59.330 So we got the user that is trying to log in 120 00:06:59.370 --> 00:07:01.020 and now all we need to do in order 121 00:07:01.020 --> 00:07:03.360 to actually log the user in is 122 00:07:03.360 --> 00:07:06.180 to check if the PIN is correct. 123 00:07:06.180 --> 00:07:08.490 So PIN here is like a password, 124 00:07:08.490 --> 00:07:12.450 but something that we usually use like in an ATM. 125 00:07:12.450 --> 00:07:15.720 And so I decided to just go with that here 126 00:07:15.720 --> 00:07:17.970 because I think this also looks a little bit 127 00:07:17.970 --> 00:07:19.743 like an ATM machine here. 128 00:07:21.330 --> 00:07:23.553 So let's then do that test. 129 00:07:25.140 --> 00:07:30.140 So if currentAccount.pin is equal to inputLoginPin. 130 00:07:35.790 --> 00:07:38.670 So that's the variable that holds the selection 131 00:07:38.670 --> 00:07:40.260 of selecting this element. 132 00:07:40.260 --> 00:07:43.920 And then again, we need to take the value. 133 00:07:43.920 --> 00:07:48.352 And finally, we also need to convert this 134 00:07:48.352 --> 00:07:52.290 to a number, because as I mentioned earlier, 135 00:07:52.290 --> 00:07:54.453 this value will always be a string. 136 00:07:57.390 --> 00:07:59.140 And so here, before we do anything, 137 00:08:00.158 --> 00:08:03.183 let's just log in again here to the console. 138 00:08:06.513 --> 00:08:09.037 So js, and we got logged in. 139 00:08:11.880 --> 00:08:14.133 But if we only input js, 140 00:08:15.120 --> 00:08:17.850 then we simply get the object itself, 141 00:08:17.850 --> 00:08:21.573 but without being logged in because the PIN is correct. 142 00:08:22.590 --> 00:08:25.170 And now let's try just some other user 143 00:08:25.170 --> 00:08:26.523 to see what happens here. 144 00:08:28.050 --> 00:08:30.300 And we get an error. 145 00:08:30.300 --> 00:08:34.770 So that error is cannot read property pin of undefined. 146 00:08:34.770 --> 00:08:37.980 And so the reason for this is that this object here 147 00:08:37.980 --> 00:08:39.333 is now undefined. 148 00:08:40.290 --> 00:08:44.910 Because no account could be found for this username. 149 00:08:44.910 --> 00:08:46.590 And so the find method, 150 00:08:46.590 --> 00:08:50.520 so this one here, will return undefined if no element 151 00:08:50.520 --> 00:08:52.053 matches this condition. 152 00:08:52.890 --> 00:08:55.680 So that's something that we haven't seen before 153 00:08:55.680 --> 00:08:57.810 and so that's why I'm showing this to you. 154 00:08:57.810 --> 00:09:01.050 But anyway, how should we solve this? 155 00:09:01.050 --> 00:09:04.320 Well the first thing that might come into mind is 156 00:09:04.320 --> 00:09:09.003 to simply check if the currentAccount exists, like this. 157 00:09:09.900 --> 00:09:14.490 So this would fix the problem, but we can do better 158 00:09:14.490 --> 00:09:17.550 because we already learned about something called 159 00:09:17.550 --> 00:09:18.930 optional chaining. 160 00:09:18.930 --> 00:09:19.763 Remember? 161 00:09:20.730 --> 00:09:24.630 So we can do this, and then this pin property 162 00:09:24.630 --> 00:09:26.850 will only be read in case 163 00:09:26.850 --> 00:09:30.330 that the current account here actually exists. 164 00:09:30.330 --> 00:09:31.800 Remember that? 165 00:09:31.800 --> 00:09:36.060 And so this is a lot easier and a lot more elegant. 166 00:09:36.060 --> 00:09:37.263 So let's try that. 167 00:09:39.690 --> 00:09:42.720 And so now nothing happened, so no error. 168 00:09:42.720 --> 00:09:44.880 All we get here is the undefined 169 00:09:44.880 --> 00:09:48.780 because, yeah, this account does not exist, 170 00:09:48.780 --> 00:09:50.613 but that's of course not a problem. 171 00:09:51.964 --> 00:09:55.530 But now in case that the account does exist 172 00:09:55.530 --> 00:09:58.443 and that the PIN is correct, what should we do? 173 00:09:59.340 --> 00:10:02.490 Well, let's take a look at our flowchart here. 174 00:10:02.490 --> 00:10:04.503 So this is the part we already checked. 175 00:10:05.371 --> 00:10:07.443 So if we have the correct credentials. 176 00:10:08.700 --> 00:10:12.563 And so if yes, then we should display the UI 177 00:10:12.563 --> 00:10:14.580 and the welcome message. 178 00:10:14.580 --> 00:10:16.803 So let's write that here in our script. 179 00:10:18.000 --> 00:10:18.933 Put that here. 180 00:10:22.530 --> 00:10:24.930 And so I like to kind of plan out 181 00:10:24.930 --> 00:10:27.090 what I'm doing here using comments. 182 00:10:27.090 --> 00:10:31.443 So display UI and a welcome message. 183 00:10:35.250 --> 00:10:39.720 Next up, we should display and calculate the balance. 184 00:10:39.720 --> 00:10:41.220 Then the same with the summary 185 00:10:41.220 --> 00:10:43.353 and the same with the movements. 186 00:10:44.520 --> 00:10:45.930 This part here, we are leaving 187 00:10:45.930 --> 00:10:48.753 for the next section about the timer. 188 00:10:50.010 --> 00:10:52.503 So display balance, summary, and movements. 189 00:10:59.400 --> 00:11:04.400 So display movements, display balance, display summary. 190 00:11:10.560 --> 00:11:12.960 And let's start with the message here. 191 00:11:12.960 --> 00:11:14.913 So that is this element here. 192 00:11:15.780 --> 00:11:19.263 So let me inspect that. 193 00:11:21.210 --> 00:11:24.780 So it's this paragraph here called welcome. 194 00:11:24.780 --> 00:11:28.830 And so as always, I already have that selected. 195 00:11:28.830 --> 00:11:33.830 So it's a label, so probably it's called labelWelcome. 196 00:11:34.770 --> 00:11:37.590 Label, ah, indeed, here it is, 197 00:11:37.590 --> 00:11:41.523 labelWelcome.textContent as always. 198 00:11:42.600 --> 00:11:45.270 And then here we are gonna write, welcome back, 199 00:11:45.270 --> 00:11:47.170 and then the first name of the person. 200 00:11:49.111 --> 00:11:54.111 Welcome back, and then the owner of the current account. 201 00:11:54.210 --> 00:11:57.660 So that's currentAccount.owner 202 00:11:57.660 --> 00:11:59.343 and then only the first word. 203 00:12:00.589 --> 00:12:02.250 So how do we do that? 204 00:12:02.250 --> 00:12:04.683 Well, we use our good friend split, 205 00:12:06.030 --> 00:12:07.920 and we split it with a space. 206 00:12:07.920 --> 00:12:10.980 So as I said, we use this one all the time. 207 00:12:10.980 --> 00:12:13.230 And then from the resulting array, 208 00:12:13.230 --> 00:12:16.413 we simply take the first element, like this. 209 00:12:18.300 --> 00:12:21.000 So this displays the message 210 00:12:21.000 --> 00:12:23.400 and now about displaying the UI, 211 00:12:23.400 --> 00:12:27.480 remember how in the beginning we set the opacity here 212 00:12:27.480 --> 00:12:31.890 from zero basically back to 100, which is the default. 213 00:12:31.890 --> 00:12:35.190 So usually the opacity here is at zero. 214 00:12:35.190 --> 00:12:37.170 And so now when we log the user in, 215 00:12:37.170 --> 00:12:40.623 we actually set this opacity here to 100. 216 00:12:41.670 --> 00:12:45.183 So as we save this now it will all disappear. 217 00:12:46.980 --> 00:12:51.840 And so now what we will do is the containerApp, 218 00:12:51.840 --> 00:12:54.360 I think, yes. 219 00:12:54.360 --> 00:12:58.470 So containerApp is the element that we selected previously, 220 00:12:58.470 --> 00:13:00.363 which has this app class. 221 00:13:03.061 --> 00:13:06.930 So this element, we will manipulate the style 222 00:13:06.930 --> 00:13:09.633 and in particular, the opacity style. 223 00:13:11.190 --> 00:13:13.890 Now remember how I said in another project 224 00:13:13.890 --> 00:13:17.542 that it's also good to use classes for this. 225 00:13:17.542 --> 00:13:20.880 But in this case it's really just one style, 226 00:13:20.880 --> 00:13:24.660 so it's not a big work to just do it like this. 227 00:13:24.660 --> 00:13:27.093 So let's test this one out for now. 228 00:13:28.440 --> 00:13:30.963 So js and my PIN. 229 00:13:31.920 --> 00:13:35.070 And indeed we get our message here 230 00:13:35.070 --> 00:13:38.583 and also we get everything here now back to visible. 231 00:13:39.690 --> 00:13:42.603 And Jessica Davis now, which has PIN 2222. 232 00:13:44.100 --> 00:13:46.233 And so now we also get Jessica. 233 00:13:47.310 --> 00:13:49.590 Now as you see these balances 234 00:13:49.590 --> 00:13:52.620 and these movements here, they're all still hard coded 235 00:13:52.620 --> 00:13:56.520 from what we had back here. 236 00:13:56.520 --> 00:13:58.320 So here we called calcDisplaySummary 237 00:13:59.840 --> 00:14:02.400 and also the balance and the movements. 238 00:14:02.400 --> 00:14:04.890 But now we want to do that not here, 239 00:14:04.890 --> 00:14:07.503 but actually inside of the login function. 240 00:14:08.370 --> 00:14:09.993 So let's remove all of this, 241 00:14:11.670 --> 00:14:13.650 again, because we do not want 242 00:14:13.650 --> 00:14:16.140 to call these functions right in the beginning 243 00:14:16.140 --> 00:14:18.030 when our script is loaded. 244 00:14:18.030 --> 00:14:19.440 We only want to calculate 245 00:14:19.440 --> 00:14:21.810 and display the balance and the movements 246 00:14:21.810 --> 00:14:25.410 and the summary as soon as we actually get the data 247 00:14:25.410 --> 00:14:27.660 that we want to display. 248 00:14:27.660 --> 00:14:28.593 That makes sense. 249 00:14:30.630 --> 00:14:35.520 So let's remove all of that and actually do it here. 250 00:14:39.540 --> 00:14:41.620 So displayMovements, 251 00:14:44.160 --> 00:14:47.777 and then it is the currentAccount.movements. 252 00:14:51.623 --> 00:14:54.300 And that's because this method here, 253 00:14:54.300 --> 00:14:55.980 or actually this function here, 254 00:14:55.980 --> 00:14:58.590 it expects a movement argument. 255 00:14:58.590 --> 00:15:02.250 And as we hover this function name, VS Code is so smart 256 00:15:02.250 --> 00:15:04.440 that it actually shows it to us here. 257 00:15:04.440 --> 00:15:07.200 And so from there, we can immediately see what we need 258 00:15:07.200 --> 00:15:09.270 to pass into the function. 259 00:15:09.270 --> 00:15:10.773 So that's really handy. 260 00:15:11.700 --> 00:15:13.503 Then the same with the balance, 261 00:15:15.502 --> 00:15:18.183 so display or calcDisplayBalance actually. 262 00:15:19.230 --> 00:15:22.440 And so once again, let's just hover this here 263 00:15:22.440 --> 00:15:25.443 to make sure what we need and it is the movements, 264 00:15:26.580 --> 00:15:30.753 so that data is stored in the currentAccount.movements. 265 00:15:33.270 --> 00:15:35.343 And finally also the summary. 266 00:15:36.210 --> 00:15:37.310 So calcDisplaySummary. 267 00:15:40.170 --> 00:15:42.640 And once again we will need the movements 268 00:15:43.800 --> 00:15:47.763 so that data is in currentAccount.movements. 269 00:15:48.730 --> 00:15:51.750 Now we will have to come back to this function here 270 00:15:51.750 --> 00:15:53.970 by the end of this lecture, 271 00:15:53.970 --> 00:15:55.820 but for now, let's leave it like this 272 00:15:56.820 --> 00:16:00.063 and let's log in again, first with Jonas. 273 00:16:01.500 --> 00:16:04.470 And so this is the data that we are already used 274 00:16:04.470 --> 00:16:08.070 to seeing, this balance value and this movements here, 275 00:16:08.070 --> 00:16:11.580 because we have always been printing these values here 276 00:16:11.580 --> 00:16:13.320 using that account. 277 00:16:13.320 --> 00:16:17.490 But now as we log in as Jessica Davis, you will see 278 00:16:17.490 --> 00:16:21.060 that these values here will all change accordingly. 279 00:16:21.060 --> 00:16:22.680 So let's see. 280 00:16:22.680 --> 00:16:26.580 And yes, so that's great. 281 00:16:26.580 --> 00:16:28.680 Now we are getting all of these values. 282 00:16:28.680 --> 00:16:31.020 So this data here dynamically 283 00:16:31.020 --> 00:16:33.900 really from the account object itself. 284 00:16:33.900 --> 00:16:36.660 So we have all her movements, 285 00:16:36.660 --> 00:16:40.770 we calculated all of these statistics or summaries. 286 00:16:40.770 --> 00:16:42.870 And of course also the balance 287 00:16:42.870 --> 00:16:45.963 is now really about this account itself. 288 00:16:46.920 --> 00:16:48.003 And we have more. 289 00:16:49.620 --> 00:16:50.910 Let's try Steven here. 290 00:16:50.910 --> 00:16:54.993 So Steven Thomas Williams with PIN 3333. 291 00:16:56.820 --> 00:17:01.182 And this kind of messed up our UI here 292 00:17:01.182 --> 00:17:03.123 because of this calculation. 293 00:17:05.040 --> 00:17:07.980 So Steven only has a balance of 10 euros. 294 00:17:07.980 --> 00:17:10.173 And now finally we can try Sarah Smith. 295 00:17:13.740 --> 00:17:17.733 And so once again, we see all her different movements here. 296 00:17:18.810 --> 00:17:21.390 And yeah, this is great. 297 00:17:21.390 --> 00:17:24.903 So this now really works depending on the user's data. 298 00:17:26.190 --> 00:17:27.783 So let's go back here. 299 00:17:30.390 --> 00:17:33.270 So what I want to do next is to, as we log in, 300 00:17:33.270 --> 00:17:35.673 also get rid of this data here. 301 00:17:38.100 --> 00:17:40.530 So basically emptying these two fields 302 00:17:40.530 --> 00:17:43.560 and also as we log in, like this, 303 00:17:43.560 --> 00:17:46.413 I didn't want this field here to lose its focus. 304 00:17:48.720 --> 00:17:51.303 So let's do that before this. 305 00:17:55.230 --> 00:17:57.930 So clear the input fields. 306 00:17:57.930 --> 00:18:00.730 And so we already know that the fields are 307 00:18:01.902 --> 00:18:05.880 inputLoginUsername, which we want to set 308 00:18:05.880 --> 00:18:07.083 to the empty string. 309 00:18:08.392 --> 00:18:10.200 And then also inputLoginPin. 310 00:18:10.200 --> 00:18:14.617 And we can do it like this, LoginPin, also set it to equal 311 00:18:16.590 --> 00:18:20.280 because the assignment operator works from right to left. 312 00:18:20.280 --> 00:18:25.280 So it'll start here assigning equal to this field here. 313 00:18:26.010 --> 00:18:28.500 And then this here will become the empty string. 314 00:18:28.500 --> 00:18:31.743 And so then empty string will also be assigned to this one. 315 00:18:32.610 --> 00:18:36.183 We are just missing the dot value here. 316 00:18:37.710 --> 00:18:40.410 Otherwise we would set the entire element 317 00:18:40.410 --> 00:18:41.613 to the empty string. 318 00:18:44.460 --> 00:18:48.209 So js, 1111. 319 00:18:48.209 --> 00:18:51.660 And now this happens, what I mentioned before 320 00:18:51.660 --> 00:18:54.870 is that this field here still has this focus, 321 00:18:54.870 --> 00:18:57.480 so we can see the cursor there blinking. 322 00:18:57.480 --> 00:19:00.990 And so that's a bit ugly. 323 00:19:00.990 --> 00:19:04.650 And so on that field, so inputLoginPin, 324 00:19:05.850 --> 00:19:09.600 we can use this blur function or method. 325 00:19:09.600 --> 00:19:11.070 So just call blur. 326 00:19:11.070 --> 00:19:15.003 And so that will make it so that this field loses its focus. 327 00:19:18.060 --> 00:19:20.583 So you see, now it looks great. 328 00:19:21.480 --> 00:19:24.420 And now just to finish, we also need to come back 329 00:19:24.420 --> 00:19:28.680 to this function here, just as I mentioned earlier. 330 00:19:28.680 --> 00:19:31.653 So calcDisplaySummary and let's go there. 331 00:19:33.240 --> 00:19:36.690 So this one here, and as you see, 332 00:19:36.690 --> 00:19:40.983 we calculated the interest using this 1.2 rate. 333 00:19:42.570 --> 00:19:44.670 So right now for all of the accounts, 334 00:19:44.670 --> 00:19:46.950 the interest rate is now calculated 335 00:19:46.950 --> 00:19:49.650 using this 1.2 interest rate. 336 00:19:49.650 --> 00:19:52.680 However, as we take a look at the accounts, 337 00:19:52.680 --> 00:19:55.980 each of them actually has a different interest rate. 338 00:19:55.980 --> 00:20:00.420 So this one has 1.2, but this one has 1.5, 339 00:20:00.420 --> 00:20:02.130 and this one has less. 340 00:20:02.130 --> 00:20:04.710 So it gets less interest. 341 00:20:04.710 --> 00:20:06.970 And so now of course we also want 342 00:20:07.853 --> 00:20:10.140 to dynamically use this interest rate 343 00:20:10.140 --> 00:20:11.823 depending on the current user. 344 00:20:12.840 --> 00:20:13.893 That makes sense. 345 00:20:14.760 --> 00:20:19.500 And so we have to modify this function here a little bit. 346 00:20:19.500 --> 00:20:22.920 And so in order to get access to that data, 347 00:20:22.920 --> 00:20:24.540 so to that interest rate, 348 00:20:24.540 --> 00:20:27.270 we now need more than just the movements. 349 00:20:27.270 --> 00:20:31.200 Instead of the movements, we want now the entire account 350 00:20:31.200 --> 00:20:34.470 because then we can take the movements from the account 351 00:20:34.470 --> 00:20:36.003 and also the interest rate. 352 00:20:37.440 --> 00:20:40.530 So again, we will now change this function 353 00:20:40.530 --> 00:20:42.930 and pass in the entire account 354 00:20:42.930 --> 00:20:45.270 and not just the movements array. 355 00:20:45.270 --> 00:20:46.590 And so then from there, 356 00:20:46.590 --> 00:20:48.750 we will be able to take the movements 357 00:20:48.750 --> 00:20:52.500 that we need to calculate these three statistics here. 358 00:20:52.500 --> 00:20:55.743 And then also the interest rate that we have here. 359 00:20:57.930 --> 00:21:00.873 So account, let's just call it, 360 00:21:01.710 --> 00:21:05.553 or let's just call acc one more time. 361 00:21:07.260 --> 00:21:11.130 So here now we need to take the movements from that account. 362 00:21:11.130 --> 00:21:13.023 The same here and here. 363 00:21:15.022 --> 00:21:19.320 And now here, instead of this 1.2 fixed rate, 364 00:21:19.320 --> 00:21:24.320 we take acc dot, the interest rate that's in there. 365 00:21:28.320 --> 00:21:31.680 So let's just see if everything still works. 366 00:21:31.680 --> 00:21:34.290 And let's see it with Steven. 367 00:21:34.290 --> 00:21:38.073 So that was stw and 3333. 368 00:21:39.120 --> 00:21:42.333 And you see that now our UI is no longer messed up. 369 00:21:43.230 --> 00:21:45.641 Ah, but of course we forgot 370 00:21:45.641 --> 00:21:48.510 to call this function here correctly. 371 00:21:48.510 --> 00:21:50.553 That's probably why we got this error. 372 00:21:52.860 --> 00:21:53.943 Yeah, right. 373 00:21:55.512 --> 00:21:59.550 So down here we are still calling this function 374 00:21:59.550 --> 00:22:01.293 only with the movements array. 375 00:22:02.130 --> 00:22:05.580 So we need to instead pass in the entire account 376 00:22:05.580 --> 00:22:09.033 because as you see now we do need the account here. 377 00:22:10.260 --> 00:22:11.880 So try that again, stw. 378 00:22:18.180 --> 00:22:20.460 And so now we get the correct interest. 379 00:22:20.460 --> 00:22:23.490 And maybe you remember that before it was different, 380 00:22:23.490 --> 00:22:25.140 it was this crazy long number 381 00:22:25.140 --> 00:22:29.403 with a lot of zeros which messed up our user interface here. 382 00:22:30.840 --> 00:22:35.220 So this means that it is now being calculated differently 383 00:22:35.220 --> 00:22:37.050 for each of the user according 384 00:22:37.050 --> 00:22:39.840 to their own specific interest rate. 385 00:22:39.840 --> 00:22:40.830 Great. 386 00:22:40.830 --> 00:22:43.740 And with this, we implemented all of the tasks 387 00:22:43.740 --> 00:22:47.610 that we had in our flowchart for this functionality. 388 00:22:47.610 --> 00:22:49.830 And in practice what this means is that 389 00:22:49.830 --> 00:22:52.350 for the first time, we made all of this data 390 00:22:52.350 --> 00:22:55.320 that we see here in our application dynamic. 391 00:22:55.320 --> 00:22:58.953 So depending on which user is actually logging in. 392 00:23:00.720 --> 00:23:05.160 So let's see that change again, let's try a wrong PIN here. 393 00:23:05.160 --> 00:23:06.930 And so now nothing happens. 394 00:23:06.930 --> 00:23:10.320 And of course we could now hide the user interface 395 00:23:10.320 --> 00:23:12.270 and display an error message, 396 00:23:12.270 --> 00:23:14.130 but I want to keep it simple here. 397 00:23:14.130 --> 00:23:16.590 So this is just a simple learning application, 398 00:23:16.590 --> 00:23:19.680 so we don't need to mess with all of that. 399 00:23:19.680 --> 00:23:23.490 What matters is only the correct version for now. 400 00:23:23.490 --> 00:23:25.350 And so with the correct PIN now, 401 00:23:25.350 --> 00:23:27.120 as you saw, the data changed here, 402 00:23:27.120 --> 00:23:29.103 back to this Jonas account. 403 00:23:30.240 --> 00:23:32.190 Awesome, that's great. 404 00:23:32.190 --> 00:23:34.350 So that's really great progress. 405 00:23:34.350 --> 00:23:38.550 Congratulations for making it this far in this section. 406 00:23:38.550 --> 00:23:42.090 I know there's a lot to learn and a lot to take in, 407 00:23:42.090 --> 00:23:45.990 but I hope that this lecture too was clear to you 408 00:23:45.990 --> 00:23:48.120 how everything worked here. 409 00:23:48.120 --> 00:23:52.920 And just to recap, clearly the most important part here is 410 00:23:52.920 --> 00:23:55.410 the usage of this find method here 411 00:23:55.410 --> 00:23:59.070 and knowing that this is the correct method for the job. 412 00:23:59.070 --> 00:24:01.650 So maybe analyze this line here a little bit 413 00:24:01.650 --> 00:24:04.410 and then see exactly what happens here. 414 00:24:04.410 --> 00:24:07.503 Also this nice usage of the optional chaining. 415 00:24:08.340 --> 00:24:11.610 And then we are ready to implement our next feature, 416 00:24:11.610 --> 00:24:14.010 which is gonna be transferring money 417 00:24:14.010 --> 00:24:16.203 from one of our users to another.