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