WEBVTT 1 00:00:01.340 --> 00:00:02.800 So in the last video, 2 00:00:02.800 --> 00:00:07.410 we formatted dates using the Internationalization API. 3 00:00:07.410 --> 00:00:10.743 So now let's actually format regular numbers. 4 00:00:12.450 --> 00:00:14.930 And let's start by doing some experiments 5 00:00:14.930 --> 00:00:16.370 in the console first, 6 00:00:16.370 --> 00:00:19.628 before we move on to our application. 7 00:00:19.628 --> 00:00:21.600 (types on keyboard) 8 00:00:21.600 --> 00:00:23.693 So I'm just defining some number here. 9 00:00:25.110 --> 00:00:27.570 It doesn't really matter which one, 10 00:00:27.570 --> 00:00:30.905 just so we can experiment with it a little bit. 11 00:00:30.905 --> 00:00:33.040 (types on keyboard) 12 00:00:33.040 --> 00:00:37.250 Okay, so let's do the most basic formatting now 13 00:00:37.250 --> 00:00:39.620 simply doing new 14 00:00:39.620 --> 00:00:43.113 and then again, this INTL namespace. 15 00:00:44.170 --> 00:00:46.313 And now this time we use number, 16 00:00:47.230 --> 00:00:48.580 format. 17 00:00:48.580 --> 00:00:52.450 And so this again, takes in a locale string. 18 00:00:52.450 --> 00:00:56.650 And so let's experiment with the US. 19 00:00:56.650 --> 00:00:58.020 Okay. 20 00:00:58.020 --> 00:01:01.430 And so all of this year creates a formatter. 21 00:01:01.430 --> 00:01:03.960 And then one more time on that, 22 00:01:03.960 --> 00:01:07.030 we can call the format method, 23 00:01:07.030 --> 00:01:10.620 where we then pass in what we actually want to format. 24 00:01:10.620 --> 00:01:12.103 And so that is this number. 25 00:01:14.200 --> 00:01:16.323 Let's just also log here to the console, 26 00:01:17.520 --> 00:01:19.007 that this is about the US, 27 00:01:19.007 --> 00:01:20.490 (types on keyboard) 28 00:01:20.490 --> 00:01:21.750 so that we can then have 29 00:01:22.900 --> 00:01:24.573 some other locales as well. 30 00:01:26.220 --> 00:01:28.950 Okay, so you see that the number is not 31 00:01:28.950 --> 00:01:32.040 formatted using these dividers here. 32 00:01:32.040 --> 00:01:34.750 So these commas here as separators. 33 00:01:34.750 --> 00:01:39.160 so that it's easier to read 3,884,000, 34 00:01:39.160 --> 00:01:40.550 and so on. 35 00:01:40.550 --> 00:01:43.803 But let's see how it works in other countries. 36 00:01:45.000 --> 00:01:46.680 So in Germany for example, 37 00:01:46.680 --> 00:01:47.513 it is different. 38 00:01:49.840 --> 00:01:51.483 Let's add some spaces here. 39 00:01:53.280 --> 00:01:54.550 Okay. 40 00:01:54.550 --> 00:01:56.491 And so here we want, 41 00:01:56.491 --> 00:01:57.700 (types on keyboard) 42 00:01:57.700 --> 00:01:58.880 like this. 43 00:01:58.880 --> 00:02:00.460 (types on keyboard) 44 00:02:00.460 --> 00:02:02.140 And since we're doing this, 45 00:02:02.140 --> 00:02:05.417 let's try some other countries here as well. 46 00:02:05.417 --> 00:02:06.890 (types on keyboard) 47 00:02:06.890 --> 00:02:08.933 Let's just say Syria, why not? 48 00:02:10.070 --> 00:02:12.790 So the one that I used earlier as well. 49 00:02:12.790 --> 00:02:14.850 So that is a Arabic 50 00:02:14.850 --> 00:02:19.240 and then the country is SY. (types on keyboard) 51 00:02:19.240 --> 00:02:21.770 Now and you see that in Germany, 52 00:02:21.770 --> 00:02:23.460 as in general in Europe, 53 00:02:23.460 --> 00:02:26.090 the separator is the dot, 54 00:02:26.090 --> 00:02:27.550 and then a comma 55 00:02:27.550 --> 00:02:29.570 for the decimal part. 56 00:02:29.570 --> 00:02:31.490 So basically just the opposite, 57 00:02:31.490 --> 00:02:32.780 as it is in the US 58 00:02:32.780 --> 00:02:34.240 as you see here. 59 00:02:34.240 --> 00:02:36.710 And then for Syria, well, 60 00:02:36.710 --> 00:02:38.480 it's even more different. 61 00:02:38.480 --> 00:02:40.230 I cannot even read this, of course. 62 00:02:41.615 --> 00:02:44.040 And of course, we can also just use 63 00:02:44.040 --> 00:02:46.240 (types on keyboard) 64 00:02:46.240 --> 00:02:48.820 the locale from the browser. 65 00:02:48.820 --> 00:02:52.016 So that was the navigator, 66 00:02:52.016 --> 00:02:54.220 (types on keyboard) not language. 67 00:02:54.220 --> 00:02:57.103 And actually, let's log that here. 68 00:03:02.910 --> 00:03:04.350 And so, 69 00:03:04.350 --> 00:03:06.050 yeah, in the UK, 70 00:03:06.050 --> 00:03:08.673 it's basically the same as in the US. 71 00:03:09.610 --> 00:03:14.160 So again, this is just the most basic formatting. 72 00:03:14.160 --> 00:03:16.593 But let's not define an object here. 73 00:03:17.920 --> 00:03:22.170 So again, options for this formatting. 74 00:03:22.170 --> 00:03:26.460 But of course, now we have other properties in this object. 75 00:03:26.460 --> 00:03:28.410 It's no longer day or month, 76 00:03:28.410 --> 00:03:30.150 or something like this, 77 00:03:30.150 --> 00:03:32.698 but instead we can specify the style, 78 00:03:32.698 --> 00:03:33.810 (types on keyboard) 79 00:03:33.810 --> 00:03:34.880 for example. 80 00:03:34.880 --> 00:03:37.993 And here, we can say that this is a unit. 81 00:03:40.030 --> 00:03:42.174 And then we can set the unit property 82 00:03:42.174 --> 00:03:44.070 (types on keyboard) to something. 83 00:03:44.070 --> 00:03:45.580 And let's say mile 84 00:03:46.800 --> 00:03:48.030 per 85 00:03:48.030 --> 00:03:49.010 hour, 86 00:03:49.010 --> 00:03:52.790 and there are tons of units like this. 87 00:03:52.790 --> 00:03:54.710 And so as always, you can read more 88 00:03:54.710 --> 00:03:58.133 about the units that are available in the documentation. 89 00:03:59.060 --> 00:04:00.610 But let's see what happens now. 90 00:04:02.010 --> 00:04:03.853 Now, but apparently nothing happens. 91 00:04:07.710 --> 00:04:10.660 Now we just need to pass in this options here. 92 00:04:10.660 --> 00:04:13.123 Of course into the number format function. 93 00:04:14.890 --> 00:04:16.800 So again, as a second argument, 94 00:04:16.800 --> 00:04:18.810 and let's do that here, 95 00:04:18.810 --> 00:04:21.290 in all of the four at the same time, 96 00:04:21.290 --> 00:04:22.963 using these multiple cursors. 97 00:04:24.105 --> 00:04:25.847 (types on keyboard) 98 00:04:25.847 --> 00:04:27.323 And let's give it a save. 99 00:04:28.630 --> 00:04:31.630 And indeed, now we get this unit here. 100 00:04:31.630 --> 00:04:33.570 And one more time you see that it's 101 00:04:33.570 --> 00:04:35.900 written differently in the US 102 00:04:35.900 --> 00:04:38.610 or in Germany for example, 103 00:04:38.610 --> 00:04:40.393 or in Europe in general. 104 00:04:41.370 --> 00:04:44.500 And you see in Syria or in Arabic, 105 00:04:44.500 --> 00:04:47.367 apparently this is how you write 'miles per hour'. 106 00:04:48.690 --> 00:04:52.340 Okay, but of course we can try others for example, 107 00:04:52.340 --> 00:04:53.400 for temperatures, 108 00:04:53.400 --> 00:04:54.563 there is Celsius. 109 00:04:58.590 --> 00:05:00.110 And so indeed, 110 00:05:00.110 --> 00:05:01.823 we get degrees Celsius. 111 00:05:03.870 --> 00:05:05.500 So that is for unit. 112 00:05:05.500 --> 00:05:06.913 But we can also say, 113 00:05:08.550 --> 00:05:09.383 percent. 114 00:05:10.561 --> 00:05:12.561 And then the unit is completely ignored. 115 00:05:13.950 --> 00:05:15.920 So we get the percentage sign. 116 00:05:15.920 --> 00:05:18.490 And again it is different in different countries. 117 00:05:18.490 --> 00:05:19.893 So here we have the space. 118 00:05:21.840 --> 00:05:23.403 And then there's also currency. 119 00:05:24.400 --> 00:05:27.670 So these are the three different options for the style. 120 00:05:27.670 --> 00:05:30.410 So that's unit, percent or currency. 121 00:05:30.410 --> 00:05:32.510 And again, if we have a currency, 122 00:05:32.510 --> 00:05:35.400 then the unit is just completely ignored. 123 00:05:35.400 --> 00:05:38.778 But we do have to then define the currency. 124 00:05:38.778 --> 00:05:41.778 (types on keyboard) 125 00:05:43.100 --> 00:05:44.930 So let's say euro, 126 00:05:44.930 --> 00:05:46.790 and for that it is like this, 127 00:05:46.790 --> 00:05:47.623 so E-U-R. 128 00:05:47.623 --> 00:05:48.860 (types on keyboard) 129 00:05:48.860 --> 00:05:50.600 And so if we give it a save, 130 00:05:50.600 --> 00:05:53.190 then we get indeed the euro sign. 131 00:05:53.190 --> 00:05:54.740 And so here in Europe, 132 00:05:54.740 --> 00:05:56.380 it comes after the number 133 00:05:56.380 --> 00:05:59.560 and in the US it comes before the number. 134 00:05:59.560 --> 00:06:02.830 And it's important to understand that we do indeed 135 00:06:02.830 --> 00:06:05.430 have to set this currency here, 136 00:06:05.430 --> 00:06:09.690 because the currency is not determined by the locale. 137 00:06:09.690 --> 00:06:13.470 Okay, so it's not defined by the country here. 138 00:06:13.470 --> 00:06:17.610 Because it's of course possible to show for example euros 139 00:06:17.610 --> 00:06:19.160 in the US. 140 00:06:19.160 --> 00:06:19.993 All right. 141 00:06:19.993 --> 00:06:20.970 And so of course, 142 00:06:20.970 --> 00:06:24.310 we have to define the currency here manually. 143 00:06:24.310 --> 00:06:27.723 So it's not gonna be implied from the locale string. 144 00:06:29.950 --> 00:06:31.370 Okay. 145 00:06:31.370 --> 00:06:35.043 Finally, we can also turn off or on the grouping. 146 00:06:37.650 --> 00:06:38.800 So that's 'useGrouping'. (types on keyboard) 147 00:06:38.800 --> 00:06:41.313 And let's experiment with false. 148 00:06:42.440 --> 00:06:45.310 And then you'll see that the number is just printed 149 00:06:45.310 --> 00:06:47.820 as it is without the separators. 150 00:06:47.820 --> 00:06:48.693 So the grouping. 151 00:06:50.160 --> 00:06:52.780 But let's get rid of this one here. 152 00:06:52.780 --> 00:06:56.383 And again, if you're interested in even more properties 153 00:06:56.383 --> 00:06:58.811 that you can set here in the options, 154 00:06:58.811 --> 00:07:02.373 then just check out the documentation here on MDN. 155 00:07:03.460 --> 00:07:06.140 Okay, but now what we're gonna do is 156 00:07:06.140 --> 00:07:08.370 to actually use this knowledge 157 00:07:08.370 --> 00:07:09.820 and implement currencies 158 00:07:09.820 --> 00:07:11.183 here in our application. 159 00:07:12.810 --> 00:07:14.573 So let's move up here. 160 00:07:15.750 --> 00:07:17.833 And I'm gonna start here in the movement. 161 00:07:20.760 --> 00:07:23.763 So, where is that function? 162 00:07:25.900 --> 00:07:28.300 Now you see we have a lot of code here already. 163 00:07:28.300 --> 00:07:29.380 And in the real world, 164 00:07:29.380 --> 00:07:33.710 we then split up all this code into different files. 165 00:07:33.710 --> 00:07:36.340 Okay, because as it is right now, 166 00:07:36.340 --> 00:07:38.223 it is indeed a little bit messy. 167 00:07:39.370 --> 00:07:43.840 But for now, it is just okay as we have it. 168 00:07:43.840 --> 00:07:44.993 Now anyway, 169 00:07:45.850 --> 00:07:47.160 right now we are displaying 170 00:07:47.160 --> 00:07:50.360 the currency here in these movements, 171 00:07:50.360 --> 00:07:51.193 right here. 172 00:07:52.620 --> 00:07:55.970 So we convert everything to two decimal places. 173 00:07:55.970 --> 00:07:59.200 And then we display the euro sign here ourselves. 174 00:07:59.200 --> 00:08:02.220 But now we want the Internationalization API 175 00:08:02.220 --> 00:08:04.263 to take care of all of this. 176 00:08:05.250 --> 00:08:07.973 So let's create a variable out here. 177 00:08:09.340 --> 00:08:12.760 So that we don't have to do all that formatting 178 00:08:12.760 --> 00:08:14.960 here in the template literal. 179 00:08:14.960 --> 00:08:16.453 So we do it outside here. 180 00:08:17.740 --> 00:08:20.280 So let's call it 'formattedMovement'. 181 00:08:21.870 --> 00:08:23.923 And then again we use new, 182 00:08:25.710 --> 00:08:26.554 and then 183 00:08:26.554 --> 00:08:27.780 (types on keyboard) 184 00:08:27.780 --> 00:08:29.258 number format. 185 00:08:29.258 --> 00:08:30.520 (types on keyboard) 186 00:08:30.520 --> 00:08:33.720 And now you already know that we have the locale 187 00:08:33.720 --> 00:08:36.220 right in the account object. 188 00:08:36.220 --> 00:08:37.727 And so that's again acc, 189 00:08:39.160 --> 00:08:40.000 right. 190 00:08:40.000 --> 00:08:43.480 So just as we did here for formatting the date, 191 00:08:43.480 --> 00:08:44.711 we use 192 00:08:44.711 --> 00:08:45.544 acc 193 00:08:46.880 --> 00:08:48.650 dot locale. 194 00:08:48.650 --> 00:08:51.340 And then we also need an options object. 195 00:08:51.340 --> 00:08:54.433 And this time, let's actually write that object right here. 196 00:08:56.690 --> 00:08:59.913 So we need to set the style to currency. 197 00:09:03.899 --> 00:09:07.020 And then we need to define the currency property. 198 00:09:07.020 --> 00:09:10.350 So just as we did earlier in this video. 199 00:09:10.350 --> 00:09:12.960 And let's just experiment a little bit here. 200 00:09:12.960 --> 00:09:16.653 Let's say that we want US dollars instead of euros. 201 00:09:17.910 --> 00:09:19.050 Okay. 202 00:09:19.050 --> 00:09:22.120 And so now here we can get rid of all of this, 203 00:09:22.120 --> 00:09:23.623 including the euro sign. 204 00:09:25.320 --> 00:09:27.483 And now simply use this value. 205 00:09:29.310 --> 00:09:30.826 So formatted, 206 00:09:30.826 --> 00:09:32.610 (types on keyboard) movement. 207 00:09:32.610 --> 00:09:35.100 Okay, give it a save. 208 00:09:35.100 --> 00:09:37.673 And now we need to of course log in here. 209 00:09:38.570 --> 00:09:39.980 But before doing that, 210 00:09:39.980 --> 00:09:43.440 I see already that we have some problem here with, 211 00:09:43.440 --> 00:09:45.197 is this [object Object]. 212 00:09:46.070 --> 00:09:49.290 And the problem is that we here didn't even call 213 00:09:49.290 --> 00:09:51.100 the format method. 214 00:09:51.100 --> 00:09:53.310 So all we did was to define 215 00:09:53.310 --> 00:09:56.323 this variable here as number format. 216 00:09:57.160 --> 00:09:59.210 And so that's then this formatter, 217 00:09:59.210 --> 00:10:00.720 remember. 218 00:10:00.720 --> 00:10:02.210 But on that, 219 00:10:02.210 --> 00:10:05.920 we then need to actually call the format method. 220 00:10:05.920 --> 00:10:08.150 And so this is where we pass in the value 221 00:10:08.150 --> 00:10:09.290 that should be formatted. 222 00:10:09.290 --> 00:10:13.720 But that is simply the current movement. 223 00:10:13.720 --> 00:10:15.563 So this 'Mov' value here. 224 00:10:19.210 --> 00:10:21.840 So if I save it now, 225 00:10:21.840 --> 00:10:23.700 then that should be fixed. 226 00:10:23.700 --> 00:10:27.253 And indeed you already see US dollars right here. 227 00:10:28.100 --> 00:10:31.753 But anyway let's login as Jonas now. 228 00:10:33.030 --> 00:10:35.883 And yeah, everything is US dollars. 229 00:10:37.140 --> 00:10:40.320 However, the number itself here is of course 230 00:10:40.320 --> 00:10:43.470 still formatted in the Portuguese way. 231 00:10:43.470 --> 00:10:47.693 So that's the current locale of the current user, remember. 232 00:10:48.660 --> 00:10:50.220 So that's Jonas. 233 00:10:50.220 --> 00:10:53.210 And the locale is pt-Pt, 234 00:10:53.210 --> 00:10:54.260 remember. 235 00:10:54.260 --> 00:10:58.320 And so therefore the number is still formatted in that way, 236 00:10:58.320 --> 00:11:00.130 and not in an American way. 237 00:11:00.130 --> 00:11:02.260 That's only for the currency. 238 00:11:02.260 --> 00:11:04.370 Okay, so that's USD, 239 00:11:04.370 --> 00:11:07.653 but the rest is still according to the users locale. 240 00:11:08.570 --> 00:11:10.520 So that's what I said earlier, 241 00:11:10.520 --> 00:11:13.030 that the currency is completely independent 242 00:11:13.030 --> 00:11:15.080 from the locale itself. 243 00:11:15.080 --> 00:11:15.913 So in this case, 244 00:11:15.913 --> 00:11:19.453 we have a European country with an American currency. 245 00:11:20.690 --> 00:11:21.820 All right. 246 00:11:21.820 --> 00:11:22.770 Now indeed, 247 00:11:22.770 --> 00:11:27.480 we also have the currency in the account object. 248 00:11:27.480 --> 00:11:28.670 So we have the locale 249 00:11:28.670 --> 00:11:30.420 and also the currency. 250 00:11:30.420 --> 00:11:33.590 And so let's now get that currency also 251 00:11:33.590 --> 00:11:34.993 from the account itself. 252 00:11:37.030 --> 00:11:38.355 So 253 00:11:38.355 --> 00:11:39.693 that's right here. 254 00:11:42.420 --> 00:11:45.060 And so here we actually want account 255 00:11:46.090 --> 00:11:47.110 dot 256 00:11:47.110 --> 00:11:47.943 currency. 257 00:11:49.640 --> 00:11:52.060 So if I load it now, 258 00:11:52.060 --> 00:11:53.360 (types on keyboard) 259 00:11:53.360 --> 00:11:55.283 then indeed we get euros. 260 00:11:56.841 --> 00:11:58.020 All right. 261 00:11:58.020 --> 00:12:01.270 And if I log in as Jessica Davis, 262 00:12:01.270 --> 00:12:05.250 which has USD as the currency, 263 00:12:05.250 --> 00:12:07.160 then we get the dollars, 264 00:12:07.160 --> 00:12:11.030 and we get it also formatted in the American way. 265 00:12:11.030 --> 00:12:12.690 Because for Jessica Davis, 266 00:12:12.690 --> 00:12:13.990 the locale 267 00:12:13.990 --> 00:12:15.123 is also, 268 00:12:17.281 --> 00:12:19.460 it is English in the US. 269 00:12:19.460 --> 00:12:21.670 And so this is what it looks like here 270 00:12:21.670 --> 00:12:24.683 formatted for the US with US dollars. 271 00:12:26.520 --> 00:12:28.380 Of course we could change this to euros. 272 00:12:28.380 --> 00:12:33.100 And then, (types on keyboard) 273 00:12:33.100 --> 00:12:35.343 of course now we would have the euro sign. 274 00:12:37.830 --> 00:12:39.490 All right. 275 00:12:39.490 --> 00:12:43.040 So one more time you can see how powerful this is, 276 00:12:43.040 --> 00:12:46.593 and how easy it makes formatting for us developers. 277 00:12:48.430 --> 00:12:49.670 Okay. 278 00:12:49.670 --> 00:12:51.750 Now anyway that is the movements. 279 00:12:51.750 --> 00:12:56.750 But now we also have the currency in a lot of other places, 280 00:12:56.980 --> 00:12:59.870 for example, here in the balance, 281 00:12:59.870 --> 00:13:03.393 and then also down here in the statistics. 282 00:13:04.230 --> 00:13:07.560 So that starts to also implement the same formatting 283 00:13:07.560 --> 00:13:09.530 here in the balance. 284 00:13:09.530 --> 00:13:10.423 And so that is, 285 00:13:12.500 --> 00:13:13.453 that's right here. 286 00:13:14.320 --> 00:13:15.190 Okay. 287 00:13:15.190 --> 00:13:17.620 So here we also have this old way 288 00:13:17.620 --> 00:13:19.560 basically of formatting. 289 00:13:19.560 --> 00:13:21.483 But we know that we can do better. 290 00:13:22.610 --> 00:13:27.410 So we can now go ahead and grab all of this, 291 00:13:27.410 --> 00:13:28.433 like this, 292 00:13:29.910 --> 00:13:31.490 and paste it here, 293 00:13:31.490 --> 00:13:33.470 and then use this. 294 00:13:33.470 --> 00:13:34.710 Okay. 295 00:13:34.710 --> 00:13:36.950 However, as you can guess, 296 00:13:36.950 --> 00:13:38.740 that is not a good practice, 297 00:13:38.740 --> 00:13:40.080 because we are repeating 298 00:13:40.080 --> 00:13:42.573 the don't repeat yourself principle. 299 00:13:44.300 --> 00:13:45.230 Right. 300 00:13:45.230 --> 00:13:46.823 So let's get rid of this. 301 00:13:47.827 --> 00:13:48.660 And 302 00:13:50.410 --> 00:13:51.660 as you can guess, 303 00:13:51.660 --> 00:13:53.870 we will create a new function here 304 00:13:53.870 --> 00:13:57.849 which will take care of formatting the currencies. 305 00:13:57.849 --> 00:14:00.090 (types on keyboard) 306 00:14:00.090 --> 00:14:02.860 So let's call it 'formatCur', 307 00:14:02.860 --> 00:14:04.373 which stands for currency. 308 00:14:05.308 --> 00:14:06.900 (types on keyboard) So a new function. 309 00:14:06.900 --> 00:14:10.450 And let's create a very reusable function here. 310 00:14:10.450 --> 00:14:12.010 So instead of passing 311 00:14:12.010 --> 00:14:14.800 a whole account object into this function, 312 00:14:14.800 --> 00:14:19.430 which is very specific of course to this exact application. 313 00:14:19.430 --> 00:14:21.530 Let's do a function that you could use 314 00:14:21.530 --> 00:14:24.040 in any other application. 315 00:14:24.040 --> 00:14:27.070 So basically a function that is less dependent 316 00:14:27.070 --> 00:14:29.950 on the underlying application data. 317 00:14:29.950 --> 00:14:30.783 Okay. 318 00:14:30.783 --> 00:14:31.660 And so instead, 319 00:14:31.660 --> 00:14:34.150 what we will do is to simply pass in 320 00:14:34.150 --> 00:14:37.759 all the data that this function needs to work with. 321 00:14:37.759 --> 00:14:38.890 (types on keyboard) 322 00:14:38.890 --> 00:14:41.930 So that's the value, the locale 323 00:14:41.930 --> 00:14:43.409 and the currency. 324 00:14:43.409 --> 00:14:45.580 (types on keyboard) 325 00:14:45.580 --> 00:14:46.660 Okay. 326 00:14:46.660 --> 00:14:50.840 So again we could pass the entire account object, 327 00:14:50.840 --> 00:14:52.630 here instead of these two. 328 00:14:52.630 --> 00:14:56.030 But here we just want to do a reusable function. 329 00:14:56.030 --> 00:14:58.126 And so this is a lot better for that. 330 00:14:58.126 --> 00:15:00.298 (types on keyboard) 331 00:15:00.298 --> 00:15:01.690 All right. 332 00:15:01.690 --> 00:15:04.800 So this is the code that we had written earlier. 333 00:15:04.800 --> 00:15:07.663 And here, we don't even need to create a new variable, 334 00:15:08.540 --> 00:15:11.070 all we will do is to return the result 335 00:15:11.070 --> 00:15:14.240 of this number format function. 336 00:15:14.240 --> 00:15:17.110 Now, we just need to adapt this a little bit. 337 00:15:17.110 --> 00:15:19.180 So here it's just the locale 338 00:15:19.180 --> 00:15:22.300 that we get in here as an argument. 339 00:15:22.300 --> 00:15:26.500 And then here the same for the currency. 340 00:15:26.500 --> 00:15:30.603 And what we want to format is the value that we get in. 341 00:15:31.510 --> 00:15:32.530 All right. 342 00:15:32.530 --> 00:15:36.500 So again, a nice and simple reusable function 343 00:15:36.500 --> 00:15:39.310 that can take any value any locale 344 00:15:39.310 --> 00:15:40.940 and any currency, 345 00:15:40.940 --> 00:15:44.730 and will then return this value here nicely formatted 346 00:15:44.730 --> 00:15:45.870 for that locale 347 00:15:45.870 --> 00:15:46.973 and currency. 348 00:15:48.690 --> 00:15:50.173 So let's use that here. 349 00:15:51.920 --> 00:15:54.980 So of course, instead of what we had before, 350 00:15:54.980 --> 00:15:56.980 formattedMov will now become 351 00:15:58.220 --> 00:16:00.053 format the currency. 352 00:16:00.893 --> 00:16:03.103 And then the value is mov, 353 00:16:04.150 --> 00:16:07.320 the locale, which I think it's the second one, 354 00:16:07.320 --> 00:16:08.740 yeah, it is. 355 00:16:08.740 --> 00:16:09.910 So it's very handy, 356 00:16:09.910 --> 00:16:14.070 again here in VS code to just hover over the function name. 357 00:16:14.070 --> 00:16:16.800 So the locale is at account, 358 00:16:16.800 --> 00:16:17.770 dot locale 359 00:16:17.770 --> 00:16:19.910 at the currency at account 360 00:16:20.990 --> 00:16:22.523 dot currency. 361 00:16:23.553 --> 00:16:25.900 (types on keyboard) 362 00:16:25.900 --> 00:16:27.533 And so we can get rid of this. 363 00:16:30.630 --> 00:16:31.820 Now I will just copy 364 00:16:33.280 --> 00:16:34.273 this part here. 365 00:16:35.561 --> 00:16:38.320 (types on keyboard) 366 00:16:38.320 --> 00:16:41.950 And so now what we want to format is account 367 00:16:41.950 --> 00:16:42.783 dot 368 00:16:42.783 --> 00:16:43.980 (types on keyboard) balance. 369 00:16:43.980 --> 00:16:44.940 Okay. 370 00:16:44.940 --> 00:16:47.510 And we actually don't even have to store it 371 00:16:47.510 --> 00:16:49.393 into a separate variable first, 372 00:16:50.370 --> 00:16:53.990 we can just take this result directly, 373 00:16:53.990 --> 00:16:57.030 and then display it as a text content 374 00:16:57.030 --> 00:16:58.283 here in our application. 375 00:16:59.212 --> 00:17:01.310 (types on keyboard) 376 00:17:01.310 --> 00:17:04.710 So if I log in now as Jonas, 377 00:17:04.710 --> 00:17:08.150 then this would already be nicely formatted. 378 00:17:08.150 --> 00:17:09.643 And indeed it is. 379 00:17:10.490 --> 00:17:13.320 So we see we have this nice separator here, 380 00:17:13.320 --> 00:17:15.423 which makes our number easier to read. 381 00:17:17.070 --> 00:17:19.060 And now as Jessica Davis, 382 00:17:19.060 --> 00:17:21.130 it should be the American separator. 383 00:17:21.130 --> 00:17:22.650 So with the comma here. 384 00:17:22.650 --> 00:17:23.870 Okay. 385 00:17:23.870 --> 00:17:25.550 So that's great. 386 00:17:25.550 --> 00:17:29.173 All that's left now is these three values down here. 387 00:17:31.100 --> 00:17:31.933 All right. 388 00:17:31.933 --> 00:17:33.743 But that should be easy enough with the function 389 00:17:33.743 --> 00:17:35.980 that we already created. 390 00:17:35.980 --> 00:17:37.653 So let's just copy it here. 391 00:17:39.760 --> 00:17:42.690 And then we simply basically need to paste it here 392 00:17:42.690 --> 00:17:44.173 to these three places. 393 00:17:45.126 --> 00:17:46.910 (types on keyboard) 394 00:17:46.910 --> 00:17:50.803 So here it is the incomes that we want to format, right. 395 00:17:53.040 --> 00:17:54.030 So incomes 396 00:17:54.865 --> 00:17:56.880 (types on keyboard) 397 00:17:56.880 --> 00:17:58.320 down here it is 398 00:17:59.800 --> 00:18:01.650 this part here. 399 00:18:01.650 --> 00:18:04.103 So the absolute value of the out. 400 00:18:11.645 --> 00:18:13.490 And then finally down here, 401 00:18:13.490 --> 00:18:14.893 it is the interest. 402 00:18:16.660 --> 00:18:17.531 Now I copied 403 00:18:17.531 --> 00:18:19.281 (chuckles) that code from earlier. 404 00:18:22.970 --> 00:18:27.399 So again, it is this interest that we want to format now. 405 00:18:27.399 --> 00:18:28.960 (types on keyboard) 406 00:18:28.960 --> 00:18:30.103 So interest. 407 00:18:32.130 --> 00:18:35.500 And indeed, you can already see even without logging in, 408 00:18:35.500 --> 00:18:37.883 that it worked down here. 409 00:18:38.760 --> 00:18:41.440 So we have this nice separator here, indeed. 410 00:18:41.440 --> 00:18:43.770 And so if we log in again 411 00:18:43.770 --> 00:18:45.300 with Jessica Davis, 412 00:18:45.300 --> 00:18:47.900 to see it as US dollars, 413 00:18:47.900 --> 00:18:51.860 then we get this nice result here as well. 414 00:18:51.860 --> 00:18:53.030 Beautiful. 415 00:18:53.030 --> 00:18:57.370 And actually, that's it for the Internationalization API. 416 00:18:57.370 --> 00:18:59.180 That's all I had to show you. 417 00:18:59.180 --> 00:19:01.360 But as I told you right in the beginning, 418 00:19:01.360 --> 00:19:04.143 there is a lot more potential in this API.