Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:00,667 --> 00:00:03,310 In this video we're gonna implement 2 2 00:00:03,310 --> 00:00:06,290 our next feature which is to transfer money 3 3 00:00:06,290 --> 00:00:08,223 from one user to another, 4 4 00:00:10,030 --> 00:00:12,920 and this is how transfers work. 5 5 00:00:12,920 --> 00:00:16,060 So here we input the username of the user 6 6 00:00:16,060 --> 00:00:18,020 to which we want to transfer 7 7 00:00:18,020 --> 00:00:20,349 and then here the amount, okay? 8 8 00:00:20,349 --> 00:00:23,710 And so now we need to attach an event handler 9 9 00:00:23,710 --> 00:00:25,550 to dis button here, 10 10 00:00:25,550 --> 00:00:28,270 and then we're gonna take a look at our flow chart 11 11 00:00:28,270 --> 00:00:29,863 to see what we have to do. 12 12 00:00:31,350 --> 00:00:32,183 Okay? 13 13 00:00:32,183 --> 00:00:34,563 But let's start to take a look here at this element. 14 14 00:00:37,990 --> 00:00:40,380 So it is the button form 15 15 00:00:40,380 --> 00:00:42,370 and then we will take or values 16 16 00:00:42,370 --> 00:00:45,130 from form input amount 17 17 00:00:45,130 --> 00:00:46,863 and form input to. 18 18 00:00:48,870 --> 00:00:52,260 So debts input transferred to 19 19 00:00:52,260 --> 00:00:55,170 and input transfer amount 20 20 00:00:55,170 --> 00:00:57,690 and to button is button transfer. 21 21 00:00:57,690 --> 00:01:01,023 So as always, I already selected them here beforehand. 22 22 00:01:04,970 --> 00:01:07,600 So Let's use 23 23 00:01:07,600 --> 00:01:08,800 button transfer 24 24 00:01:09,930 --> 00:01:11,733 dot add event listener, 25 25 00:01:13,460 --> 00:01:14,293 click, 26 26 00:01:15,210 --> 00:01:17,010 end then our function 27 27 00:01:17,010 --> 00:01:21,410 and we will actually need or event here again, 28 28 00:01:21,410 --> 00:01:22,960 because just like before 29 29 00:01:22,960 --> 00:01:26,520 we need to do event dot prevent default 30 30 00:01:26,520 --> 00:01:28,920 because this one is also a form, 31 31 00:01:28,920 --> 00:01:30,919 and so without this, if we clicked here, 32 32 00:01:30,919 --> 00:01:33,290 then that will reload the page. 33 33 00:01:33,290 --> 00:01:35,420 So this here is pretty common to do 34 34 00:01:35,420 --> 00:01:37,420 when we're working with forms. 35 35 00:01:37,420 --> 00:01:40,135 So preventing the default behavior, 36 36 00:01:40,135 --> 00:01:41,660 okay? 37 37 00:01:41,660 --> 00:01:42,600 Now right? 38 38 00:01:42,600 --> 00:01:44,930 So let's create some data here 39 39 00:01:44,930 --> 00:01:48,503 based on the input data and starting with the amount. 40 40 00:01:50,930 --> 00:01:52,790 So the amount of transfer is 41 41 00:01:54,750 --> 00:01:57,030 input transfer amount 42 42 00:01:57,900 --> 00:01:59,410 dot 43 43 00:01:59,410 --> 00:02:00,650 value 44 44 00:02:00,650 --> 00:02:02,570 and then we need to convert it once again 45 45 00:02:02,570 --> 00:02:03,660 to a value 46 46 00:02:05,300 --> 00:02:07,043 or to a number actually. 47 47 00:02:08,600 --> 00:02:09,433 Okay? 48 48 00:02:09,433 --> 00:02:12,030 And when now as I reload here, 49 49 00:02:12,030 --> 00:02:13,090 of course we lose 50 50 00:02:14,250 --> 00:02:16,330 all this data. 51 51 00:02:16,330 --> 00:02:18,030 So this current data that we need, 52 52 00:02:19,310 --> 00:02:22,280 so now we will have to start to log in always here 53 53 00:02:22,280 --> 00:02:24,772 and we could find a way around this, but yeah, 54 54 00:02:24,772 --> 00:02:27,460 let's just keep logging in 55 55 00:02:27,460 --> 00:02:29,373 whenever we have to check or caught. 56 56 00:02:31,420 --> 00:02:33,620 So anyway, we have the amount 57 57 00:02:33,620 --> 00:02:35,370 and then we also want to figure out 58 58 00:02:35,370 --> 00:02:38,083 the account to which we want to transfer. 59 59 00:02:39,520 --> 00:02:40,490 So const 60 60 00:02:41,730 --> 00:02:43,890 receiver account, 61 61 00:02:43,890 --> 00:02:47,550 and now the value is of course in 62 62 00:02:47,550 --> 00:02:49,240 input transfer 63 63 00:02:50,470 --> 00:02:52,070 to 64 64 00:02:52,070 --> 00:02:53,360 dot value. 65 65 00:02:53,360 --> 00:02:56,550 So that is the string that's gonna be right here. 66 66 00:02:56,550 --> 00:03:00,520 So for example, if we want to transfer to Jessica Davis, 67 67 00:03:00,520 --> 00:03:02,770 that's going to be a JD 68 68 00:03:02,770 --> 00:03:03,840 right? 69 69 00:03:03,840 --> 00:03:05,570 However, debt value alone 70 70 00:03:05,570 --> 00:03:08,830 so that username alone is not that helpful, 71 71 00:03:08,830 --> 00:03:11,050 it is only helpful when we use it 72 72 00:03:11,050 --> 00:03:14,130 to then actually find the account object 73 73 00:03:14,130 --> 00:03:17,300 to which we want to transfer alright 74 74 00:03:17,300 --> 00:03:20,913 and so for that, we once again use defined method. 75 75 00:03:22,640 --> 00:03:24,053 So that's accounts, 76 76 00:03:25,420 --> 00:03:29,220 so that's the array holding all the accounts 77 77 00:03:29,220 --> 00:03:31,220 and then we have the current account 78 78 00:03:32,350 --> 00:03:34,210 and we want to find account 79 79 00:03:35,890 --> 00:03:38,090 Where The username is equal 80 80 00:03:40,580 --> 00:03:44,163 to this value that we put in here, 81 81 00:03:45,500 --> 00:03:46,560 now right. 82 82 00:03:46,560 --> 00:03:50,310 So to recap here, we are now looking for the account 83 83 00:03:50,310 --> 00:03:51,200 which has 84 84 00:03:52,610 --> 00:03:53,790 this value here 85 85 00:03:53,790 --> 00:03:56,470 so that's gonna be the username value 86 86 00:03:56,470 --> 00:03:58,540 that we input into that form, 87 87 00:03:58,540 --> 00:04:00,700 so to which we want to transfer, 88 88 00:04:00,700 --> 00:04:04,530 and so here we are looking for the account with the username 89 89 00:04:04,530 --> 00:04:08,380 which is equal to debts input at username 90 90 00:04:08,380 --> 00:04:11,540 and then we select that from the account once more 91 91 00:04:11,540 --> 00:04:13,223 using the find method here, 92 92 00:04:14,070 --> 00:04:14,903 now okay? 93 93 00:04:14,903 --> 00:04:16,920 So we have this data 94 94 00:04:16,920 --> 00:04:17,753 let's 95 95 00:04:18,590 --> 00:04:20,800 just check if it is correct here 96 96 00:04:20,800 --> 00:04:23,260 by logging it all to the Console, 97 97 00:04:23,260 --> 00:04:25,483 so also the receiver account, 98 98 00:04:27,840 --> 00:04:29,223 so this would be a comma, 99 99 00:04:30,860 --> 00:04:33,810 so I'm logging in as JS with this pin 100 100 00:04:34,690 --> 00:04:38,300 and now let's say I transfer to Jessica Davis, 101 101 00:04:38,300 --> 00:04:39,290 that's JD 102 102 00:04:40,160 --> 00:04:41,193 100 euros, 103 103 00:04:42,520 --> 00:04:46,780 and now in the Console, we indeed get 100 104 104 00:04:46,780 --> 00:04:48,170 and the account 105 105 00:04:48,170 --> 00:04:50,853 with the username that I just input it there. 106 106 00:04:51,700 --> 00:04:54,823 Great, so let's see what we have to do now. 107 107 00:04:56,370 --> 00:04:57,850 So what we will do, 108 108 00:04:57,850 --> 00:05:01,410 is to add a negative movement to the current user 109 109 00:05:01,410 --> 00:05:03,880 and add a positive movement 110 110 00:05:03,880 --> 00:05:07,710 to the recipient and that makes sense, right? 111 111 00:05:07,710 --> 00:05:10,640 So if I transfer 100 to someone, 112 112 00:05:10,640 --> 00:05:12,410 I should lose that 100 113 113 00:05:12,410 --> 00:05:16,040 and the other person should receive that 100 114 114 00:05:16,040 --> 00:05:19,860 otherwise we would just be creating new money, right? 115 115 00:05:19,860 --> 00:05:23,690 So we do that and then we update the UI again, 116 116 00:05:23,690 --> 00:05:26,030 so we show again the movements, 117 117 00:05:26,030 --> 00:05:28,430 summary and balance because all of that 118 118 00:05:28,430 --> 00:05:30,593 will be effected by this transfer. 119 119 00:05:31,500 --> 00:05:34,640 Now what's kind of missing here in this flow chart 120 120 00:05:34,640 --> 00:05:38,990 is that we also actually first need to check some stuff. 121 121 00:05:38,990 --> 00:05:41,020 So we need to check if the amount here 122 122 00:05:41,020 --> 00:05:44,460 is actually a positive number 123 123 00:05:44,460 --> 00:05:47,550 and we also need to check if the current user, 124 124 00:05:47,550 --> 00:05:51,760 so Jonas right now actually has enough money. 125 125 00:05:51,760 --> 00:05:55,060 So I should not be able to transfer 5,000 126 126 00:05:55,060 --> 00:05:59,220 if I only have like 3000 and something, 127 127 00:05:59,220 --> 00:06:00,590 okay? 128 128 00:06:00,590 --> 00:06:03,703 So let's implement that cheque first. 129 129 00:06:06,760 --> 00:06:11,280 So as I just said, the amount needs to be greater than zero 130 130 00:06:11,280 --> 00:06:14,050 otherwise we could do a negative transfer 131 131 00:06:14,050 --> 00:06:16,913 and basically transfer money to ourselves. 132 132 00:06:17,930 --> 00:06:19,690 So this needs to happen 133 133 00:06:19,690 --> 00:06:22,940 and also the balance of the current account 134 134 00:06:22,940 --> 00:06:25,700 needs to be greater or equal the amount 135 135 00:06:25,700 --> 00:06:27,600 that we're trying to transfer. 136 136 00:06:27,600 --> 00:06:31,900 Now, this balance value is actually not stored anywhere, 137 137 00:06:31,900 --> 00:06:33,090 right? 138 138 00:06:33,090 --> 00:06:36,463 So in the place where we calculate this balance, 139 139 00:06:37,330 --> 00:06:39,660 so that's right here. 140 140 00:06:39,660 --> 00:06:41,680 So calc display balance, 141 141 00:06:41,680 --> 00:06:43,670 all we do is to calculate it 142 142 00:06:43,670 --> 00:06:47,550 and then display it immediately on the user interface, 143 143 00:06:47,550 --> 00:06:49,840 but we do not save it anywhere 144 144 00:06:49,840 --> 00:06:51,910 so let's actually change that, 145 145 00:06:51,910 --> 00:06:55,400 so besides only displaying it on the user interface, 146 146 00:06:55,400 --> 00:06:58,640 we also want to save it in the account. 147 147 00:06:58,640 --> 00:07:01,860 Now, how do we get access to that account? 148 148 00:07:01,860 --> 00:07:04,600 Well, we will do the same as we did previously 149 149 00:07:07,491 --> 00:07:09,580 with this function here, 150 150 00:07:09,580 --> 00:07:11,670 where now instead of the movements 151 151 00:07:11,670 --> 00:07:14,330 we passed in the entire account 152 152 00:07:14,330 --> 00:07:17,890 and so then we will be able to read the movements here 153 153 00:07:17,890 --> 00:07:21,940 from that account and also we will be able to then create 154 154 00:07:21,940 --> 00:07:26,533 a new property on that account with the balance, okay? 155 155 00:07:27,430 --> 00:07:29,510 So I hope that makes sense, 156 156 00:07:29,510 --> 00:07:32,230 so we are changing it from movements 157 157 00:07:32,230 --> 00:07:34,490 and so now we will be calling it 158 158 00:07:34,490 --> 00:07:37,250 with an entire account object. 159 159 00:07:37,250 --> 00:07:41,590 So here we need to do account dot movements 160 160 00:07:41,590 --> 00:07:43,780 and before we move on any further, 161 161 00:07:43,780 --> 00:07:45,373 let's call this correctly. 162 162 00:07:46,910 --> 00:07:51,570 So cacl display balance should now only be called 163 163 00:07:51,570 --> 00:07:54,100 with the entire account object 164 164 00:07:54,100 --> 00:07:59,033 and not only with the movements array, okay? 165 165 00:08:00,140 --> 00:08:02,060 So here it is. 166 166 00:08:02,060 --> 00:08:05,630 So now we take the movements from the account object, 167 167 00:08:05,630 --> 00:08:07,280 and then we can add that 168 168 00:08:08,320 --> 00:08:13,320 so we can say account dot balance equals balance 169 169 00:08:15,380 --> 00:08:18,640 and in fact, we can make this even better, 170 170 00:08:18,640 --> 00:08:20,160 we can store this value here 171 171 00:08:20,160 --> 00:08:22,963 immediately in account dot balance. 172 172 00:08:24,130 --> 00:08:27,310 So let's do that, account dot balance here 173 173 00:08:28,280 --> 00:08:31,220 and then we get that property here 174 174 00:08:31,220 --> 00:08:34,030 from account dot balance as well. 175 175 00:08:34,030 --> 00:08:37,460 Great, and remember why all of this works 176 176 00:08:38,340 --> 00:08:41,010 and we have some error here, but that doesn't matter, 177 177 00:08:41,010 --> 00:08:43,500 it's something unrelated now, 178 178 00:08:43,500 --> 00:08:46,520 anyway, let's remember why all of this works, 179 179 00:08:46,520 --> 00:08:51,413 so why we can set, this property here on this account object 180 180 00:08:51,413 --> 00:08:56,413 that we receive, and it will then set that right here 181 181 00:08:56,870 --> 00:08:59,680 on these objects that we have here. 182 182 00:08:59,680 --> 00:09:02,580 Well, and the reason is that, once again, 183 183 00:09:02,580 --> 00:09:05,550 all of these different references to actually point 184 184 00:09:05,550 --> 00:09:10,100 to the exact same objects in the memory heap, okay? 185 185 00:09:10,100 --> 00:09:14,400 So when we access this account, one object here, 186 186 00:09:14,400 --> 00:09:16,613 so down here in the login function, 187 187 00:09:18,030 --> 00:09:23,030 so right here where we create this current account variable, 188 188 00:09:23,038 --> 00:09:27,850 this is of course not really a copy of the object itself. 189 189 00:09:27,850 --> 00:09:29,860 So just as we learned before, 190 190 00:09:29,860 --> 00:09:33,660 this is simply another variable which points to the same 191 191 00:09:33,660 --> 00:09:37,393 so to the original object in the memory heap, okay? 192 192 00:09:38,320 --> 00:09:41,300 So this current account object again 193 193 00:09:41,300 --> 00:09:46,300 is exactly one of these objects that we have right here. 194 194 00:09:46,440 --> 00:09:51,440 So one of the objects of the account array, right? 195 195 00:09:51,720 --> 00:09:53,600 They are the exact same object. 196 196 00:09:53,600 --> 00:09:55,440 They simply have different name, 197 197 00:09:55,440 --> 00:09:57,530 here it is called account one 198 198 00:09:57,530 --> 00:10:00,140 but then down here it might be called 199 199 00:10:01,150 --> 00:10:04,320 the current account, okay? 200 200 00:10:04,320 --> 00:10:08,080 And then we use that current account to pass it 201 201 00:10:08,080 --> 00:10:11,080 into this calc display balance function 202 202 00:10:11,080 --> 00:10:13,300 and so then inside of that function, 203 203 00:10:13,300 --> 00:10:15,550 it will have even another name. 204 204 00:10:15,550 --> 00:10:17,387 So here it will be called acc, 205 205 00:10:18,520 --> 00:10:21,090 but it's still the same object, okay, 206 206 00:10:21,090 --> 00:10:24,570 it's still pointing to the same place in the heap, 207 207 00:10:24,570 --> 00:10:26,970 so in the memory now, right? 208 208 00:10:26,970 --> 00:10:30,653 And therefore setting the balance property here on acc 209 209 00:10:31,490 --> 00:10:34,620 is exactly the same as setting it up there 210 210 00:10:34,620 --> 00:10:37,853 where we first defined the objects, okay? 211 211 00:10:38,900 --> 00:10:41,300 And I will show you that in practice in a second 212 212 00:10:42,750 --> 00:10:44,690 but now let's go here 213 213 00:10:44,690 --> 00:10:47,840 and so this is where this arrow comes from 214 214 00:10:47,840 --> 00:10:49,990 because we don't have any code block 215 215 00:10:49,990 --> 00:10:53,730 and also because there is no second operant here. 216 216 00:10:53,730 --> 00:10:57,220 So anyway, let's go back to this condition here, 217 217 00:10:57,220 --> 00:11:00,880 so we already defined data transfer can only happen 218 218 00:11:00,880 --> 00:11:03,800 if the amount is greater than zero 219 219 00:11:03,800 --> 00:11:07,070 and now the second part is that the current user needs 220 220 00:11:07,070 --> 00:11:10,790 to have enough money to do this transfer 221 221 00:11:10,790 --> 00:11:15,550 and so that means current account dot balance 222 222 00:11:15,550 --> 00:11:19,220 which is the property that we justified alright. 223 223 00:11:19,220 --> 00:11:21,380 So we calculated the balance 224 224 00:11:21,380 --> 00:11:24,803 and that needs to be at least equal to the amount 225 225 00:11:24,803 --> 00:11:28,460 that we're trying to transfer, okay? 226 226 00:11:28,460 --> 00:11:31,570 Also, we should not be able to transfer money 227 227 00:11:31,570 --> 00:11:33,063 to our own account. 228 228 00:11:34,080 --> 00:11:36,650 So that's at that condition as well, 229 229 00:11:36,650 --> 00:11:38,310 so what we're trying to say is 230 230 00:11:38,310 --> 00:11:42,610 that the receiver account dot username 231 231 00:11:42,610 --> 00:11:43,860 must be equal 232 232 00:11:45,140 --> 00:11:46,490 from the current account 233 233 00:11:47,820 --> 00:11:51,953 dot username, alright? 234 234 00:11:51,953 --> 00:11:54,653 Tierra have one equal too much, 235 235 00:11:55,520 --> 00:11:56,640 alright? 236 236 00:11:56,640 --> 00:11:58,600 And actually, we should also check 237 237 00:11:58,600 --> 00:12:01,533 if this receiver account actually exists. 238 238 00:12:02,490 --> 00:12:06,420 So if it doesn't exist, of course, it makes no sense 239 239 00:12:06,420 --> 00:12:08,530 to transfer money there. 240 240 00:12:08,530 --> 00:12:13,530 So we could add that here, like simply testing this, 241 241 00:12:14,350 --> 00:12:17,940 but instead, since we're already trying to read a property 242 242 00:12:17,940 --> 00:12:21,480 from that object here, we can use once again, 243 243 00:12:21,480 --> 00:12:24,120 optional chaining like this 244 244 00:12:24,120 --> 00:12:27,580 and so then if this object here doesn't exist, 245 245 00:12:27,580 --> 00:12:30,610 then immediately this here will become undefined 246 246 00:12:30,610 --> 00:12:33,570 and the whole end operation will fail, 247 247 00:12:33,570 --> 00:12:36,210 and so in this case, we don't need that. 248 248 00:12:36,210 --> 00:12:39,580 Let me just comment it out and so now this should work 249 249 00:12:40,950 --> 00:12:43,350 and so let's just lock something to the Console. 250 250 00:12:45,140 --> 00:12:48,000 So transfer valid 251 251 00:12:48,000 --> 00:12:50,500 and now I will check all of these conditions here. 252 252 00:12:52,430 --> 00:12:57,020 So let's log in and now I want to transfer again 253 253 00:12:57,020 --> 00:13:00,920 to Jessica Davis and I will try to transfer zero 254 254 00:13:03,570 --> 00:13:08,410 so we get zero but we do not get transfer valid. 255 255 00:13:08,410 --> 00:13:11,343 So that means we didn't enter a this "if block" here. 256 256 00:13:12,280 --> 00:13:15,380 Now let's try to transfer more than I have 257 257 00:13:17,290 --> 00:13:22,290 and so this is also not valid but now 500 258 258 00:13:22,390 --> 00:13:24,680 and so all of these should not be true 259 259 00:13:26,490 --> 00:13:28,183 so you'll see a transfer valid. 260 260 00:13:29,210 --> 00:13:33,083 If I try something else, then again nothing should happen, 261 261 00:13:34,160 --> 00:13:36,083 oh, and actually it does happen, 262 262 00:13:36,920 --> 00:13:40,810 so indeed the receiver account is undefined 263 263 00:13:41,760 --> 00:13:45,107 and so this here will now be undefined now 264 264 00:13:45,107 --> 00:13:46,720 but I see what's happening 265 265 00:13:46,720 --> 00:13:50,300 because all that we are asking here is for this here 266 266 00:13:50,300 --> 00:13:54,040 to be different Jandy current account dot username. 267 267 00:13:54,040 --> 00:13:58,000 And so JS is of course different than undefined 268 268 00:13:58,000 --> 00:14:01,000 and therefore this here is still true 269 269 00:14:01,000 --> 00:14:04,370 and so in fact, we need to do this as well. 270 270 00:14:04,370 --> 00:14:06,000 So let's try this again 271 271 00:14:07,090 --> 00:14:09,330 and so you see of course back like this 272 272 00:14:09,330 --> 00:14:11,460 can happen all the time. 273 273 00:14:11,460 --> 00:14:12,850 And so we find them, 274 274 00:14:12,850 --> 00:14:15,240 we fix them and we move on 275 275 00:14:15,240 --> 00:14:20,240 and of course, now we test with some wrong username there, 276 276 00:14:20,720 --> 00:14:23,003 and now nothing happens, okay? 277 277 00:14:23,850 --> 00:14:25,663 So now the transfer is not valid. 278 278 00:14:27,470 --> 00:14:31,130 Now I'm also trying to transfer it to myself 279 279 00:14:31,130 --> 00:14:34,270 and so this is also not valid 280 280 00:14:34,270 --> 00:14:39,270 but finally to Jessica David, it will be valid, okay. 281 281 00:14:40,397 --> 00:14:43,090 And so, now here we can finally do 282 282 00:14:43,090 --> 00:14:45,500 what we intended to do all along. 283 283 00:14:45,500 --> 00:14:47,623 So these steps that we have here, 284 284 00:14:50,450 --> 00:14:52,113 So let's do that. 285 285 00:14:54,070 --> 00:14:57,583 So the current account dot movements, 286 286 00:14:58,570 --> 00:15:00,920 so we will add one new movement 287 287 00:15:00,920 --> 00:15:05,810 and so we're pushing here the amount but negative. 288 288 00:15:05,810 --> 00:15:10,810 So the negative amount and now on the receiver account, 289 289 00:15:14,250 --> 00:15:18,700 We will add a positive movement, okay? 290 290 00:15:18,700 --> 00:15:20,530 And that's actually already it. 291 291 00:15:20,530 --> 00:15:24,083 That's the most important part of doing the transfer. 292 292 00:15:25,460 --> 00:15:26,830 So doing the transfer 293 293 00:15:29,460 --> 00:15:32,673 and then we also want to update the user interface. 294 294 00:15:33,700 --> 00:15:36,600 So we could now copy this code here 295 295 00:15:36,600 --> 00:15:38,350 and paste it there as well 296 296 00:15:38,350 --> 00:15:41,770 but that's not a good practice as you already know 297 297 00:15:41,770 --> 00:15:44,150 and so I will now refactor this code here 298 298 00:15:45,140 --> 00:15:47,170 all into one function. 299 299 00:15:47,170 --> 00:15:48,370 So let me grab this here 300 300 00:15:49,210 --> 00:15:52,940 and dysfunction will be called update UI 301 301 00:15:54,160 --> 00:15:58,053 and it will also receive of course the current account. 302 302 00:16:01,100 --> 00:16:03,813 So let me right now the function here update UI 303 303 00:16:09,740 --> 00:16:12,853 equals function and I'm gonna leave it empty for now, 304 304 00:16:14,950 --> 00:16:15,980 and so indeed here, 305 305 00:16:15,980 --> 00:16:19,660 I need the current account now, okay? 306 306 00:16:19,660 --> 00:16:24,260 So otherwise I could not call this three function then 307 307 00:16:24,260 --> 00:16:25,740 using the account, 308 308 00:16:25,740 --> 00:16:28,580 but here I can call them whatever I want again. 309 309 00:16:28,580 --> 00:16:30,230 So let me just call them account, 310 310 00:16:33,520 --> 00:16:34,870 alright? 311 311 00:16:34,870 --> 00:16:39,050 So we refactored that functionality into its own function 312 312 00:16:39,050 --> 00:16:41,600 and so now we can call this function anywhere 313 313 00:16:41,600 --> 00:16:43,470 that we want in our code, 314 314 00:16:43,470 --> 00:16:45,300 and it will then always perform 315 315 00:16:45,300 --> 00:16:47,533 these three tasks, okay? 316 316 00:16:49,980 --> 00:16:53,180 So here I already called it update UI. 317 317 00:16:53,180 --> 00:16:55,423 We just write it here also as a comment. 318 318 00:16:56,650 --> 00:16:59,390 And now all I have to do is 319 319 00:16:59,390 --> 00:17:01,433 to paste it here as well. 320 320 00:17:03,400 --> 00:17:05,060 Great. 321 321 00:17:05,060 --> 00:17:07,273 So that should be working already. 322 322 00:17:08,470 --> 00:17:11,417 So that's transferred to Jessica Davis 500. 323 323 00:17:14,150 --> 00:17:18,070 And so now I should see one negative movement here, 324 324 00:17:18,070 --> 00:17:20,230 and this should also decrease by a 500 325 325 00:17:21,580 --> 00:17:23,253 and indeed it did. 326 326 00:17:24,800 --> 00:17:26,750 So let's check now here, 327 327 00:17:26,750 --> 00:17:30,823 the accounts variable, 328 328 00:17:32,220 --> 00:17:34,533 just to see if we actually get the balance. 329 329 00:17:36,340 --> 00:17:39,870 So indeed we now have to balance property here. 330 330 00:17:39,870 --> 00:17:41,070 We also have to movements 331 331 00:17:41,070 --> 00:17:46,070 and of course it's going to contain the minus 500, right? 332 332 00:17:47,430 --> 00:17:49,810 So that's the money that we just transferred away 333 333 00:17:49,810 --> 00:17:51,543 to Jessica Davis. 334 334 00:17:53,210 --> 00:17:57,493 And indeed it should already be in Jessica Davis. 335 335 00:17:58,400 --> 00:18:02,003 So her latest movement is now indeed 500. 336 336 00:18:02,990 --> 00:18:06,410 So that's take ticket out also in the user interface. 337 337 00:18:06,410 --> 00:18:08,330 Now, before doing that, 338 338 00:18:08,330 --> 00:18:10,530 the final thing that we're going to do is 339 339 00:18:10,530 --> 00:18:13,003 to clean these input fields. 340 340 00:18:14,000 --> 00:18:18,800 But now just to make sure let's login as Jessica Davis, 341 341 00:18:18,800 --> 00:18:23,800 and then we should get plus 500 here as the latest deposit. 342 342 00:18:24,820 --> 00:18:25,653 Now right? 343 343 00:18:26,940 --> 00:18:27,773 As I was saying, 344 344 00:18:27,773 --> 00:18:31,000 we need to clean out these inputs now 345 345 00:18:31,000 --> 00:18:34,550 and that we will do no matter if the transfer 346 346 00:18:34,550 --> 00:18:36,460 was successful or not. 347 347 00:18:36,460 --> 00:18:40,113 So we can do that outside of this if statement, 348 348 00:18:41,180 --> 00:18:44,763 so just down here or actually we can do it right here, 349 349 00:18:45,650 --> 00:18:47,500 let's get rid of this Console dot log 350 350 00:18:49,350 --> 00:18:53,140 and then input transfer amount 351 351 00:18:53,140 --> 00:18:56,090 equal or actually dot value 352 352 00:18:57,130 --> 00:18:58,700 equal 353 353 00:18:58,700 --> 00:19:00,350 input 354 354 00:19:00,350 --> 00:19:01,440 transferred to 355 355 00:19:02,360 --> 00:19:03,740 equal the empty string 356 356 00:19:05,080 --> 00:19:07,450 and with this we should be finished. 357 357 00:19:07,450 --> 00:19:09,220 Let's try it one more time. 358 358 00:19:09,220 --> 00:19:11,750 This time Jessica Davis will transfer something 359 359 00:19:14,350 --> 00:19:17,960 and so we lost here the latest transfer of course, 360 360 00:19:17,960 --> 00:19:20,130 because the page was reloaded 361 361 00:19:20,130 --> 00:19:22,900 and this data of course then gets lost. 362 362 00:19:22,900 --> 00:19:27,620 So when our page loads the information about the accounts 363 363 00:19:27,620 --> 00:19:30,300 so the account data will always be exactly 364 364 00:19:30,300 --> 00:19:33,220 what we have here in our code, 365 365 00:19:33,220 --> 00:19:34,080 okay? 366 366 00:19:34,080 --> 00:19:36,660 So that's the reason why that data, 367 367 00:19:36,660 --> 00:19:39,993 that 500 transfer is no longer here, 368 368 00:19:41,580 --> 00:19:43,210 but that doesn't matter. 369 369 00:19:43,210 --> 00:19:46,770 So let's transfer it to Steven Williams here 370 370 00:19:47,898 --> 00:19:48,731 1000 371 371 00:19:51,090 --> 00:19:52,940 and we get an error here, 372 372 00:19:52,940 --> 00:19:56,560 assignment two constant variable HTML button 373 373 00:19:56,560 --> 00:19:58,540 so at line 167 374 374 00:19:59,870 --> 00:20:04,023 and oh, one more time I forgot the value here. 375 375 00:20:04,980 --> 00:20:07,993 That's a very stupid mistake, right? 376 376 00:20:09,070 --> 00:20:10,283 Let's try that again. 377 377 00:20:13,040 --> 00:20:15,530 Stephen Thomas Williams, 378 378 00:20:15,530 --> 00:20:16,363 I believe 379 379 00:20:17,900 --> 00:20:19,430 and now it worked 380 380 00:20:19,430 --> 00:20:23,170 so all of our statistics here were updated 381 381 00:20:23,170 --> 00:20:28,020 and indeed now this field or both of the fields are empty 382 382 00:20:28,020 --> 00:20:28,900 and now as we go 383 383 00:20:30,578 --> 00:20:31,453 to this account, 384 384 00:20:33,670 --> 00:20:35,463 how apparently it does not exist. 385 385 00:20:36,750 --> 00:20:38,973 Yeah, it is Steven Thomas Williams. 386 386 00:20:40,000 --> 00:20:40,860 Yeah, 387 387 00:20:40,860 --> 00:20:43,550 so now we get this 1000 deposit here 388 388 00:20:43,550 --> 00:20:45,920 that we just did previously 389 389 00:20:45,920 --> 00:20:46,753 Alright? 390 390 00:20:46,753 --> 00:20:47,650 Awesome! 391 391 00:20:47,650 --> 00:20:49,890 so our application is coming more 392 392 00:20:49,890 --> 00:20:51,423 and more to live here. 32521