WEBVTT 1 00:00:01.490 --> 00:00:04.833 Let's now implement dates in our application. 2 00:00:06.560 --> 00:00:09.380 And to see what we have to do, 3 00:00:09.380 --> 00:00:12.170 so where we have dates in our application, 4 00:00:12.170 --> 00:00:13.963 let's go to our demo here. 5 00:00:16.240 --> 00:00:18.050 And so we have, 6 00:00:18.050 --> 00:00:20.083 the date first here, 7 00:00:22.036 --> 00:00:25.437 and then also in all of these movements. 8 00:00:26.470 --> 00:00:29.310 So each of them here besides the deposit 9 00:00:29.310 --> 00:00:32.440 and the value itself like we have it now, 10 00:00:32.440 --> 00:00:34.990 we also now need the date here. 11 00:00:34.990 --> 00:00:36.430 And so that's the reason why 12 00:00:36.430 --> 00:00:37.820 in our account objects, 13 00:00:37.820 --> 00:00:40.350 we actually now have the movement dates. 14 00:00:40.350 --> 00:00:42.830 It's so that we can display them here. 15 00:00:42.830 --> 00:00:45.403 But let's start with this date here. 16 00:00:47.510 --> 00:00:49.970 And actually, the very first thing 17 00:00:49.970 --> 00:00:51.670 that I want to do 18 00:00:51.670 --> 00:00:53.620 is to basically fake it, 19 00:00:53.620 --> 00:00:57.123 that we are always logged in, okay. 20 00:00:58.030 --> 00:00:59.523 So let me do that here. 21 00:01:01.530 --> 00:01:05.943 Fake always logged in. 22 00:01:07.220 --> 00:01:08.190 And so this way, 23 00:01:08.190 --> 00:01:10.120 we don't have to always log in 24 00:01:10.120 --> 00:01:12.310 each time we want to do something. 25 00:01:12.310 --> 00:01:13.880 So to that, 26 00:01:13.880 --> 00:01:17.483 let's set the current account to account1. 27 00:01:20.060 --> 00:01:21.283 Then let's call, 28 00:01:22.195 --> 00:01:26.423 updateUI with that current account. 29 00:01:27.550 --> 00:01:31.050 And also, we need to make the user interface visible 30 00:01:31.050 --> 00:01:32.113 with this here. 31 00:01:34.210 --> 00:01:35.043 Okay. 32 00:01:36.230 --> 00:01:37.540 So these three lines 33 00:01:37.540 --> 00:01:38.910 will not make it so 34 00:01:38.910 --> 00:01:43.000 that Jonas is automatically logged in, 35 00:01:43.000 --> 00:01:44.700 except for the message here, 36 00:01:44.700 --> 00:01:48.500 but that doesn't really matter, okay. 37 00:01:48.500 --> 00:01:49.630 So as I was saying, 38 00:01:49.630 --> 00:01:53.150 let's start by displaying the current balance here. 39 00:01:53.150 --> 00:01:54.660 So as I was saying, 40 00:01:54.660 --> 00:01:58.710 let's now create this date here, okay. 41 00:01:58.710 --> 00:02:00.800 And let's check out the class name. 42 00:02:02.300 --> 00:02:04.970 So that's always a little bit hidden. 43 00:02:04.970 --> 00:02:06.763 So it's the class date. 44 00:02:08.810 --> 00:02:12.773 Okay, and so that is already selected at labelDate. 45 00:02:14.080 --> 00:02:15.130 And once more, 46 00:02:15.130 --> 00:02:17.000 let's start by setting the state 47 00:02:17.000 --> 00:02:19.380 outside here of any callback function 48 00:02:19.380 --> 00:02:21.340 so that we can see the effects, 49 00:02:21.340 --> 00:02:23.780 as we implement our code. 50 00:02:23.780 --> 00:02:27.243 So anyway, let's start by creating the current date. 51 00:02:28.400 --> 00:02:29.870 And so, remember, 52 00:02:29.870 --> 00:02:33.540 that is simply by doing new date. 53 00:02:33.540 --> 00:02:36.430 And so that is basically right now. 54 00:02:36.430 --> 00:02:40.370 However, we don't just want to print that. 55 00:02:40.370 --> 00:02:42.270 So let's see how that would look like. 56 00:02:43.270 --> 00:02:47.170 So labelDate, as I have already selected 57 00:02:47.170 --> 00:02:50.313 which again is this element with the class of date, 58 00:02:51.410 --> 00:02:53.150 and then text content, 59 00:02:53.150 --> 00:02:55.693 and let's set it to now. 60 00:02:57.090 --> 00:02:59.460 And so, this result here 61 00:02:59.460 --> 00:03:02.750 is not exactly what we want, right? 62 00:03:02.750 --> 00:03:05.780 So, instead we really only want 63 00:03:05.780 --> 00:03:08.030 the day, the month and the year, 64 00:03:08.030 --> 00:03:11.830 and I want to display it in this format. 65 00:03:11.830 --> 00:03:13.323 So I want day, 66 00:03:14.650 --> 00:03:18.630 then month, and then year. 67 00:03:18.630 --> 00:03:21.940 And so this is how we display it in Europe, 68 00:03:21.940 --> 00:03:25.860 or at least in Portugal where I am located, okay. 69 00:03:25.860 --> 00:03:26.693 Now of course, 70 00:03:26.693 --> 00:03:29.120 you can format it in any way that you want, 71 00:03:29.120 --> 00:03:31.610 for example, how it looks like in your country, 72 00:03:31.610 --> 00:03:34.580 but I will do it like this now. 73 00:03:34.580 --> 00:03:35.920 Now later in this section, 74 00:03:35.920 --> 00:03:39.560 we will learn about something called internationalization 75 00:03:39.560 --> 00:03:41.590 which sounds very complicated 76 00:03:41.590 --> 00:03:45.170 but it will allow us to form a date and time 77 00:03:45.170 --> 00:03:48.580 according to the user's location basically. 78 00:03:48.580 --> 00:03:50.610 So if the user was in Portugal, 79 00:03:50.610 --> 00:03:54.420 then the date would automatically be formatted this way. 80 00:03:54.420 --> 00:03:56.550 But if the user was for example, 81 00:03:56.550 --> 00:04:00.070 in the US or in India or wherever, 82 00:04:00.070 --> 00:04:01.830 then the date would be formatted 83 00:04:01.830 --> 00:04:04.150 in a way that it is usually formatted 84 00:04:04.150 --> 00:04:06.023 in that country, all right. 85 00:04:07.150 --> 00:04:08.360 So, to do this, 86 00:04:08.360 --> 00:04:12.033 we need to get the day, month and year. 87 00:04:13.486 --> 00:04:16.383 So let's create variables for each of them. 88 00:04:18.950 --> 00:04:21.490 All right, so we take now, 89 00:04:21.490 --> 00:04:24.610 and then we call the get date method, 90 00:04:24.610 --> 00:04:27.563 just like we learned in the last video. 91 00:04:28.740 --> 00:04:30.143 Then let's take the month, 92 00:04:31.370 --> 00:04:33.183 which is now.getMonth. 93 00:04:35.260 --> 00:04:39.020 And remember, that this one is zero based. 94 00:04:39.020 --> 00:04:40.713 So I'm gonna add one here, 95 00:04:43.380 --> 00:04:44.583 and then the year, 96 00:04:45.970 --> 00:04:47.913 which is now.getFullYear. 97 00:04:51.050 --> 00:04:53.140 And actually, let's also get the hour 98 00:04:54.100 --> 00:04:54.933 and the minute 99 00:04:54.933 --> 00:04:56.833 so we can display that as well. 100 00:04:57.940 --> 00:05:02.563 So getHours and const, 101 00:05:05.940 --> 00:05:08.253 the minutes, getMinutes. 102 00:05:11.980 --> 00:05:14.420 Okay, and now that we have that, 103 00:05:14.420 --> 00:05:18.243 all you have to do is to build a nice string with that. 104 00:05:19.760 --> 00:05:24.760 So that's the day/the month/theyear, 105 00:05:30.550 --> 00:05:31.970 and then I want a coma 106 00:05:33.400 --> 00:05:34.550 and the hour 107 00:05:36.250 --> 00:05:37.173 and the minute, 108 00:05:38.750 --> 00:05:39.583 so min. 109 00:05:41.270 --> 00:05:44.790 All right and that looks a lot better. 110 00:05:44.790 --> 00:05:46.390 Now, here in Portugal, 111 00:05:46.390 --> 00:05:51.390 whenever the month and the year is only one digit here, 112 00:05:51.860 --> 00:05:55.143 then we usually write 08 and 02. 113 00:05:56.302 --> 00:05:58.813 So basically, we pad this number here 114 00:05:58.813 --> 00:06:01.870 with a zero on the left, all right. 115 00:06:01.870 --> 00:06:04.660 So let's do that with the day and with the month, 116 00:06:04.660 --> 00:06:06.890 because this is actually a good use case 117 00:06:06.890 --> 00:06:09.263 for this method that we studied earlier. 118 00:06:10.550 --> 00:06:12.370 So on the day, and on the month, 119 00:06:12.370 --> 00:06:14.873 we want to use .padStart. 120 00:06:18.000 --> 00:06:20.253 And actually this needs to be a string now. 121 00:06:21.400 --> 00:06:23.350 And so let's make it a template literal 122 00:06:28.730 --> 00:06:32.160 like this, so basically this is now a string. 123 00:06:32.160 --> 00:06:33.380 And so on that string, 124 00:06:33.380 --> 00:06:35.103 we can call padStart, 125 00:06:36.550 --> 00:06:40.730 and then we want this always to be two characters long 126 00:06:40.730 --> 00:06:44.090 and we want to pad it with a zero, 127 00:06:44.090 --> 00:06:47.683 and probably just writing zero would work just the same. 128 00:06:48.540 --> 00:06:49.793 And so now we get 02. 129 00:06:51.530 --> 00:06:54.900 But if today would be let's say 12, 130 00:06:54.900 --> 00:06:56.800 then that zero will not be added 131 00:06:56.800 --> 00:06:59.690 because the final length that we're looking for 132 00:06:59.690 --> 00:07:00.683 is always two. 133 00:07:02.770 --> 00:07:04.533 Okay, and the same with the month. 134 00:07:07.660 --> 00:07:09.640 So, let's copy it here 135 00:07:13.530 --> 00:07:16.560 and beautiful, so, that looks perfect. 136 00:07:16.560 --> 00:07:19.380 And now, let's move on to actually use the dates 137 00:07:19.380 --> 00:07:22.263 here on the movements, okay. 138 00:07:23.640 --> 00:07:25.600 Just keep in mind that, 139 00:07:25.600 --> 00:07:28.110 of course as the time goes on, 140 00:07:28.110 --> 00:07:30.590 this value here is not gonna change. 141 00:07:30.590 --> 00:07:32.880 So this is static, right? 142 00:07:32.880 --> 00:07:37.240 So, if we wanted to keep this playing the actual time, 143 00:07:37.240 --> 00:07:39.770 we would need something called a timer 144 00:07:39.770 --> 00:07:41.890 which is something that we will do 145 00:07:41.890 --> 00:07:43.730 by the end of the lecture. 146 00:07:43.730 --> 00:07:45.300 We will not do it for this, 147 00:07:45.300 --> 00:07:48.060 but we will implement a timer like this, 148 00:07:48.060 --> 00:07:50.730 maybe you have seen it counting down here. 149 00:07:50.730 --> 00:07:52.163 So this logout timer. 150 00:07:54.230 --> 00:07:57.780 All right, so this time here is gonna stay static 151 00:07:57.780 --> 00:08:01.160 but, that's not a big deal for now. 152 00:08:01.160 --> 00:08:03.210 But anyway, let's now go to the function 153 00:08:03.210 --> 00:08:06.490 which displays these movements. 154 00:08:06.490 --> 00:08:07.883 So display movements. 155 00:08:09.210 --> 00:08:12.673 So, here it is. 156 00:08:13.850 --> 00:08:16.460 All right, so now besides the movements, 157 00:08:16.460 --> 00:08:20.940 we also want to display the times of these movements, 158 00:08:20.940 --> 00:08:23.810 but now, we actually have a problem 159 00:08:23.810 --> 00:08:25.300 because into this function 160 00:08:25.300 --> 00:08:30.300 we are only passing the movements array itself, right. 161 00:08:30.660 --> 00:08:33.113 However, we also want the, 162 00:08:34.040 --> 00:08:37.730 let's see, we also want the movement dates. 163 00:08:37.730 --> 00:08:39.870 And so the best thing to do 164 00:08:39.870 --> 00:08:42.520 is to simply pass in the entire account 165 00:08:42.520 --> 00:08:44.830 into this function here as well. 166 00:08:44.830 --> 00:08:47.780 So just like we already have it in these two, 167 00:08:47.780 --> 00:08:50.540 where we already pass in the entire account, 168 00:08:50.540 --> 00:08:52.740 let's do the same here as well. 169 00:08:52.740 --> 00:08:54.193 So just the account. 170 00:08:55.100 --> 00:08:55.933 And then here, 171 00:08:55.933 --> 00:08:59.960 we need to say acc.movement 172 00:08:59.960 --> 00:09:03.280 and here acc.movements. 173 00:09:03.280 --> 00:09:05.530 And finally, where we called this function, 174 00:09:05.530 --> 00:09:09.090 we then need to pass in also the entire account. 175 00:09:09.090 --> 00:09:14.090 And so that's here in the display UI function, okay. 176 00:09:14.480 --> 00:09:15.313 And so now, 177 00:09:15.313 --> 00:09:16.880 it is a good thing 178 00:09:16.880 --> 00:09:19.030 that we have this refactored function 179 00:09:19.030 --> 00:09:21.050 that we created in the last section 180 00:09:21.050 --> 00:09:24.910 where we call all of these methods here only in one place. 181 00:09:24.910 --> 00:09:26.833 And so now we only needed to change, 182 00:09:28.210 --> 00:09:30.300 calling this display movements function 183 00:09:30.300 --> 00:09:32.250 here in this one place. 184 00:09:32.250 --> 00:09:35.160 And so that's the whole goal of refactoring. 185 00:09:35.160 --> 00:09:38.120 It is making it easier to implement new features 186 00:09:39.190 --> 00:09:40.623 as time moves on. 187 00:09:43.210 --> 00:09:44.790 Now, all right. 188 00:09:44.790 --> 00:09:47.600 So let's see how we could do that. 189 00:09:47.600 --> 00:09:48.620 So in here, 190 00:09:48.620 --> 00:09:51.423 we are looping over the movements. 191 00:09:52.360 --> 00:09:55.110 So that this array that we compute here 192 00:09:55.110 --> 00:09:57.700 which is whether the sorted movements 193 00:09:57.700 --> 00:10:01.730 or simply the movements themselves, right? 194 00:10:01.730 --> 00:10:03.680 So we are looping over this 195 00:10:03.680 --> 00:10:04.930 and in each iteration, 196 00:10:04.930 --> 00:10:07.510 we are generating this HTML. 197 00:10:07.510 --> 00:10:11.080 And so now, we simply need to add one more element here 198 00:10:11.080 --> 00:10:12.420 to this HTML, 199 00:10:12.420 --> 00:10:15.010 which is gonna contain that date. 200 00:10:15.010 --> 00:10:17.040 So let's do that. 201 00:10:17.040 --> 00:10:18.543 So in our HTML, 202 00:10:20.770 --> 00:10:24.080 we can see that there is this element here 203 00:10:24.080 --> 00:10:25.903 called movements_date. 204 00:10:27.420 --> 00:10:28.600 So let's copy that 205 00:10:28.600 --> 00:10:30.167 and paste it right here 206 00:10:31.240 --> 00:10:32.223 after the type. 207 00:10:36.460 --> 00:10:41.190 Okay, and so let's actually create a variable out here 208 00:10:41.190 --> 00:10:45.063 and then put that variable right here. 209 00:10:46.730 --> 00:10:51.620 Let's call it displayDate, okay. 210 00:10:51.620 --> 00:10:55.340 Now, where is the date actually coming from? 211 00:10:55.340 --> 00:10:56.900 Well, as we already know, 212 00:10:56.900 --> 00:11:01.500 it is in the accounts.movementDates, right? 213 00:11:01.500 --> 00:11:02.333 And so here, 214 00:11:02.333 --> 00:11:04.180 we are looping over the movements. 215 00:11:04.180 --> 00:11:05.660 And so at the same time, 216 00:11:05.660 --> 00:11:06.890 basically we also need 217 00:11:06.890 --> 00:11:10.370 to loop over the movement dates, okay. 218 00:11:10.370 --> 00:11:11.930 But that's not a problem 219 00:11:11.930 --> 00:11:14.143 because we already have the index here. 220 00:11:15.010 --> 00:11:16.440 And so what we can do 221 00:11:17.670 --> 00:11:22.370 is to write account 222 00:11:22.370 --> 00:11:23.470 or acc.movementsDates 223 00:11:27.300 --> 00:11:30.820 and then we take it at position i. 224 00:11:30.820 --> 00:11:33.660 So that is the current index in the movements array. 225 00:11:33.660 --> 00:11:35.750 And the same index is then gonna point 226 00:11:35.750 --> 00:11:39.623 to the equivalent date in this movements date array. 227 00:11:41.150 --> 00:11:43.550 All right, so this is a common technique 228 00:11:43.550 --> 00:11:47.100 of looping over to erase at the same time. 229 00:11:47.100 --> 00:11:49.883 So we called it for each method on one of them. 230 00:11:50.820 --> 00:11:52.640 So that's the movements. 231 00:11:52.640 --> 00:11:54.790 And then we use the current index 232 00:11:54.790 --> 00:11:57.743 to also get the data from some other array. 233 00:11:58.910 --> 00:12:00.690 Okay, and so that's gonna be 234 00:12:00.690 --> 00:12:02.040 at the same position 235 00:12:02.040 --> 00:12:04.743 because we're using the same index. 236 00:12:06.760 --> 00:12:09.230 So, let's create a new date 237 00:12:09.230 --> 00:12:11.440 out of this, 238 00:12:11.440 --> 00:12:13.230 because as we saw before, 239 00:12:13.230 --> 00:12:18.230 this is gonna be a nicely formatted time string, right? 240 00:12:18.540 --> 00:12:20.330 And so, we can use that string 241 00:12:20.330 --> 00:12:22.560 to create a new date object 242 00:12:22.560 --> 00:12:24.320 and we need that object, 243 00:12:24.320 --> 00:12:25.530 so that then from there, 244 00:12:25.530 --> 00:12:27.730 we can call our usual methods 245 00:12:27.730 --> 00:12:31.133 to get the date and the month and the year. 246 00:12:34.290 --> 00:12:35.900 Okay, so that's the reason 247 00:12:35.900 --> 00:12:38.810 why we need to convert these strings 248 00:12:38.810 --> 00:12:41.240 back into a JavaScript object, 249 00:12:41.240 --> 00:12:42.440 because only then, 250 00:12:42.440 --> 00:12:45.223 we can actually work with that data. 251 00:12:46.230 --> 00:12:47.540 And now let's actually create 252 00:12:47.540 --> 00:12:51.700 the same variables that we already have here, 253 00:12:51.700 --> 00:12:54.607 so there's no need to repeat it all. 254 00:12:56.360 --> 00:12:57.540 Let's actually get all of this 255 00:12:57.540 --> 00:12:59.493 and then delete what we don't need, 256 00:13:01.200 --> 00:13:03.163 to make this a little bit faster. 257 00:13:04.720 --> 00:13:07.770 So, we don't need the hour 258 00:13:07.770 --> 00:13:09.173 and the minute, 259 00:13:10.920 --> 00:13:12.720 so we don't need this. 260 00:13:12.720 --> 00:13:16.423 And we want to create this variable called displayDate. 261 00:13:18.604 --> 00:13:19.437 So the date 262 00:13:19.437 --> 00:13:22.667 that we're ultimately gonna use here, displayDate, 263 00:13:24.760 --> 00:13:27.540 and now, here we need to change from now 264 00:13:28.930 --> 00:13:31.620 to date like this now. 265 00:13:31.620 --> 00:13:33.840 All right, and we see, 266 00:13:33.840 --> 00:13:37.610 it already worked, great. 267 00:13:37.610 --> 00:13:40.303 So let's compare it actually here with the dates. 268 00:13:41.710 --> 00:13:44.043 So in July 12, 2020, 269 00:13:45.560 --> 00:13:48.660 and yeah, that works. 270 00:13:48.660 --> 00:13:50.920 Here, then we have 11, 271 00:13:50.920 --> 00:13:52.180 which for some reason, 272 00:13:52.180 --> 00:13:53.313 there's also 12, 273 00:13:54.320 --> 00:13:57.500 but I guess it's because we're close to midnight here. 274 00:13:57.500 --> 00:13:59.270 And so for some reason, 275 00:13:59.270 --> 00:14:02.570 probably it then changes over to the next day. 276 00:14:02.570 --> 00:14:05.800 Then here we have 27 of May. 277 00:14:05.800 --> 00:14:07.780 And so, that's also what we get here 278 00:14:07.780 --> 00:14:08.840 all the way to the last one, 279 00:14:08.840 --> 00:14:13.840 which is 18 of November. 280 00:14:14.210 --> 00:14:16.050 So 2019. 281 00:14:16.050 --> 00:14:17.563 So this is accurate. 282 00:14:18.760 --> 00:14:21.130 Great, now, when we click here 283 00:14:21.130 --> 00:14:23.923 on the sword, it's probably not gonna work. 284 00:14:25.700 --> 00:14:27.543 So we get some kind of error here. 285 00:14:28.900 --> 00:14:32.400 So cannot read property slice of undefined. 286 00:14:32.400 --> 00:14:33.963 Let's see why that is. 287 00:14:36.350 --> 00:14:38.110 Well, that's weird, 288 00:14:38.110 --> 00:14:41.890 because accounts.movements here 289 00:14:41.890 --> 00:14:43.710 is clearly defined. 290 00:14:43.710 --> 00:14:45.053 It shouldn't be undefined. 291 00:14:46.160 --> 00:14:48.333 Let's set this here to true by default. 292 00:14:50.930 --> 00:14:54.440 And so, well now it is sorted. 293 00:14:54.440 --> 00:14:58.310 So very weird that we get this bug, 294 00:14:58.310 --> 00:14:59.483 as we click here. 295 00:15:01.200 --> 00:15:02.980 That's just log to the console. 296 00:15:02.980 --> 00:15:06.480 But indeed, this one here will be 297 00:15:07.920 --> 00:15:09.053 and not undefined, 298 00:15:12.380 --> 00:15:14.600 but actually now it's undefined. 299 00:15:14.600 --> 00:15:18.480 So we get account.movements is undefined right now. 300 00:15:18.480 --> 00:15:19.990 Now, that's weird, 301 00:15:19.990 --> 00:15:21.540 but I guess it has something to do 302 00:15:21.540 --> 00:15:24.623 with the fact that we faked our log in here. 303 00:15:25.520 --> 00:15:29.183 So nevermind, let's take a look at this later. 304 00:15:30.400 --> 00:15:33.500 Okay, let's just not sort for now 305 00:15:33.500 --> 00:15:34.450 until we are back 306 00:15:34.450 --> 00:15:37.563 to having our application normal, all right. 307 00:15:39.160 --> 00:15:42.713 So, actually let's take this code here now, 308 00:15:44.730 --> 00:15:48.800 and put it into the code that is executed 309 00:15:48.800 --> 00:15:50.003 when we log in. 310 00:15:51.660 --> 00:15:54.283 So besides this welcome message, 311 00:15:55.190 --> 00:15:59.113 we then also want to create the current date. 312 00:16:08.220 --> 00:16:11.760 Okay, so it's back to the original now. 313 00:16:11.760 --> 00:16:12.963 Let's now log in, 314 00:16:15.142 --> 00:16:17.570 and then we get the message here, 315 00:16:17.570 --> 00:16:19.712 enter correct date. 316 00:16:19.712 --> 00:16:21.530 But now what I wanted to show you 317 00:16:21.530 --> 00:16:25.000 is what happens when we request a loan. 318 00:16:25.000 --> 00:16:28.930 So you see that we get this error here, right? 319 00:16:28.930 --> 00:16:30.670 And that's because this movement 320 00:16:30.670 --> 00:16:33.850 doesn't have any date, right. 321 00:16:33.850 --> 00:16:38.850 And that's why we get not a number in all the three values. 322 00:16:38.890 --> 00:16:40.620 So we need to fix that. 323 00:16:40.620 --> 00:16:44.090 So essentially, whenever there is a new transfer 324 00:16:44.090 --> 00:16:45.420 or a new loan, 325 00:16:45.420 --> 00:16:48.150 we need to not only push the new value 326 00:16:48.150 --> 00:16:50.010 into the movements array, 327 00:16:50.010 --> 00:16:54.050 but also into the movement dates, all right. 328 00:16:54.050 --> 00:16:57.243 So let's actually see that in code. 329 00:16:58.530 --> 00:17:00.053 So that's account one. 330 00:17:01.380 --> 00:17:06.380 And so we see that the movements has now nine elements 331 00:17:06.490 --> 00:17:08.793 while the dates only has eight. 332 00:17:10.680 --> 00:17:13.713 All right, so we need to fix that. 333 00:17:15.320 --> 00:17:18.093 So let's come here, to the transfer, 334 00:17:19.330 --> 00:17:22.860 and then besides doing the transfer and updating the UI, 335 00:17:22.860 --> 00:17:27.860 we also need to add transfer date, 336 00:17:30.400 --> 00:17:32.140 but that's easy enough. 337 00:17:32.140 --> 00:17:36.573 All we have to do is currentAccount.movementDates.push, 338 00:17:41.640 --> 00:17:45.190 and then, simply create the current date. 339 00:17:45.190 --> 00:17:49.240 So, new date and that's it. 340 00:17:49.240 --> 00:17:52.960 So JavaScript will then automatically convert this data here 341 00:17:52.960 --> 00:17:55.033 into a nicely formatted string. 342 00:17:56.510 --> 00:17:59.653 All right, and now the same here also for the receiver, 343 00:18:00.820 --> 00:18:04.343 because the receiver also gets a new movement here. 344 00:18:05.230 --> 00:18:09.643 Okay, and so they also need a new date for that movement. 345 00:18:10.490 --> 00:18:13.580 Now, as I told you also in the last section, 346 00:18:13.580 --> 00:18:15.510 at the beginning of the project 347 00:18:15.510 --> 00:18:16.490 in the real world 348 00:18:16.490 --> 00:18:20.120 we would probably have an object for each movement. 349 00:18:20.120 --> 00:18:24.030 And so that object would then contain the amount, the date, 350 00:18:24.030 --> 00:18:26.800 and some other information about the movement, 351 00:18:26.800 --> 00:18:30.650 but I don't want to restructure the entire application now. 352 00:18:30.650 --> 00:18:32.310 And so therefore, I simply created 353 00:18:32.310 --> 00:18:35.513 the separate movements dates, all right. 354 00:18:36.930 --> 00:18:39.970 All right, now let's just take this here 355 00:18:40.900 --> 00:18:43.333 and also add it to the loan. 356 00:18:45.090 --> 00:18:47.620 So that's right here. 357 00:18:47.620 --> 00:18:51.050 So add loan date 358 00:18:51.050 --> 00:18:52.910 and that should be it. 359 00:18:52.910 --> 00:18:56.023 So just to make sure here let's really log in again. 360 00:18:58.100 --> 00:19:01.650 All right, and now I'm gonna request this loan 361 00:19:03.180 --> 00:19:05.810 and now we get the current date. 362 00:19:05.810 --> 00:19:09.343 So August 2nd, just as we have it up here. 363 00:19:10.580 --> 00:19:15.580 Okay, `so let's see now D account. 364 00:19:16.410 --> 00:19:19.123 So account one, 365 00:19:21.200 --> 00:19:25.053 let's take a look at the movement dates. 366 00:19:26.580 --> 00:19:27.550 And so indeed, 367 00:19:27.550 --> 00:19:29.180 this is the one 368 00:19:29.180 --> 00:19:32.100 or actually this is the one that I just added. 369 00:19:32.100 --> 00:19:36.670 So this looks a little bit different from these ones 370 00:19:36.670 --> 00:19:41.053 because actually it is really the object itself. 371 00:19:42.980 --> 00:19:46.150 All right, so that's not good. 372 00:19:46.150 --> 00:19:48.973 So let's instead use the two ISO, 373 00:19:50.160 --> 00:19:52.810 a string, right here on the date 374 00:19:53.670 --> 00:19:56.483 and do the same also up here. 375 00:20:00.410 --> 00:20:03.353 Okay, and let's see if that fixes it then. 376 00:20:09.560 --> 00:20:12.370 Okay, so probably there was some error here 377 00:20:13.210 --> 00:20:16.023 because we're back to having not a number, 378 00:20:17.810 --> 00:20:20.710 and, actually I need to 379 00:20:21.970 --> 00:20:24.823 take a look at account one now again. 380 00:20:26.320 --> 00:20:28.423 And so let's check out the latest date. 381 00:20:29.490 --> 00:20:31.263 Oh, and I didn't call the method. 382 00:20:33.330 --> 00:20:34.223 That was stupid. 383 00:20:35.300 --> 00:20:37.190 Actually, this is something that happens to me 384 00:20:37.190 --> 00:20:41.360 quite frequently with these dates methods 385 00:20:41.360 --> 00:20:44.190 because we don't have to pass anything in there. 386 00:20:44.190 --> 00:20:46.540 And so there's a tendency to forget 387 00:20:46.540 --> 00:20:49.293 that we even need to call the method. 388 00:20:50.410 --> 00:20:52.293 So don't make that same mistake. 389 00:20:54.000 --> 00:20:56.610 All right, and now it works indeed. 390 00:20:56.610 --> 00:21:00.030 So let's check if the string looks nice 391 00:21:00.030 --> 00:21:02.790 with the same format as all the others, 392 00:21:02.790 --> 00:21:04.980 and yeah, it does. 393 00:21:04.980 --> 00:21:06.160 And so with this, 394 00:21:06.160 --> 00:21:08.850 we finished one more lecture. 395 00:21:08.850 --> 00:21:12.550 Now here, I am actually seeing something weird. 396 00:21:12.550 --> 00:21:14.730 So it's 19:1, 397 00:21:14.730 --> 00:21:18.550 but this should kind of be 01, shouldn't it. 398 00:21:18.550 --> 00:21:22.193 So we need to apply some padding to that as well. 399 00:21:23.260 --> 00:21:24.980 So that's a good coincidence 400 00:21:24.980 --> 00:21:28.790 that we are just at this time where I can see this. 401 00:21:28.790 --> 00:21:30.390 So let's go ahead quickly 402 00:21:30.390 --> 00:21:34.463 and fix that right here in the login callback. 403 00:21:36.120 --> 00:21:37.133 So that's here. 404 00:21:37.995 --> 00:21:39.530 And so essentially what we just need to do 405 00:21:39.530 --> 00:21:41.090 is to add this part 406 00:21:41.090 --> 00:21:43.773 to the hour and to the minute. 407 00:21:45.160 --> 00:21:47.980 So we make all of them a template literal again 408 00:21:51.060 --> 00:21:54.070 and then, like this. 409 00:21:55.770 --> 00:21:56.853 One more time. 410 00:22:00.710 --> 00:22:02.630 Now okay, to see the effect, 411 00:22:02.630 --> 00:22:03.733 we need to log in, 412 00:22:05.520 --> 00:22:09.280 and beautiful, so that's a lot better. 413 00:22:09.280 --> 00:22:12.630 And now, we indeed finished this lecture 414 00:22:12.630 --> 00:22:15.340 and are ready to move on to the next one 415 00:22:15.340 --> 00:22:16.400 where we're gonna work 416 00:22:16.400 --> 00:22:18.903 just a little bit more with dates.