WEBVTT 1 00:00:00.667 --> 00:00:03.310 In this video we're gonna implement 2 00:00:03.310 --> 00:00:06.290 our next feature which is to transfer money 3 00:00:06.290 --> 00:00:08.223 from one user to another, 4 00:00:10.030 --> 00:00:12.920 and this is how transfers work. 5 00:00:12.920 --> 00:00:16.060 So here we input the username of the user 6 00:00:16.060 --> 00:00:18.020 to which we want to transfer 7 00:00:18.020 --> 00:00:20.349 and then here the amount, okay? 8 00:00:20.349 --> 00:00:23.710 And so now we need to attach an event handler 9 00:00:23.710 --> 00:00:25.550 to dis button here, 10 00:00:25.550 --> 00:00:28.270 and then we're gonna take a look at our flow chart 11 00:00:28.270 --> 00:00:29.863 to see what we have to do. 12 00:00:31.350 --> 00:00:32.183 Okay? 13 00:00:32.183 --> 00:00:34.563 But let's start to take a look here at this element. 14 00:00:37.990 --> 00:00:40.380 So it is the button form 15 00:00:40.380 --> 00:00:42.370 and then we will take or values 16 00:00:42.370 --> 00:00:45.130 from form input amount 17 00:00:45.130 --> 00:00:46.863 and form input to. 18 00:00:48.870 --> 00:00:52.260 So debts input transferred to 19 00:00:52.260 --> 00:00:55.170 and input transfer amount 20 00:00:55.170 --> 00:00:57.690 and to button is button transfer. 21 00:00:57.690 --> 00:01:01.023 So as always, I already selected them here beforehand. 22 00:01:04.970 --> 00:01:07.600 So Let's use 23 00:01:07.600 --> 00:01:08.800 button transfer 24 00:01:09.930 --> 00:01:11.733 dot add event listener, 25 00:01:13.460 --> 00:01:14.293 click, 26 00:01:15.210 --> 00:01:17.010 end then our function 27 00:01:17.010 --> 00:01:21.410 and we will actually need or event here again, 28 00:01:21.410 --> 00:01:22.960 because just like before 29 00:01:22.960 --> 00:01:26.520 we need to do event dot prevent default 30 00:01:26.520 --> 00:01:28.920 because this one is also a form, 31 00:01:28.920 --> 00:01:30.919 and so without this, if we clicked here, 32 00:01:30.919 --> 00:01:33.290 then that will reload the page. 33 00:01:33.290 --> 00:01:35.420 So this here is pretty common to do 34 00:01:35.420 --> 00:01:37.420 when we're working with forms. 35 00:01:37.420 --> 00:01:40.135 So preventing the default behavior, 36 00:01:40.135 --> 00:01:41.660 okay? 37 00:01:41.660 --> 00:01:42.600 Now right? 38 00:01:42.600 --> 00:01:44.930 So let's create some data here 39 00:01:44.930 --> 00:01:48.503 based on the input data and starting with the amount. 40 00:01:50.930 --> 00:01:52.790 So the amount of transfer is 41 00:01:54.750 --> 00:01:57.030 input transfer amount 42 00:01:57.900 --> 00:01:59.410 dot 43 00:01:59.410 --> 00:02:00.650 value 44 00:02:00.650 --> 00:02:02.570 and then we need to convert it once again 45 00:02:02.570 --> 00:02:03.660 to a value 46 00:02:05.300 --> 00:02:07.043 or to a number actually. 47 00:02:08.600 --> 00:02:09.433 Okay? 48 00:02:09.433 --> 00:02:12.030 And when now as I reload here, 49 00:02:12.030 --> 00:02:13.090 of course we lose 50 00:02:14.250 --> 00:02:16.330 all this data. 51 00:02:16.330 --> 00:02:18.030 So this current data that we need, 52 00:02:19.310 --> 00:02:22.280 so now we will have to start to log in always here 53 00:02:22.280 --> 00:02:24.772 and we could find a way around this, but yeah, 54 00:02:24.772 --> 00:02:27.460 let's just keep logging in 55 00:02:27.460 --> 00:02:29.373 whenever we have to check or caught. 56 00:02:31.420 --> 00:02:33.620 So anyway, we have the amount 57 00:02:33.620 --> 00:02:35.370 and then we also want to figure out 58 00:02:35.370 --> 00:02:38.083 the account to which we want to transfer. 59 00:02:39.520 --> 00:02:40.490 So const 60 00:02:41.730 --> 00:02:43.890 receiver account, 61 00:02:43.890 --> 00:02:47.550 and now the value is of course in 62 00:02:47.550 --> 00:02:49.240 input transfer 63 00:02:50.470 --> 00:02:52.070 to 64 00:02:52.070 --> 00:02:53.360 dot value. 65 00:02:53.360 --> 00:02:56.550 So that is the string that's gonna be right here. 66 00:02:56.550 --> 00:03:00.520 So for example, if we want to transfer to Jessica Davis, 67 00:03:00.520 --> 00:03:02.770 that's going to be a JD 68 00:03:02.770 --> 00:03:03.840 right? 69 00:03:03.840 --> 00:03:05.570 However, debt value alone 70 00:03:05.570 --> 00:03:08.830 so that username alone is not that helpful, 71 00:03:08.830 --> 00:03:11.050 it is only helpful when we use it 72 00:03:11.050 --> 00:03:14.130 to then actually find the account object 73 00:03:14.130 --> 00:03:17.300 to which we want to transfer alright 74 00:03:17.300 --> 00:03:20.913 and so for that, we once again use defined method. 75 00:03:22.640 --> 00:03:24.053 So that's accounts, 76 00:03:25.420 --> 00:03:29.220 so that's the array holding all the accounts 77 00:03:29.220 --> 00:03:31.220 and then we have the current account 78 00:03:32.350 --> 00:03:34.210 and we want to find account 79 00:03:35.890 --> 00:03:38.090 Where The username is equal 80 00:03:40.580 --> 00:03:44.163 to this value that we put in here, 81 00:03:45.500 --> 00:03:46.560 now right. 82 00:03:46.560 --> 00:03:50.310 So to recap here, we are now looking for the account 83 00:03:50.310 --> 00:03:51.200 which has 84 00:03:52.610 --> 00:03:53.790 this value here 85 00:03:53.790 --> 00:03:56.470 so that's gonna be the username value 86 00:03:56.470 --> 00:03:58.540 that we input into that form, 87 00:03:58.540 --> 00:04:00.700 so to which we want to transfer, 88 00:04:00.700 --> 00:04:04.530 and so here we are looking for the account with the username 89 00:04:04.530 --> 00:04:08.380 which is equal to debts input at username 90 00:04:08.380 --> 00:04:11.540 and then we select that from the account once more 91 00:04:11.540 --> 00:04:13.223 using the find method here, 92 00:04:14.070 --> 00:04:14.903 now okay? 93 00:04:14.903 --> 00:04:16.920 So we have this data 94 00:04:16.920 --> 00:04:17.753 let's 95 00:04:18.590 --> 00:04:20.800 just check if it is correct here 96 00:04:20.800 --> 00:04:23.260 by logging it all to the Console, 97 00:04:23.260 --> 00:04:25.483 so also the receiver account, 98 00:04:27.840 --> 00:04:29.223 so this would be a comma, 99 00:04:30.860 --> 00:04:33.810 so I'm logging in as JS with this pin 100 00:04:34.690 --> 00:04:38.300 and now let's say I transfer to Jessica Davis, 101 00:04:38.300 --> 00:04:39.290 that's JD 102 00:04:40.160 --> 00:04:41.193 100 euros, 103 00:04:42.520 --> 00:04:46.780 and now in the Console, we indeed get 100 104 00:04:46.780 --> 00:04:48.170 and the account 105 00:04:48.170 --> 00:04:50.853 with the username that I just input it there. 106 00:04:51.700 --> 00:04:54.823 Great, so let's see what we have to do now. 107 00:04:56.370 --> 00:04:57.850 So what we will do, 108 00:04:57.850 --> 00:05:01.410 is to add a negative movement to the current user 109 00:05:01.410 --> 00:05:03.880 and add a positive movement 110 00:05:03.880 --> 00:05:07.710 to the recipient and that makes sense, right? 111 00:05:07.710 --> 00:05:10.640 So if I transfer 100 to someone, 112 00:05:10.640 --> 00:05:12.410 I should lose that 100 113 00:05:12.410 --> 00:05:16.040 and the other person should receive that 100 114 00:05:16.040 --> 00:05:19.860 otherwise we would just be creating new money, right? 115 00:05:19.860 --> 00:05:23.690 So we do that and then we update the UI again, 116 00:05:23.690 --> 00:05:26.030 so we show again the movements, 117 00:05:26.030 --> 00:05:28.430 summary and balance because all of that 118 00:05:28.430 --> 00:05:30.593 will be effected by this transfer. 119 00:05:31.500 --> 00:05:34.640 Now what's kind of missing here in this flow chart 120 00:05:34.640 --> 00:05:38.990 is that we also actually first need to check some stuff. 121 00:05:38.990 --> 00:05:41.020 So we need to check if the amount here 122 00:05:41.020 --> 00:05:44.460 is actually a positive number 123 00:05:44.460 --> 00:05:47.550 and we also need to check if the current user, 124 00:05:47.550 --> 00:05:51.760 so Jonas right now actually has enough money. 125 00:05:51.760 --> 00:05:55.060 So I should not be able to transfer 5,000 126 00:05:55.060 --> 00:05:59.220 if I only have like 3000 and something, 127 00:05:59.220 --> 00:06:00.590 okay? 128 00:06:00.590 --> 00:06:03.703 So let's implement that cheque first. 129 00:06:06.760 --> 00:06:11.280 So as I just said, the amount needs to be greater than zero 130 00:06:11.280 --> 00:06:14.050 otherwise we could do a negative transfer 131 00:06:14.050 --> 00:06:16.913 and basically transfer money to ourselves. 132 00:06:17.930 --> 00:06:19.690 So this needs to happen 133 00:06:19.690 --> 00:06:22.940 and also the balance of the current account 134 00:06:22.940 --> 00:06:25.700 needs to be greater or equal the amount 135 00:06:25.700 --> 00:06:27.600 that we're trying to transfer. 136 00:06:27.600 --> 00:06:31.900 Now, this balance value is actually not stored anywhere, 137 00:06:31.900 --> 00:06:33.090 right? 138 00:06:33.090 --> 00:06:36.463 So in the place where we calculate this balance, 139 00:06:37.330 --> 00:06:39.660 so that's right here. 140 00:06:39.660 --> 00:06:41.680 So calc display balance, 141 00:06:41.680 --> 00:06:43.670 all we do is to calculate it 142 00:06:43.670 --> 00:06:47.550 and then display it immediately on the user interface, 143 00:06:47.550 --> 00:06:49.840 but we do not save it anywhere 144 00:06:49.840 --> 00:06:51.910 so let's actually change that, 145 00:06:51.910 --> 00:06:55.400 so besides only displaying it on the user interface, 146 00:06:55.400 --> 00:06:58.640 we also want to save it in the account. 147 00:06:58.640 --> 00:07:01.860 Now, how do we get access to that account? 148 00:07:01.860 --> 00:07:04.600 Well, we will do the same as we did previously 149 00:07:07.491 --> 00:07:09.580 with this function here, 150 00:07:09.580 --> 00:07:11.670 where now instead of the movements 151 00:07:11.670 --> 00:07:14.330 we passed in the entire account 152 00:07:14.330 --> 00:07:17.890 and so then we will be able to read the movements here 153 00:07:17.890 --> 00:07:21.940 from that account and also we will be able to then create 154 00:07:21.940 --> 00:07:26.533 a new property on that account with the balance, okay? 155 00:07:27.430 --> 00:07:29.510 So I hope that makes sense, 156 00:07:29.510 --> 00:07:32.230 so we are changing it from movements 157 00:07:32.230 --> 00:07:34.490 and so now we will be calling it 158 00:07:34.490 --> 00:07:37.250 with an entire account object. 159 00:07:37.250 --> 00:07:41.590 So here we need to do account dot movements 160 00:07:41.590 --> 00:07:43.780 and before we move on any further, 161 00:07:43.780 --> 00:07:45.373 let's call this correctly. 162 00:07:46.910 --> 00:07:51.570 So cacl display balance should now only be called 163 00:07:51.570 --> 00:07:54.100 with the entire account object 164 00:07:54.100 --> 00:07:59.033 and not only with the movements array, okay? 165 00:08:00.140 --> 00:08:02.060 So here it is. 166 00:08:02.060 --> 00:08:05.630 So now we take the movements from the account object, 167 00:08:05.630 --> 00:08:07.280 and then we can add that 168 00:08:08.320 --> 00:08:13.320 so we can say account dot balance equals balance 169 00:08:15.380 --> 00:08:18.640 and in fact, we can make this even better, 170 00:08:18.640 --> 00:08:20.160 we can store this value here 171 00:08:20.160 --> 00:08:22.963 immediately in account dot balance. 172 00:08:24.130 --> 00:08:27.310 So let's do that, account dot balance here 173 00:08:28.280 --> 00:08:31.220 and then we get that property here 174 00:08:31.220 --> 00:08:34.030 from account dot balance as well. 175 00:08:34.030 --> 00:08:37.460 Great, and remember why all of this works 176 00:08:38.340 --> 00:08:41.010 and we have some error here, but that doesn't matter, 177 00:08:41.010 --> 00:08:43.500 it's something unrelated now, 178 00:08:43.500 --> 00:08:46.520 anyway, let's remember why all of this works, 179 00:08:46.520 --> 00:08:51.413 so why we can set, this property here on this account object 180 00:08:51.413 --> 00:08:56.413 that we receive, and it will then set that right here 181 00:08:56.870 --> 00:08:59.680 on these objects that we have here. 182 00:08:59.680 --> 00:09:02.580 Well, and the reason is that, once again, 183 00:09:02.580 --> 00:09:05.550 all of these different references to actually point 184 00:09:05.550 --> 00:09:10.100 to the exact same objects in the memory heap, okay? 185 00:09:10.100 --> 00:09:14.400 So when we access this account, one object here, 186 00:09:14.400 --> 00:09:16.613 so down here in the login function, 187 00:09:18.030 --> 00:09:23.030 so right here where we create this current account variable, 188 00:09:23.038 --> 00:09:27.850 this is of course not really a copy of the object itself. 189 00:09:27.850 --> 00:09:29.860 So just as we learned before, 190 00:09:29.860 --> 00:09:33.660 this is simply another variable which points to the same 191 00:09:33.660 --> 00:09:37.393 so to the original object in the memory heap, okay? 192 00:09:38.320 --> 00:09:41.300 So this current account object again 193 00:09:41.300 --> 00:09:46.300 is exactly one of these objects that we have right here. 194 00:09:46.440 --> 00:09:51.440 So one of the objects of the account array, right? 195 00:09:51.720 --> 00:09:53.600 They are the exact same object. 196 00:09:53.600 --> 00:09:55.440 They simply have different name, 197 00:09:55.440 --> 00:09:57.530 here it is called account one 198 00:09:57.530 --> 00:10:00.140 but then down here it might be called 199 00:10:01.150 --> 00:10:04.320 the current account, okay? 200 00:10:04.320 --> 00:10:08.080 And then we use that current account to pass it 201 00:10:08.080 --> 00:10:11.080 into this calc display balance function 202 00:10:11.080 --> 00:10:13.300 and so then inside of that function, 203 00:10:13.300 --> 00:10:15.550 it will have even another name. 204 00:10:15.550 --> 00:10:17.387 So here it will be called acc, 205 00:10:18.520 --> 00:10:21.090 but it's still the same object, okay, 206 00:10:21.090 --> 00:10:24.570 it's still pointing to the same place in the heap, 207 00:10:24.570 --> 00:10:26.970 so in the memory now, right? 208 00:10:26.970 --> 00:10:30.653 And therefore setting the balance property here on acc 209 00:10:31.490 --> 00:10:34.620 is exactly the same as setting it up there 210 00:10:34.620 --> 00:10:37.853 where we first defined the objects, okay? 211 00:10:38.900 --> 00:10:41.300 And I will show you that in practice in a second 212 00:10:42.750 --> 00:10:44.690 but now let's go here 213 00:10:44.690 --> 00:10:47.840 and so this is where this arrow comes from 214 00:10:47.840 --> 00:10:49.990 because we don't have any code block 215 00:10:49.990 --> 00:10:53.730 and also because there is no second operant here. 216 00:10:53.730 --> 00:10:57.220 So anyway, let's go back to this condition here, 217 00:10:57.220 --> 00:11:00.880 so we already defined data transfer can only happen 218 00:11:00.880 --> 00:11:03.800 if the amount is greater than zero 219 00:11:03.800 --> 00:11:07.070 and now the second part is that the current user needs 220 00:11:07.070 --> 00:11:10.790 to have enough money to do this transfer 221 00:11:10.790 --> 00:11:15.550 and so that means current account dot balance 222 00:11:15.550 --> 00:11:19.220 which is the property that we justified alright. 223 00:11:19.220 --> 00:11:21.380 So we calculated the balance 224 00:11:21.380 --> 00:11:24.803 and that needs to be at least equal to the amount 225 00:11:24.803 --> 00:11:28.460 that we're trying to transfer, okay? 226 00:11:28.460 --> 00:11:31.570 Also, we should not be able to transfer money 227 00:11:31.570 --> 00:11:33.063 to our own account. 228 00:11:34.080 --> 00:11:36.650 So that's at that condition as well, 229 00:11:36.650 --> 00:11:38.310 so what we're trying to say is 230 00:11:38.310 --> 00:11:42.610 that the receiver account dot username 231 00:11:42.610 --> 00:11:43.860 must be equal 232 00:11:45.140 --> 00:11:46.490 from the current account 233 00:11:47.820 --> 00:11:51.953 dot username, alright? 234 00:11:51.953 --> 00:11:54.653 Tierra have one equal too much, 235 00:11:55.520 --> 00:11:56.640 alright? 236 00:11:56.640 --> 00:11:58.600 And actually, we should also check 237 00:11:58.600 --> 00:12:01.533 if this receiver account actually exists. 238 00:12:02.490 --> 00:12:06.420 So if it doesn't exist, of course, it makes no sense 239 00:12:06.420 --> 00:12:08.530 to transfer money there. 240 00:12:08.530 --> 00:12:13.530 So we could add that here, like simply testing this, 241 00:12:14.350 --> 00:12:17.940 but instead, since we're already trying to read a property 242 00:12:17.940 --> 00:12:21.480 from that object here, we can use once again, 243 00:12:21.480 --> 00:12:24.120 optional chaining like this 244 00:12:24.120 --> 00:12:27.580 and so then if this object here doesn't exist, 245 00:12:27.580 --> 00:12:30.610 then immediately this here will become undefined 246 00:12:30.610 --> 00:12:33.570 and the whole end operation will fail, 247 00:12:33.570 --> 00:12:36.210 and so in this case, we don't need that. 248 00:12:36.210 --> 00:12:39.580 Let me just comment it out and so now this should work 249 00:12:40.950 --> 00:12:43.350 and so let's just lock something to the Console. 250 00:12:45.140 --> 00:12:48.000 So transfer valid 251 00:12:48.000 --> 00:12:50.500 and now I will check all of these conditions here. 252 00:12:52.430 --> 00:12:57.020 So let's log in and now I want to transfer again 253 00:12:57.020 --> 00:13:00.920 to Jessica Davis and I will try to transfer zero 254 00:13:03.570 --> 00:13:08.410 so we get zero but we do not get transfer valid. 255 00:13:08.410 --> 00:13:11.343 So that means we didn't enter a this "if block" here. 256 00:13:12.280 --> 00:13:15.380 Now let's try to transfer more than I have 257 00:13:17.290 --> 00:13:22.290 and so this is also not valid but now 500 258 00:13:22.390 --> 00:13:24.680 and so all of these should not be true 259 00:13:26.490 --> 00:13:28.183 so you'll see a transfer valid. 260 00:13:29.210 --> 00:13:33.083 If I try something else, then again nothing should happen, 261 00:13:34.160 --> 00:13:36.083 oh, and actually it does happen, 262 00:13:36.920 --> 00:13:40.810 so indeed the receiver account is undefined 263 00:13:41.760 --> 00:13:45.107 and so this here will now be undefined now 264 00:13:45.107 --> 00:13:46.720 but I see what's happening 265 00:13:46.720 --> 00:13:50.300 because all that we are asking here is for this here 266 00:13:50.300 --> 00:13:54.040 to be different Jandy current account dot username. 267 00:13:54.040 --> 00:13:58.000 And so JS is of course different than undefined 268 00:13:58.000 --> 00:14:01.000 and therefore this here is still true 269 00:14:01.000 --> 00:14:04.370 and so in fact, we need to do this as well. 270 00:14:04.370 --> 00:14:06.000 So let's try this again 271 00:14:07.090 --> 00:14:09.330 and so you see of course back like this 272 00:14:09.330 --> 00:14:11.460 can happen all the time. 273 00:14:11.460 --> 00:14:12.850 And so we find them, 274 00:14:12.850 --> 00:14:15.240 we fix them and we move on 275 00:14:15.240 --> 00:14:20.240 and of course, now we test with some wrong username there, 276 00:14:20.720 --> 00:14:23.003 and now nothing happens, okay? 277 00:14:23.850 --> 00:14:25.663 So now the transfer is not valid. 278 00:14:27.470 --> 00:14:31.130 Now I'm also trying to transfer it to myself 279 00:14:31.130 --> 00:14:34.270 and so this is also not valid 280 00:14:34.270 --> 00:14:39.270 but finally to Jessica David, it will be valid, okay. 281 00:14:40.397 --> 00:14:43.090 And so, now here we can finally do 282 00:14:43.090 --> 00:14:45.500 what we intended to do all along. 283 00:14:45.500 --> 00:14:47.623 So these steps that we have here, 284 00:14:50.450 --> 00:14:52.113 So let's do that. 285 00:14:54.070 --> 00:14:57.583 So the current account dot movements, 286 00:14:58.570 --> 00:15:00.920 so we will add one new movement 287 00:15:00.920 --> 00:15:05.810 and so we're pushing here the amount but negative. 288 00:15:05.810 --> 00:15:10.810 So the negative amount and now on the receiver account, 289 00:15:14.250 --> 00:15:18.700 We will add a positive movement, okay? 290 00:15:18.700 --> 00:15:20.530 And that's actually already it. 291 00:15:20.530 --> 00:15:24.083 That's the most important part of doing the transfer. 292 00:15:25.460 --> 00:15:26.830 So doing the transfer 293 00:15:29.460 --> 00:15:32.673 and then we also want to update the user interface. 294 00:15:33.700 --> 00:15:36.600 So we could now copy this code here 295 00:15:36.600 --> 00:15:38.350 and paste it there as well 296 00:15:38.350 --> 00:15:41.770 but that's not a good practice as you already know 297 00:15:41.770 --> 00:15:44.150 and so I will now refactor this code here 298 00:15:45.140 --> 00:15:47.170 all into one function. 299 00:15:47.170 --> 00:15:48.370 So let me grab this here 300 00:15:49.210 --> 00:15:52.940 and dysfunction will be called update UI 301 00:15:54.160 --> 00:15:58.053 and it will also receive of course the current account. 302 00:16:01.100 --> 00:16:03.813 So let me right now the function here update UI 303 00:16:09.740 --> 00:16:12.853 equals function and I'm gonna leave it empty for now, 304 00:16:14.950 --> 00:16:15.980 and so indeed here, 305 00:16:15.980 --> 00:16:19.660 I need the current account now, okay? 306 00:16:19.660 --> 00:16:24.260 So otherwise I could not call this three function then 307 00:16:24.260 --> 00:16:25.740 using the account, 308 00:16:25.740 --> 00:16:28.580 but here I can call them whatever I want again. 309 00:16:28.580 --> 00:16:30.230 So let me just call them account, 310 00:16:33.520 --> 00:16:34.870 alright? 311 00:16:34.870 --> 00:16:39.050 So we refactored that functionality into its own function 312 00:16:39.050 --> 00:16:41.600 and so now we can call this function anywhere 313 00:16:41.600 --> 00:16:43.470 that we want in our code, 314 00:16:43.470 --> 00:16:45.300 and it will then always perform 315 00:16:45.300 --> 00:16:47.533 these three tasks, okay? 316 00:16:49.980 --> 00:16:53.180 So here I already called it update UI. 317 00:16:53.180 --> 00:16:55.423 We just write it here also as a comment. 318 00:16:56.650 --> 00:16:59.390 And now all I have to do is 319 00:16:59.390 --> 00:17:01.433 to paste it here as well. 320 00:17:03.400 --> 00:17:05.060 Great. 321 00:17:05.060 --> 00:17:07.273 So that should be working already. 322 00:17:08.470 --> 00:17:11.417 So that's transferred to Jessica Davis 500. 323 00:17:14.150 --> 00:17:18.070 And so now I should see one negative movement here, 324 00:17:18.070 --> 00:17:20.230 and this should also decrease by a 500 325 00:17:21.580 --> 00:17:23.253 and indeed it did. 326 00:17:24.800 --> 00:17:26.750 So let's check now here, 327 00:17:26.750 --> 00:17:30.823 the accounts variable, 328 00:17:32.220 --> 00:17:34.533 just to see if we actually get the balance. 329 00:17:36.340 --> 00:17:39.870 So indeed we now have to balance property here. 330 00:17:39.870 --> 00:17:41.070 We also have to movements 331 00:17:41.070 --> 00:17:46.070 and of course it's going to contain the minus 500, right? 332 00:17:47.430 --> 00:17:49.810 So that's the money that we just transferred away 333 00:17:49.810 --> 00:17:51.543 to Jessica Davis. 334 00:17:53.210 --> 00:17:57.493 And indeed it should already be in Jessica Davis. 335 00:17:58.400 --> 00:18:02.003 So her latest movement is now indeed 500. 336 00:18:02.990 --> 00:18:06.410 So that's take ticket out also in the user interface. 337 00:18:06.410 --> 00:18:08.330 Now, before doing that, 338 00:18:08.330 --> 00:18:10.530 the final thing that we're going to do is 339 00:18:10.530 --> 00:18:13.003 to clean these input fields. 340 00:18:14.000 --> 00:18:18.800 But now just to make sure let's login as Jessica Davis, 341 00:18:18.800 --> 00:18:23.800 and then we should get plus 500 here as the latest deposit. 342 00:18:24.820 --> 00:18:25.653 Now right? 343 00:18:26.940 --> 00:18:27.773 As I was saying, 344 00:18:27.773 --> 00:18:31.000 we need to clean out these inputs now 345 00:18:31.000 --> 00:18:34.550 and that we will do no matter if the transfer 346 00:18:34.550 --> 00:18:36.460 was successful or not. 347 00:18:36.460 --> 00:18:40.113 So we can do that outside of this if statement, 348 00:18:41.180 --> 00:18:44.763 so just down here or actually we can do it right here, 349 00:18:45.650 --> 00:18:47.500 let's get rid of this Console dot log 350 00:18:49.350 --> 00:18:53.140 and then input transfer amount 351 00:18:53.140 --> 00:18:56.090 equal or actually dot value 352 00:18:57.130 --> 00:18:58.700 equal 353 00:18:58.700 --> 00:19:00.350 input 354 00:19:00.350 --> 00:19:01.440 transferred to 355 00:19:02.360 --> 00:19:03.740 equal the empty string 356 00:19:05.080 --> 00:19:07.450 and with this we should be finished. 357 00:19:07.450 --> 00:19:09.220 Let's try it one more time. 358 00:19:09.220 --> 00:19:11.750 This time Jessica Davis will transfer something 359 00:19:14.350 --> 00:19:17.960 and so we lost here the latest transfer of course, 360 00:19:17.960 --> 00:19:20.130 because the page was reloaded 361 00:19:20.130 --> 00:19:22.900 and this data of course then gets lost. 362 00:19:22.900 --> 00:19:27.620 So when our page loads the information about the accounts 363 00:19:27.620 --> 00:19:30.300 so the account data will always be exactly 364 00:19:30.300 --> 00:19:33.220 what we have here in our code, 365 00:19:33.220 --> 00:19:34.080 okay? 366 00:19:34.080 --> 00:19:36.660 So that's the reason why that data, 367 00:19:36.660 --> 00:19:39.993 that 500 transfer is no longer here, 368 00:19:41.580 --> 00:19:43.210 but that doesn't matter. 369 00:19:43.210 --> 00:19:46.770 So let's transfer it to Steven Williams here 370 00:19:47.898 --> 00:19:48.731 1000 371 00:19:51.090 --> 00:19:52.940 and we get an error here, 372 00:19:52.940 --> 00:19:56.560 assignment two constant variable HTML button 373 00:19:56.560 --> 00:19:58.540 so at line 167 374 00:19:59.870 --> 00:20:04.023 and oh, one more time I forgot the value here. 375 00:20:04.980 --> 00:20:07.993 That's a very stupid mistake, right? 376 00:20:09.070 --> 00:20:10.283 Let's try that again. 377 00:20:13.040 --> 00:20:15.530 Stephen Thomas Williams, 378 00:20:15.530 --> 00:20:16.363 I believe 379 00:20:17.900 --> 00:20:19.430 and now it worked 380 00:20:19.430 --> 00:20:23.170 so all of our statistics here were updated 381 00:20:23.170 --> 00:20:28.020 and indeed now this field or both of the fields are empty 382 00:20:28.020 --> 00:20:28.900 and now as we go 383 00:20:30.578 --> 00:20:31.453 to this account, 384 00:20:33.670 --> 00:20:35.463 how apparently it does not exist. 385 00:20:36.750 --> 00:20:38.973 Yeah, it is Steven Thomas Williams. 386 00:20:40.000 --> 00:20:40.860 Yeah, 387 00:20:40.860 --> 00:20:43.550 so now we get this 1000 deposit here 388 00:20:43.550 --> 00:20:45.920 that we just did previously 389 00:20:45.920 --> 00:20:46.753 Alright? 390 00:20:46.753 --> 00:20:47.650 Awesome! 391 00:20:47.650 --> 00:20:49.890 so our application is coming more 392 00:20:49.890 --> 00:20:51.423 and more to live here.