Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,490 --> 00:00:04,833 Let's now implement dates in our application. 2 2 00:00:06,560 --> 00:00:09,380 And to see what we have to do, 3 3 00:00:09,380 --> 00:00:12,170 so where we have dates in our application, 4 4 00:00:12,170 --> 00:00:13,963 let's go to our demo here. 5 5 00:00:16,240 --> 00:00:18,050 And so we have, 6 6 00:00:18,050 --> 00:00:20,083 the date first here, 7 7 00:00:22,036 --> 00:00:25,437 and then also in all of these movements. 8 8 00:00:26,470 --> 00:00:29,310 So each of them here besides the deposit 9 9 00:00:29,310 --> 00:00:32,440 and the value itself like we have it now, 10 10 00:00:32,440 --> 00:00:34,990 we also now need the date here. 11 11 00:00:34,990 --> 00:00:36,430 And so that's the reason why 12 12 00:00:36,430 --> 00:00:37,820 in our account objects, 13 13 00:00:37,820 --> 00:00:40,350 we actually now have the movement dates. 14 14 00:00:40,350 --> 00:00:42,830 It's so that we can display them here. 15 15 00:00:42,830 --> 00:00:45,403 But let's start with this date here. 16 16 00:00:47,510 --> 00:00:49,970 And actually, the very first thing 17 17 00:00:49,970 --> 00:00:51,670 that I want to do 18 18 00:00:51,670 --> 00:00:53,620 is to basically fake it, 19 19 00:00:53,620 --> 00:00:57,123 that we are always logged in, okay. 20 20 00:00:58,030 --> 00:00:59,523 So let me do that here. 21 21 00:01:01,530 --> 00:01:05,943 Fake always logged in. 22 22 00:01:07,220 --> 00:01:08,190 And so this way, 23 23 00:01:08,190 --> 00:01:10,120 we don't have to always log in 24 24 00:01:10,120 --> 00:01:12,310 each time we want to do something. 25 25 00:01:12,310 --> 00:01:13,880 So to that, 26 26 00:01:13,880 --> 00:01:17,483 let's set the current account to account1. 27 27 00:01:20,060 --> 00:01:21,283 Then let's call, 28 28 00:01:22,195 --> 00:01:26,423 updateUI with that current account. 29 29 00:01:27,550 --> 00:01:31,050 And also, we need to make the user interface visible 30 30 00:01:31,050 --> 00:01:32,113 with this here. 31 31 00:01:34,210 --> 00:01:35,043 Okay. 32 32 00:01:36,230 --> 00:01:37,540 So these three lines 33 33 00:01:37,540 --> 00:01:38,910 will not make it so 34 34 00:01:38,910 --> 00:01:43,000 that Jonas is automatically logged in, 35 35 00:01:43,000 --> 00:01:44,700 except for the message here, 36 36 00:01:44,700 --> 00:01:48,500 but that doesn't really matter, okay. 37 37 00:01:48,500 --> 00:01:49,630 So as I was saying, 38 38 00:01:49,630 --> 00:01:53,150 let's start by displaying the current balance here. 39 39 00:01:53,150 --> 00:01:54,660 So as I was saying, 40 40 00:01:54,660 --> 00:01:58,710 let's now create this date here, okay. 41 41 00:01:58,710 --> 00:02:00,800 And let's check out the class name. 42 42 00:02:02,300 --> 00:02:04,970 So that's always a little bit hidden. 43 43 00:02:04,970 --> 00:02:06,763 So it's the class date. 44 44 00:02:08,810 --> 00:02:12,773 Okay, and so that is already selected at labelDate. 45 45 00:02:14,080 --> 00:02:15,130 And once more, 46 46 00:02:15,130 --> 00:02:17,000 let's start by setting the state 47 47 00:02:17,000 --> 00:02:19,380 outside here of any callback function 48 48 00:02:19,380 --> 00:02:21,340 so that we can see the effects, 49 49 00:02:21,340 --> 00:02:23,780 as we implement our code. 50 50 00:02:23,780 --> 00:02:27,243 So anyway, let's start by creating the current date. 51 51 00:02:28,400 --> 00:02:29,870 And so, remember, 52 52 00:02:29,870 --> 00:02:33,540 that is simply by doing new date. 53 53 00:02:33,540 --> 00:02:36,430 And so that is basically right now. 54 54 00:02:36,430 --> 00:02:40,370 However, we don't just want to print that. 55 55 00:02:40,370 --> 00:02:42,270 So let's see how that would look like. 56 56 00:02:43,270 --> 00:02:47,170 So labelDate, as I have already selected 57 57 00:02:47,170 --> 00:02:50,313 which again is this element with the class of date, 58 58 00:02:51,410 --> 00:02:53,150 and then text content, 59 59 00:02:53,150 --> 00:02:55,693 and let's set it to now. 60 60 00:02:57,090 --> 00:02:59,460 And so, this result here 61 61 00:02:59,460 --> 00:03:02,750 is not exactly what we want, right? 62 62 00:03:02,750 --> 00:03:05,780 So, instead we really only want 63 63 00:03:05,780 --> 00:03:08,030 the day, the month and the year, 64 64 00:03:08,030 --> 00:03:11,830 and I want to display it in this format. 65 65 00:03:11,830 --> 00:03:13,323 So I want day, 66 66 00:03:14,650 --> 00:03:18,630 then month, and then year. 67 67 00:03:18,630 --> 00:03:21,940 And so this is how we display it in Europe, 68 68 00:03:21,940 --> 00:03:25,860 or at least in Portugal where I am located, okay. 69 69 00:03:25,860 --> 00:03:26,693 Now of course, 70 70 00:03:26,693 --> 00:03:29,120 you can format it in any way that you want, 71 71 00:03:29,120 --> 00:03:31,610 for example, how it looks like in your country, 72 72 00:03:31,610 --> 00:03:34,580 but I will do it like this now. 73 73 00:03:34,580 --> 00:03:35,920 Now later in this section, 74 74 00:03:35,920 --> 00:03:39,560 we will learn about something called internationalization 75 75 00:03:39,560 --> 00:03:41,590 which sounds very complicated 76 76 00:03:41,590 --> 00:03:45,170 but it will allow us to form a date and time 77 77 00:03:45,170 --> 00:03:48,580 according to the user's location basically. 78 78 00:03:48,580 --> 00:03:50,610 So if the user was in Portugal, 79 79 00:03:50,610 --> 00:03:54,420 then the date would automatically be formatted this way. 80 80 00:03:54,420 --> 00:03:56,550 But if the user was for example, 81 81 00:03:56,550 --> 00:04:00,070 in the US or in India or wherever, 82 82 00:04:00,070 --> 00:04:01,830 then the date would be formatted 83 83 00:04:01,830 --> 00:04:04,150 in a way that it is usually formatted 84 84 00:04:04,150 --> 00:04:06,023 in that country, all right. 85 85 00:04:07,150 --> 00:04:08,360 So, to do this, 86 86 00:04:08,360 --> 00:04:12,033 we need to get the day, month and year. 87 87 00:04:13,486 --> 00:04:16,383 So let's create variables for each of them. 88 88 00:04:18,950 --> 00:04:21,490 All right, so we take now, 89 89 00:04:21,490 --> 00:04:24,610 and then we call the get date method, 90 90 00:04:24,610 --> 00:04:27,563 just like we learned in the last video. 91 91 00:04:28,740 --> 00:04:30,143 Then let's take the month, 92 92 00:04:31,370 --> 00:04:33,183 which is now.getMonth. 93 93 00:04:35,260 --> 00:04:39,020 And remember, that this one is zero based. 94 94 00:04:39,020 --> 00:04:40,713 So I'm gonna add one here, 95 95 00:04:43,380 --> 00:04:44,583 and then the year, 96 96 00:04:45,970 --> 00:04:47,913 which is now.getFullYear. 97 97 00:04:51,050 --> 00:04:53,140 And actually, let's also get the hour 98 98 00:04:54,100 --> 00:04:54,933 and the minute 99 99 00:04:54,933 --> 00:04:56,833 so we can display that as well. 100 100 00:04:57,940 --> 00:05:02,563 So getHours and const, 101 101 00:05:05,940 --> 00:05:08,253 the minutes, getMinutes. 102 102 00:05:11,980 --> 00:05:14,420 Okay, and now that we have that, 103 103 00:05:14,420 --> 00:05:18,243 all you have to do is to build a nice string with that. 104 104 00:05:19,760 --> 00:05:24,760 So that's the day/the month/theyear, 105 105 00:05:30,550 --> 00:05:31,970 and then I want a coma 106 106 00:05:33,400 --> 00:05:34,550 and the hour 107 107 00:05:36,250 --> 00:05:37,173 and the minute, 108 108 00:05:38,750 --> 00:05:39,583 so min. 109 109 00:05:41,270 --> 00:05:44,790 All right and that looks a lot better. 110 110 00:05:44,790 --> 00:05:46,390 Now, here in Portugal, 111 111 00:05:46,390 --> 00:05:51,390 whenever the month and the year is only one digit here, 112 112 00:05:51,860 --> 00:05:55,143 then we usually write 08 and 02. 113 113 00:05:56,302 --> 00:05:58,813 So basically, we pad this number here 114 114 00:05:58,813 --> 00:06:01,870 with a zero on the left, all right. 115 115 00:06:01,870 --> 00:06:04,660 So let's do that with the day and with the month, 116 116 00:06:04,660 --> 00:06:06,890 because this is actually a good use case 117 117 00:06:06,890 --> 00:06:09,263 for this method that we studied earlier. 118 118 00:06:10,550 --> 00:06:12,370 So on the day, and on the month, 119 119 00:06:12,370 --> 00:06:14,873 we want to use .padStart. 120 120 00:06:18,000 --> 00:06:20,253 And actually this needs to be a string now. 121 121 00:06:21,400 --> 00:06:23,350 And so let's make it a template literal 122 122 00:06:28,730 --> 00:06:32,160 like this, so basically this is now a string. 123 123 00:06:32,160 --> 00:06:33,380 And so on that string, 124 124 00:06:33,380 --> 00:06:35,103 we can call padStart, 125 125 00:06:36,550 --> 00:06:40,730 and then we want this always to be two characters long 126 126 00:06:40,730 --> 00:06:44,090 and we want to pad it with a zero, 127 127 00:06:44,090 --> 00:06:47,683 and probably just writing zero would work just the same. 128 128 00:06:48,540 --> 00:06:49,793 And so now we get 02. 129 129 00:06:51,530 --> 00:06:54,900 But if today would be let's say 12, 130 130 00:06:54,900 --> 00:06:56,800 then that zero will not be added 131 131 00:06:56,800 --> 00:06:59,690 because the final length that we're looking for 132 132 00:06:59,690 --> 00:07:00,683 is always two. 133 133 00:07:02,770 --> 00:07:04,533 Okay, and the same with the month. 134 134 00:07:07,660 --> 00:07:09,640 So, let's copy it here 135 135 00:07:13,530 --> 00:07:16,560 and beautiful, so, that looks perfect. 136 136 00:07:16,560 --> 00:07:19,380 And now, let's move on to actually use the dates 137 137 00:07:19,380 --> 00:07:22,263 here on the movements, okay. 138 138 00:07:23,640 --> 00:07:25,600 Just keep in mind that, 139 139 00:07:25,600 --> 00:07:28,110 of course as the time goes on, 140 140 00:07:28,110 --> 00:07:30,590 this value here is not gonna change. 141 141 00:07:30,590 --> 00:07:32,880 So this is static, right? 142 142 00:07:32,880 --> 00:07:37,240 So, if we wanted to keep this playing the actual time, 143 143 00:07:37,240 --> 00:07:39,770 we would need something called a timer 144 144 00:07:39,770 --> 00:07:41,890 which is something that we will do 145 145 00:07:41,890 --> 00:07:43,730 by the end of the lecture. 146 146 00:07:43,730 --> 00:07:45,300 We will not do it for this, 147 147 00:07:45,300 --> 00:07:48,060 but we will implement a timer like this, 148 148 00:07:48,060 --> 00:07:50,730 maybe you have seen it counting down here. 149 149 00:07:50,730 --> 00:07:52,163 So this logout timer. 150 150 00:07:54,230 --> 00:07:57,780 All right, so this time here is gonna stay static 151 151 00:07:57,780 --> 00:08:01,160 but, that's not a big deal for now. 152 152 00:08:01,160 --> 00:08:03,210 But anyway, let's now go to the function 153 153 00:08:03,210 --> 00:08:06,490 which displays these movements. 154 154 00:08:06,490 --> 00:08:07,883 So display movements. 155 155 00:08:09,210 --> 00:08:12,673 So, here it is. 156 156 00:08:13,850 --> 00:08:16,460 All right, so now besides the movements, 157 157 00:08:16,460 --> 00:08:20,940 we also want to display the times of these movements, 158 158 00:08:20,940 --> 00:08:23,810 but now, we actually have a problem 159 159 00:08:23,810 --> 00:08:25,300 because into this function 160 160 00:08:25,300 --> 00:08:30,300 we are only passing the movements array itself, right. 161 161 00:08:30,660 --> 00:08:33,113 However, we also want the, 162 162 00:08:34,040 --> 00:08:37,730 let's see, we also want the movement dates. 163 163 00:08:37,730 --> 00:08:39,870 And so the best thing to do 164 164 00:08:39,870 --> 00:08:42,520 is to simply pass in the entire account 165 165 00:08:42,520 --> 00:08:44,830 into this function here as well. 166 166 00:08:44,830 --> 00:08:47,780 So just like we already have it in these two, 167 167 00:08:47,780 --> 00:08:50,540 where we already pass in the entire account, 168 168 00:08:50,540 --> 00:08:52,740 let's do the same here as well. 169 169 00:08:52,740 --> 00:08:54,193 So just the account. 170 170 00:08:55,100 --> 00:08:55,933 And then here, 171 171 00:08:55,933 --> 00:08:59,960 we need to say acc.movement 172 172 00:08:59,960 --> 00:09:03,280 and here acc.movements. 173 173 00:09:03,280 --> 00:09:05,530 And finally, where we called this function, 174 174 00:09:05,530 --> 00:09:09,090 we then need to pass in also the entire account. 175 175 00:09:09,090 --> 00:09:14,090 And so that's here in the display UI function, okay. 176 176 00:09:14,480 --> 00:09:15,313 And so now, 177 177 00:09:15,313 --> 00:09:16,880 it is a good thing 178 178 00:09:16,880 --> 00:09:19,030 that we have this refactored function 179 179 00:09:19,030 --> 00:09:21,050 that we created in the last section 180 180 00:09:21,050 --> 00:09:24,910 where we call all of these methods here only in one place. 181 181 00:09:24,910 --> 00:09:26,833 And so now we only needed to change, 182 182 00:09:28,210 --> 00:09:30,300 calling this display movements function 183 183 00:09:30,300 --> 00:09:32,250 here in this one place. 184 184 00:09:32,250 --> 00:09:35,160 And so that's the whole goal of refactoring. 185 185 00:09:35,160 --> 00:09:38,120 It is making it easier to implement new features 186 186 00:09:39,190 --> 00:09:40,623 as time moves on. 187 187 00:09:43,210 --> 00:09:44,790 Now, all right. 188 188 00:09:44,790 --> 00:09:47,600 So let's see how we could do that. 189 189 00:09:47,600 --> 00:09:48,620 So in here, 190 190 00:09:48,620 --> 00:09:51,423 we are looping over the movements. 191 191 00:09:52,360 --> 00:09:55,110 So that this array that we compute here 192 192 00:09:55,110 --> 00:09:57,700 which is whether the sorted movements 193 193 00:09:57,700 --> 00:10:01,730 or simply the movements themselves, right? 194 194 00:10:01,730 --> 00:10:03,680 So we are looping over this 195 195 00:10:03,680 --> 00:10:04,930 and in each iteration, 196 196 00:10:04,930 --> 00:10:07,510 we are generating this HTML. 197 197 00:10:07,510 --> 00:10:11,080 And so now, we simply need to add one more element here 198 198 00:10:11,080 --> 00:10:12,420 to this HTML, 199 199 00:10:12,420 --> 00:10:15,010 which is gonna contain that date. 200 200 00:10:15,010 --> 00:10:17,040 So let's do that. 201 201 00:10:17,040 --> 00:10:18,543 So in our HTML, 202 202 00:10:20,770 --> 00:10:24,080 we can see that there is this element here 203 203 00:10:24,080 --> 00:10:25,903 called movements_date. 204 204 00:10:27,420 --> 00:10:28,600 So let's copy that 205 205 00:10:28,600 --> 00:10:30,167 and paste it right here 206 206 00:10:31,240 --> 00:10:32,223 after the type. 207 207 00:10:36,460 --> 00:10:41,190 Okay, and so let's actually create a variable out here 208 208 00:10:41,190 --> 00:10:45,063 and then put that variable right here. 209 209 00:10:46,730 --> 00:10:51,620 Let's call it displayDate, okay. 210 210 00:10:51,620 --> 00:10:55,340 Now, where is the date actually coming from? 211 211 00:10:55,340 --> 00:10:56,900 Well, as we already know, 212 212 00:10:56,900 --> 00:11:01,500 it is in the accounts.movementDates, right? 213 213 00:11:01,500 --> 00:11:02,333 And so here, 214 214 00:11:02,333 --> 00:11:04,180 we are looping over the movements. 215 215 00:11:04,180 --> 00:11:05,660 And so at the same time, 216 216 00:11:05,660 --> 00:11:06,890 basically we also need 217 217 00:11:06,890 --> 00:11:10,370 to loop over the movement dates, okay. 218 218 00:11:10,370 --> 00:11:11,930 But that's not a problem 219 219 00:11:11,930 --> 00:11:14,143 because we already have the index here. 220 220 00:11:15,010 --> 00:11:16,440 And so what we can do 221 221 00:11:17,670 --> 00:11:22,370 is to write account 222 222 00:11:22,370 --> 00:11:23,470 or acc.movementsDates 223 223 00:11:27,300 --> 00:11:30,820 and then we take it at position i. 224 224 00:11:30,820 --> 00:11:33,660 So that is the current index in the movements array. 225 225 00:11:33,660 --> 00:11:35,750 And the same index is then gonna point 226 226 00:11:35,750 --> 00:11:39,623 to the equivalent date in this movements date array. 227 227 00:11:41,150 --> 00:11:43,550 All right, so this is a common technique 228 228 00:11:43,550 --> 00:11:47,100 of looping over to erase at the same time. 229 229 00:11:47,100 --> 00:11:49,883 So we called it for each method on one of them. 230 230 00:11:50,820 --> 00:11:52,640 So that's the movements. 231 231 00:11:52,640 --> 00:11:54,790 And then we use the current index 232 232 00:11:54,790 --> 00:11:57,743 to also get the data from some other array. 233 233 00:11:58,910 --> 00:12:00,690 Okay, and so that's gonna be 234 234 00:12:00,690 --> 00:12:02,040 at the same position 235 235 00:12:02,040 --> 00:12:04,743 because we're using the same index. 236 236 00:12:06,760 --> 00:12:09,230 So, let's create a new date 237 237 00:12:09,230 --> 00:12:11,440 out of this, 238 238 00:12:11,440 --> 00:12:13,230 because as we saw before, 239 239 00:12:13,230 --> 00:12:18,230 this is gonna be a nicely formatted time string, right? 240 240 00:12:18,540 --> 00:12:20,330 And so, we can use that string 241 241 00:12:20,330 --> 00:12:22,560 to create a new date object 242 242 00:12:22,560 --> 00:12:24,320 and we need that object, 243 243 00:12:24,320 --> 00:12:25,530 so that then from there, 244 244 00:12:25,530 --> 00:12:27,730 we can call our usual methods 245 245 00:12:27,730 --> 00:12:31,133 to get the date and the month and the year. 246 246 00:12:34,290 --> 00:12:35,900 Okay, so that's the reason 247 247 00:12:35,900 --> 00:12:38,810 why we need to convert these strings 248 248 00:12:38,810 --> 00:12:41,240 back into a JavaScript object, 249 249 00:12:41,240 --> 00:12:42,440 because only then, 250 250 00:12:42,440 --> 00:12:45,223 we can actually work with that data. 251 251 00:12:46,230 --> 00:12:47,540 And now let's actually create 252 252 00:12:47,540 --> 00:12:51,700 the same variables that we already have here, 253 253 00:12:51,700 --> 00:12:54,607 so there's no need to repeat it all. 254 254 00:12:56,360 --> 00:12:57,540 Let's actually get all of this 255 255 00:12:57,540 --> 00:12:59,493 and then delete what we don't need, 256 256 00:13:01,200 --> 00:13:03,163 to make this a little bit faster. 257 257 00:13:04,720 --> 00:13:07,770 So, we don't need the hour 258 258 00:13:07,770 --> 00:13:09,173 and the minute, 259 259 00:13:10,920 --> 00:13:12,720 so we don't need this. 260 260 00:13:12,720 --> 00:13:16,423 And we want to create this variable called displayDate. 261 261 00:13:18,604 --> 00:13:19,437 So the date 262 262 00:13:19,437 --> 00:13:22,667 that we're ultimately gonna use here, displayDate, 263 263 00:13:24,760 --> 00:13:27,540 and now, here we need to change from now 264 264 00:13:28,930 --> 00:13:31,620 to date like this now. 265 265 00:13:31,620 --> 00:13:33,840 All right, and we see, 266 266 00:13:33,840 --> 00:13:37,610 it already worked, great. 267 267 00:13:37,610 --> 00:13:40,303 So let's compare it actually here with the dates. 268 268 00:13:41,710 --> 00:13:44,043 So in July 12, 2020, 269 269 00:13:45,560 --> 00:13:48,660 and yeah, that works. 270 270 00:13:48,660 --> 00:13:50,920 Here, then we have 11, 271 271 00:13:50,920 --> 00:13:52,180 which for some reason, 272 272 00:13:52,180 --> 00:13:53,313 there's also 12, 273 273 00:13:54,320 --> 00:13:57,500 but I guess it's because we're close to midnight here. 274 274 00:13:57,500 --> 00:13:59,270 And so for some reason, 275 275 00:13:59,270 --> 00:14:02,570 probably it then changes over to the next day. 276 276 00:14:02,570 --> 00:14:05,800 Then here we have 27 of May. 277 277 00:14:05,800 --> 00:14:07,780 And so, that's also what we get here 278 278 00:14:07,780 --> 00:14:08,840 all the way to the last one, 279 279 00:14:08,840 --> 00:14:13,840 which is 18 of November. 280 280 00:14:14,210 --> 00:14:16,050 So 2019. 281 281 00:14:16,050 --> 00:14:17,563 So this is accurate. 282 282 00:14:18,760 --> 00:14:21,130 Great, now, when we click here 283 283 00:14:21,130 --> 00:14:23,923 on the sword, it's probably not gonna work. 284 284 00:14:25,700 --> 00:14:27,543 So we get some kind of error here. 285 285 00:14:28,900 --> 00:14:32,400 So cannot read property slice of undefined. 286 286 00:14:32,400 --> 00:14:33,963 Let's see why that is. 287 287 00:14:36,350 --> 00:14:38,110 Well, that's weird, 288 288 00:14:38,110 --> 00:14:41,890 because accounts.movements here 289 289 00:14:41,890 --> 00:14:43,710 is clearly defined. 290 290 00:14:43,710 --> 00:14:45,053 It shouldn't be undefined. 291 291 00:14:46,160 --> 00:14:48,333 Let's set this here to true by default. 292 292 00:14:50,930 --> 00:14:54,440 And so, well now it is sorted. 293 293 00:14:54,440 --> 00:14:58,310 So very weird that we get this bug, 294 294 00:14:58,310 --> 00:14:59,483 as we click here. 295 295 00:15:01,200 --> 00:15:02,980 That's just log to the console. 296 296 00:15:02,980 --> 00:15:06,480 But indeed, this one here will be 297 297 00:15:07,920 --> 00:15:09,053 and not undefined, 298 298 00:15:12,380 --> 00:15:14,600 but actually now it's undefined. 299 299 00:15:14,600 --> 00:15:18,480 So we get account.movements is undefined right now. 300 300 00:15:18,480 --> 00:15:19,990 Now, that's weird, 301 301 00:15:19,990 --> 00:15:21,540 but I guess it has something to do 302 302 00:15:21,540 --> 00:15:24,623 with the fact that we faked our log in here. 303 303 00:15:25,520 --> 00:15:29,183 So nevermind, let's take a look at this later. 304 304 00:15:30,400 --> 00:15:33,500 Okay, let's just not sort for now 305 305 00:15:33,500 --> 00:15:34,450 until we are back 306 306 00:15:34,450 --> 00:15:37,563 to having our application normal, all right. 307 307 00:15:39,160 --> 00:15:42,713 So, actually let's take this code here now, 308 308 00:15:44,730 --> 00:15:48,800 and put it into the code that is executed 309 309 00:15:48,800 --> 00:15:50,003 when we log in. 310 310 00:15:51,660 --> 00:15:54,283 So besides this welcome message, 311 311 00:15:55,190 --> 00:15:59,113 we then also want to create the current date. 312 312 00:16:08,220 --> 00:16:11,760 Okay, so it's back to the original now. 313 313 00:16:11,760 --> 00:16:12,963 Let's now log in, 314 314 00:16:15,142 --> 00:16:17,570 and then we get the message here, 315 315 00:16:17,570 --> 00:16:19,712 enter correct date. 316 316 00:16:19,712 --> 00:16:21,530 But now what I wanted to show you 317 317 00:16:21,530 --> 00:16:25,000 is what happens when we request a loan. 318 318 00:16:25,000 --> 00:16:28,930 So you see that we get this error here, right? 319 319 00:16:28,930 --> 00:16:30,670 And that's because this movement 320 320 00:16:30,670 --> 00:16:33,850 doesn't have any date, right. 321 321 00:16:33,850 --> 00:16:38,850 And that's why we get not a number in all the three values. 322 322 00:16:38,890 --> 00:16:40,620 So we need to fix that. 323 323 00:16:40,620 --> 00:16:44,090 So essentially, whenever there is a new transfer 324 324 00:16:44,090 --> 00:16:45,420 or a new loan, 325 325 00:16:45,420 --> 00:16:48,150 we need to not only push the new value 326 326 00:16:48,150 --> 00:16:50,010 into the movements array, 327 327 00:16:50,010 --> 00:16:54,050 but also into the movement dates, all right. 328 328 00:16:54,050 --> 00:16:57,243 So let's actually see that in code. 329 329 00:16:58,530 --> 00:17:00,053 So that's account one. 330 330 00:17:01,380 --> 00:17:06,380 And so we see that the movements has now nine elements 331 331 00:17:06,490 --> 00:17:08,793 while the dates only has eight. 332 332 00:17:10,680 --> 00:17:13,713 All right, so we need to fix that. 333 333 00:17:15,320 --> 00:17:18,093 So let's come here, to the transfer, 334 334 00:17:19,330 --> 00:17:22,860 and then besides doing the transfer and updating the UI, 335 335 00:17:22,860 --> 00:17:27,860 we also need to add transfer date, 336 336 00:17:30,400 --> 00:17:32,140 but that's easy enough. 337 337 00:17:32,140 --> 00:17:36,573 All we have to do is currentAccount.movementDates.push, 338 338 00:17:41,640 --> 00:17:45,190 and then, simply create the current date. 339 339 00:17:45,190 --> 00:17:49,240 So, new date and that's it. 340 340 00:17:49,240 --> 00:17:52,960 So JavaScript will then automatically convert this data here 341 341 00:17:52,960 --> 00:17:55,033 into a nicely formatted string. 342 342 00:17:56,510 --> 00:17:59,653 All right, and now the same here also for the receiver, 343 343 00:18:00,820 --> 00:18:04,343 because the receiver also gets a new movement here. 344 344 00:18:05,230 --> 00:18:09,643 Okay, and so they also need a new date for that movement. 345 345 00:18:10,490 --> 00:18:13,580 Now, as I told you also in the last section, 346 346 00:18:13,580 --> 00:18:15,510 at the beginning of the project 347 347 00:18:15,510 --> 00:18:16,490 in the real world 348 348 00:18:16,490 --> 00:18:20,120 we would probably have an object for each movement. 349 349 00:18:20,120 --> 00:18:24,030 And so that object would then contain the amount, the date, 350 350 00:18:24,030 --> 00:18:26,800 and some other information about the movement, 351 351 00:18:26,800 --> 00:18:30,650 but I don't want to restructure the entire application now. 352 352 00:18:30,650 --> 00:18:32,310 And so therefore, I simply created 353 353 00:18:32,310 --> 00:18:35,513 the separate movements dates, all right. 354 354 00:18:36,930 --> 00:18:39,970 All right, now let's just take this here 355 355 00:18:40,900 --> 00:18:43,333 and also add it to the loan. 356 356 00:18:45,090 --> 00:18:47,620 So that's right here. 357 357 00:18:47,620 --> 00:18:51,050 So add loan date 358 358 00:18:51,050 --> 00:18:52,910 and that should be it. 359 359 00:18:52,910 --> 00:18:56,023 So just to make sure here let's really log in again. 360 360 00:18:58,100 --> 00:19:01,650 All right, and now I'm gonna request this loan 361 361 00:19:03,180 --> 00:19:05,810 and now we get the current date. 362 362 00:19:05,810 --> 00:19:09,343 So August 2nd, just as we have it up here. 363 363 00:19:10,580 --> 00:19:15,580 Okay, `so let's see now D account. 364 364 00:19:16,410 --> 00:19:19,123 So account one, 365 365 00:19:21,200 --> 00:19:25,053 let's take a look at the movement dates. 366 366 00:19:26,580 --> 00:19:27,550 And so indeed, 367 367 00:19:27,550 --> 00:19:29,180 this is the one 368 368 00:19:29,180 --> 00:19:32,100 or actually this is the one that I just added. 369 369 00:19:32,100 --> 00:19:36,670 So this looks a little bit different from these ones 370 370 00:19:36,670 --> 00:19:41,053 because actually it is really the object itself. 371 371 00:19:42,980 --> 00:19:46,150 All right, so that's not good. 372 372 00:19:46,150 --> 00:19:48,973 So let's instead use the two ISO, 373 373 00:19:50,160 --> 00:19:52,810 a string, right here on the date 374 374 00:19:53,670 --> 00:19:56,483 and do the same also up here. 375 375 00:20:00,410 --> 00:20:03,353 Okay, and let's see if that fixes it then. 376 376 00:20:09,560 --> 00:20:12,370 Okay, so probably there was some error here 377 377 00:20:13,210 --> 00:20:16,023 because we're back to having not a number, 378 378 00:20:17,810 --> 00:20:20,710 and, actually I need to 379 379 00:20:21,970 --> 00:20:24,823 take a look at account one now again. 380 380 00:20:26,320 --> 00:20:28,423 And so let's check out the latest date. 381 381 00:20:29,490 --> 00:20:31,263 Oh, and I didn't call the method. 382 382 00:20:33,330 --> 00:20:34,223 That was stupid. 383 383 00:20:35,300 --> 00:20:37,190 Actually, this is something that happens to me 384 384 00:20:37,190 --> 00:20:41,360 quite frequently with these dates methods 385 385 00:20:41,360 --> 00:20:44,190 because we don't have to pass anything in there. 386 386 00:20:44,190 --> 00:20:46,540 And so there's a tendency to forget 387 387 00:20:46,540 --> 00:20:49,293 that we even need to call the method. 388 388 00:20:50,410 --> 00:20:52,293 So don't make that same mistake. 389 389 00:20:54,000 --> 00:20:56,610 All right, and now it works indeed. 390 390 00:20:56,610 --> 00:21:00,030 So let's check if the string looks nice 391 391 00:21:00,030 --> 00:21:02,790 with the same format as all the others, 392 392 00:21:02,790 --> 00:21:04,980 and yeah, it does. 393 393 00:21:04,980 --> 00:21:06,160 And so with this, 394 394 00:21:06,160 --> 00:21:08,850 we finished one more lecture. 395 395 00:21:08,850 --> 00:21:12,550 Now here, I am actually seeing something weird. 396 396 00:21:12,550 --> 00:21:14,730 So it's 19:1, 397 397 00:21:14,730 --> 00:21:18,550 but this should kind of be 01, shouldn't it. 398 398 00:21:18,550 --> 00:21:22,193 So we need to apply some padding to that as well. 399 399 00:21:23,260 --> 00:21:24,980 So that's a good coincidence 400 400 00:21:24,980 --> 00:21:28,790 that we are just at this time where I can see this. 401 401 00:21:28,790 --> 00:21:30,390 So let's go ahead quickly 402 402 00:21:30,390 --> 00:21:34,463 and fix that right here in the login callback. 403 403 00:21:36,120 --> 00:21:37,133 So that's here. 404 404 00:21:37,995 --> 00:21:39,530 And so essentially what we just need to do 405 405 00:21:39,530 --> 00:21:41,090 is to add this part 406 406 00:21:41,090 --> 00:21:43,773 to the hour and to the minute. 407 407 00:21:45,160 --> 00:21:47,980 So we make all of them a template literal again 408 408 00:21:51,060 --> 00:21:54,070 and then, like this. 409 409 00:21:55,770 --> 00:21:56,853 One more time. 410 410 00:22:00,710 --> 00:22:02,630 Now okay, to see the effect, 411 411 00:22:02,630 --> 00:22:03,733 we need to log in, 412 412 00:22:05,520 --> 00:22:09,280 and beautiful, so that's a lot better. 413 413 00:22:09,280 --> 00:22:12,630 And now, we indeed finished this lecture 414 414 00:22:12,630 --> 00:22:15,340 and are ready to move on to the next one 415 415 00:22:15,340 --> 00:22:16,400 where we're gonna work 416 416 00:22:16,400 --> 00:22:18,903 just a little bit more with dates. 33797