Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,340 --> 00:00:02,800 So in the last video, 2 2 00:00:02,800 --> 00:00:07,410 we formatted dates using the Internationalization API. 3 3 00:00:07,410 --> 00:00:10,743 So now let's actually format regular numbers. 4 4 00:00:12,450 --> 00:00:14,930 And let's start by doing some experiments 5 5 00:00:14,930 --> 00:00:16,370 in the console first, 6 6 00:00:16,370 --> 00:00:19,628 before we move on to our application. 7 7 00:00:19,628 --> 00:00:21,600 (types on keyboard) 8 8 00:00:21,600 --> 00:00:23,693 So I'm just defining some number here. 9 9 00:00:25,110 --> 00:00:27,570 It doesn't really matter which one, 10 10 00:00:27,570 --> 00:00:30,905 just so we can experiment with it a little bit. 11 11 00:00:30,905 --> 00:00:33,040 (types on keyboard) 12 12 00:00:33,040 --> 00:00:37,250 Okay, so let's do the most basic formatting now 13 13 00:00:37,250 --> 00:00:39,620 simply doing new 14 14 00:00:39,620 --> 00:00:43,113 and then again, this INTL namespace. 15 15 00:00:44,170 --> 00:00:46,313 And now this time we use number, 16 16 00:00:47,230 --> 00:00:48,580 format. 17 17 00:00:48,580 --> 00:00:52,450 And so this again, takes in a locale string. 18 18 00:00:52,450 --> 00:00:56,650 And so let's experiment with the US. 19 19 00:00:56,650 --> 00:00:58,020 Okay. 20 20 00:00:58,020 --> 00:01:01,430 And so all of this year creates a formatter. 21 21 00:01:01,430 --> 00:01:03,960 And then one more time on that, 22 22 00:01:03,960 --> 00:01:07,030 we can call the format method, 23 23 00:01:07,030 --> 00:01:10,620 where we then pass in what we actually want to format. 24 24 00:01:10,620 --> 00:01:12,103 And so that is this number. 25 25 00:01:14,200 --> 00:01:16,323 Let's just also log here to the console, 26 26 00:01:17,520 --> 00:01:19,007 that this is about the US, 27 27 00:01:19,007 --> 00:01:20,490 (types on keyboard) 28 28 00:01:20,490 --> 00:01:21,750 so that we can then have 29 29 00:01:22,900 --> 00:01:24,573 some other locales as well. 30 30 00:01:26,220 --> 00:01:28,950 Okay, so you see that the number is not 31 31 00:01:28,950 --> 00:01:32,040 formatted using these dividers here. 32 32 00:01:32,040 --> 00:01:34,750 So these commas here as separators. 33 33 00:01:34,750 --> 00:01:39,160 so that it's easier to read 3,884,000, 34 34 00:01:39,160 --> 00:01:40,550 and so on. 35 35 00:01:40,550 --> 00:01:43,803 But let's see how it works in other countries. 36 36 00:01:45,000 --> 00:01:46,680 So in Germany for example, 37 37 00:01:46,680 --> 00:01:47,513 it is different. 38 38 00:01:49,840 --> 00:01:51,483 Let's add some spaces here. 39 39 00:01:53,280 --> 00:01:54,550 Okay. 40 40 00:01:54,550 --> 00:01:56,491 And so here we want, 41 41 00:01:56,491 --> 00:01:57,700 (types on keyboard) 42 42 00:01:57,700 --> 00:01:58,880 like this. 43 43 00:01:58,880 --> 00:02:00,460 (types on keyboard) 44 44 00:02:00,460 --> 00:02:02,140 And since we're doing this, 45 45 00:02:02,140 --> 00:02:05,417 let's try some other countries here as well. 46 46 00:02:05,417 --> 00:02:06,890 (types on keyboard) 47 47 00:02:06,890 --> 00:02:08,933 Let's just say Syria, why not? 48 48 00:02:10,070 --> 00:02:12,790 So the one that I used earlier as well. 49 49 00:02:12,790 --> 00:02:14,850 So that is a Arabic 50 50 00:02:14,850 --> 00:02:19,240 and then the country is SY. (types on keyboard) 51 51 00:02:19,240 --> 00:02:21,770 Now and you see that in Germany, 52 52 00:02:21,770 --> 00:02:23,460 as in general in Europe, 53 53 00:02:23,460 --> 00:02:26,090 the separator is the dot, 54 54 00:02:26,090 --> 00:02:27,550 and then a comma 55 55 00:02:27,550 --> 00:02:29,570 for the decimal part. 56 56 00:02:29,570 --> 00:02:31,490 So basically just the opposite, 57 57 00:02:31,490 --> 00:02:32,780 as it is in the US 58 58 00:02:32,780 --> 00:02:34,240 as you see here. 59 59 00:02:34,240 --> 00:02:36,710 And then for Syria, well, 60 60 00:02:36,710 --> 00:02:38,480 it's even more different. 61 61 00:02:38,480 --> 00:02:40,230 I cannot even read this, of course. 62 62 00:02:41,615 --> 00:02:44,040 And of course, we can also just use 63 63 00:02:44,040 --> 00:02:46,240 (types on keyboard) 64 64 00:02:46,240 --> 00:02:48,820 the locale from the browser. 65 65 00:02:48,820 --> 00:02:52,016 So that was the navigator, 66 66 00:02:52,016 --> 00:02:54,220 (types on keyboard) not language. 67 67 00:02:54,220 --> 00:02:57,103 And actually, let's log that here. 68 68 00:03:02,910 --> 00:03:04,350 And so, 69 69 00:03:04,350 --> 00:03:06,050 yeah, in the UK, 70 70 00:03:06,050 --> 00:03:08,673 it's basically the same as in the US. 71 71 00:03:09,610 --> 00:03:14,160 So again, this is just the most basic formatting. 72 72 00:03:14,160 --> 00:03:16,593 But let's not define an object here. 73 73 00:03:17,920 --> 00:03:22,170 So again, options for this formatting. 74 74 00:03:22,170 --> 00:03:26,460 But of course, now we have other properties in this object. 75 75 00:03:26,460 --> 00:03:28,410 It's no longer day or month, 76 76 00:03:28,410 --> 00:03:30,150 or something like this, 77 77 00:03:30,150 --> 00:03:32,698 but instead we can specify the style, 78 78 00:03:32,698 --> 00:03:33,810 (types on keyboard) 79 79 00:03:33,810 --> 00:03:34,880 for example. 80 80 00:03:34,880 --> 00:03:37,993 And here, we can say that this is a unit. 81 81 00:03:40,030 --> 00:03:42,174 And then we can set the unit property 82 82 00:03:42,174 --> 00:03:44,070 (types on keyboard) to something. 83 83 00:03:44,070 --> 00:03:45,580 And let's say mile 84 84 00:03:46,800 --> 00:03:48,030 per 85 85 00:03:48,030 --> 00:03:49,010 hour, 86 86 00:03:49,010 --> 00:03:52,790 and there are tons of units like this. 87 87 00:03:52,790 --> 00:03:54,710 And so as always, you can read more 88 88 00:03:54,710 --> 00:03:58,133 about the units that are available in the documentation. 89 89 00:03:59,060 --> 00:04:00,610 But let's see what happens now. 90 90 00:04:02,010 --> 00:04:03,853 Now, but apparently nothing happens. 91 91 00:04:07,710 --> 00:04:10,660 Now we just need to pass in this options here. 92 92 00:04:10,660 --> 00:04:13,123 Of course into the number format function. 93 93 00:04:14,890 --> 00:04:16,800 So again, as a second argument, 94 94 00:04:16,800 --> 00:04:18,810 and let's do that here, 95 95 00:04:18,810 --> 00:04:21,290 in all of the four at the same time, 96 96 00:04:21,290 --> 00:04:22,963 using these multiple cursors. 97 97 00:04:24,105 --> 00:04:25,847 (types on keyboard) 98 98 00:04:25,847 --> 00:04:27,323 And let's give it a save. 99 99 00:04:28,630 --> 00:04:31,630 And indeed, now we get this unit here. 100 100 00:04:31,630 --> 00:04:33,570 And one more time you see that it's 101 101 00:04:33,570 --> 00:04:35,900 written differently in the US 102 102 00:04:35,900 --> 00:04:38,610 or in Germany for example, 103 103 00:04:38,610 --> 00:04:40,393 or in Europe in general. 104 104 00:04:41,370 --> 00:04:44,500 And you see in Syria or in Arabic, 105 105 00:04:44,500 --> 00:04:47,367 apparently this is how you write 'miles per hour'. 106 106 00:04:48,690 --> 00:04:52,340 Okay, but of course we can try others for example, 107 107 00:04:52,340 --> 00:04:53,400 for temperatures, 108 108 00:04:53,400 --> 00:04:54,563 there is Celsius. 109 109 00:04:58,590 --> 00:05:00,110 And so indeed, 110 110 00:05:00,110 --> 00:05:01,823 we get degrees Celsius. 111 111 00:05:03,870 --> 00:05:05,500 So that is for unit. 112 112 00:05:05,500 --> 00:05:06,913 But we can also say, 113 113 00:05:08,550 --> 00:05:09,383 percent. 114 114 00:05:10,561 --> 00:05:12,561 And then the unit is completely ignored. 115 115 00:05:13,950 --> 00:05:15,920 So we get the percentage sign. 116 116 00:05:15,920 --> 00:05:18,490 And again it is different in different countries. 117 117 00:05:18,490 --> 00:05:19,893 So here we have the space. 118 118 00:05:21,840 --> 00:05:23,403 And then there's also currency. 119 119 00:05:24,400 --> 00:05:27,670 So these are the three different options for the style. 120 120 00:05:27,670 --> 00:05:30,410 So that's unit, percent or currency. 121 121 00:05:30,410 --> 00:05:32,510 And again, if we have a currency, 122 122 00:05:32,510 --> 00:05:35,400 then the unit is just completely ignored. 123 123 00:05:35,400 --> 00:05:38,778 But we do have to then define the currency. 124 124 00:05:38,778 --> 00:05:41,778 (types on keyboard) 125 125 00:05:43,100 --> 00:05:44,930 So let's say euro, 126 126 00:05:44,930 --> 00:05:46,790 and for that it is like this, 127 127 00:05:46,790 --> 00:05:47,623 so E-U-R. 128 128 00:05:47,623 --> 00:05:48,860 (types on keyboard) 129 129 00:05:48,860 --> 00:05:50,600 And so if we give it a save, 130 130 00:05:50,600 --> 00:05:53,190 then we get indeed the euro sign. 131 131 00:05:53,190 --> 00:05:54,740 And so here in Europe, 132 132 00:05:54,740 --> 00:05:56,380 it comes after the number 133 133 00:05:56,380 --> 00:05:59,560 and in the US it comes before the number. 134 134 00:05:59,560 --> 00:06:02,830 And it's important to understand that we do indeed 135 135 00:06:02,830 --> 00:06:05,430 have to set this currency here, 136 136 00:06:05,430 --> 00:06:09,690 because the currency is not determined by the locale. 137 137 00:06:09,690 --> 00:06:13,470 Okay, so it's not defined by the country here. 138 138 00:06:13,470 --> 00:06:17,610 Because it's of course possible to show for example euros 139 139 00:06:17,610 --> 00:06:19,160 in the US. 140 140 00:06:19,160 --> 00:06:19,993 All right. 141 141 00:06:19,993 --> 00:06:20,970 And so of course, 142 142 00:06:20,970 --> 00:06:24,310 we have to define the currency here manually. 143 143 00:06:24,310 --> 00:06:27,723 So it's not gonna be implied from the locale string. 144 144 00:06:29,950 --> 00:06:31,370 Okay. 145 145 00:06:31,370 --> 00:06:35,043 Finally, we can also turn off or on the grouping. 146 146 00:06:37,650 --> 00:06:38,800 So that's 'useGrouping'. (types on keyboard) 147 147 00:06:38,800 --> 00:06:41,313 And let's experiment with false. 148 148 00:06:42,440 --> 00:06:45,310 And then you'll see that the number is just printed 149 149 00:06:45,310 --> 00:06:47,820 as it is without the separators. 150 150 00:06:47,820 --> 00:06:48,693 So the grouping. 151 151 00:06:50,160 --> 00:06:52,780 But let's get rid of this one here. 152 152 00:06:52,780 --> 00:06:56,383 And again, if you're interested in even more properties 153 153 00:06:56,383 --> 00:06:58,811 that you can set here in the options, 154 154 00:06:58,811 --> 00:07:02,373 then just check out the documentation here on MDN. 155 155 00:07:03,460 --> 00:07:06,140 Okay, but now what we're gonna do is 156 156 00:07:06,140 --> 00:07:08,370 to actually use this knowledge 157 157 00:07:08,370 --> 00:07:09,820 and implement currencies 158 158 00:07:09,820 --> 00:07:11,183 here in our application. 159 159 00:07:12,810 --> 00:07:14,573 So let's move up here. 160 160 00:07:15,750 --> 00:07:17,833 And I'm gonna start here in the movement. 161 161 00:07:20,760 --> 00:07:23,763 So, where is that function? 162 162 00:07:25,900 --> 00:07:28,300 Now you see we have a lot of code here already. 163 163 00:07:28,300 --> 00:07:29,380 And in the real world, 164 164 00:07:29,380 --> 00:07:33,710 we then split up all this code into different files. 165 165 00:07:33,710 --> 00:07:36,340 Okay, because as it is right now, 166 166 00:07:36,340 --> 00:07:38,223 it is indeed a little bit messy. 167 167 00:07:39,370 --> 00:07:43,840 But for now, it is just okay as we have it. 168 168 00:07:43,840 --> 00:07:44,993 Now anyway, 169 169 00:07:45,850 --> 00:07:47,160 right now we are displaying 170 170 00:07:47,160 --> 00:07:50,360 the currency here in these movements, 171 171 00:07:50,360 --> 00:07:51,193 right here. 172 172 00:07:52,620 --> 00:07:55,970 So we convert everything to two decimal places. 173 173 00:07:55,970 --> 00:07:59,200 And then we display the euro sign here ourselves. 174 174 00:07:59,200 --> 00:08:02,220 But now we want the Internationalization API 175 175 00:08:02,220 --> 00:08:04,263 to take care of all of this. 176 176 00:08:05,250 --> 00:08:07,973 So let's create a variable out here. 177 177 00:08:09,340 --> 00:08:12,760 So that we don't have to do all that formatting 178 178 00:08:12,760 --> 00:08:14,960 here in the template literal. 179 179 00:08:14,960 --> 00:08:16,453 So we do it outside here. 180 180 00:08:17,740 --> 00:08:20,280 So let's call it 'formattedMovement'. 181 181 00:08:21,870 --> 00:08:23,923 And then again we use new, 182 182 00:08:25,710 --> 00:08:26,554 and then 183 183 00:08:26,554 --> 00:08:27,780 (types on keyboard) 184 184 00:08:27,780 --> 00:08:29,258 number format. 185 185 00:08:29,258 --> 00:08:30,520 (types on keyboard) 186 186 00:08:30,520 --> 00:08:33,720 And now you already know that we have the locale 187 187 00:08:33,720 --> 00:08:36,220 right in the account object. 188 188 00:08:36,220 --> 00:08:37,727 And so that's again acc, 189 189 00:08:39,160 --> 00:08:40,000 right. 190 190 00:08:40,000 --> 00:08:43,480 So just as we did here for formatting the date, 191 191 00:08:43,480 --> 00:08:44,711 we use 192 192 00:08:44,711 --> 00:08:45,544 acc 193 193 00:08:46,880 --> 00:08:48,650 dot locale. 194 194 00:08:48,650 --> 00:08:51,340 And then we also need an options object. 195 195 00:08:51,340 --> 00:08:54,433 And this time, let's actually write that object right here. 196 196 00:08:56,690 --> 00:08:59,913 So we need to set the style to currency. 197 197 00:09:03,899 --> 00:09:07,020 And then we need to define the currency property. 198 198 00:09:07,020 --> 00:09:10,350 So just as we did earlier in this video. 199 199 00:09:10,350 --> 00:09:12,960 And let's just experiment a little bit here. 200 200 00:09:12,960 --> 00:09:16,653 Let's say that we want US dollars instead of euros. 201 201 00:09:17,910 --> 00:09:19,050 Okay. 202 202 00:09:19,050 --> 00:09:22,120 And so now here we can get rid of all of this, 203 203 00:09:22,120 --> 00:09:23,623 including the euro sign. 204 204 00:09:25,320 --> 00:09:27,483 And now simply use this value. 205 205 00:09:29,310 --> 00:09:30,826 So formatted, 206 206 00:09:30,826 --> 00:09:32,610 (types on keyboard) movement. 207 207 00:09:32,610 --> 00:09:35,100 Okay, give it a save. 208 208 00:09:35,100 --> 00:09:37,673 And now we need to of course log in here. 209 209 00:09:38,570 --> 00:09:39,980 But before doing that, 210 210 00:09:39,980 --> 00:09:43,440 I see already that we have some problem here with, 211 211 00:09:43,440 --> 00:09:45,197 is this [object Object]. 212 212 00:09:46,070 --> 00:09:49,290 And the problem is that we here didn't even call 213 213 00:09:49,290 --> 00:09:51,100 the format method. 214 214 00:09:51,100 --> 00:09:53,310 So all we did was to define 215 215 00:09:53,310 --> 00:09:56,323 this variable here as number format. 216 216 00:09:57,160 --> 00:09:59,210 And so that's then this formatter, 217 217 00:09:59,210 --> 00:10:00,720 remember. 218 218 00:10:00,720 --> 00:10:02,210 But on that, 219 219 00:10:02,210 --> 00:10:05,920 we then need to actually call the format method. 220 220 00:10:05,920 --> 00:10:08,150 And so this is where we pass in the value 221 221 00:10:08,150 --> 00:10:09,290 that should be formatted. 222 222 00:10:09,290 --> 00:10:13,720 But that is simply the current movement. 223 223 00:10:13,720 --> 00:10:15,563 So this 'Mov' value here. 224 224 00:10:19,210 --> 00:10:21,840 So if I save it now, 225 225 00:10:21,840 --> 00:10:23,700 then that should be fixed. 226 226 00:10:23,700 --> 00:10:27,253 And indeed you already see US dollars right here. 227 227 00:10:28,100 --> 00:10:31,753 But anyway let's login as Jonas now. 228 228 00:10:33,030 --> 00:10:35,883 And yeah, everything is US dollars. 229 229 00:10:37,140 --> 00:10:40,320 However, the number itself here is of course 230 230 00:10:40,320 --> 00:10:43,470 still formatted in the Portuguese way. 231 231 00:10:43,470 --> 00:10:47,693 So that's the current locale of the current user, remember. 232 232 00:10:48,660 --> 00:10:50,220 So that's Jonas. 233 233 00:10:50,220 --> 00:10:53,210 And the locale is pt-Pt, 234 234 00:10:53,210 --> 00:10:54,260 remember. 235 235 00:10:54,260 --> 00:10:58,320 And so therefore the number is still formatted in that way, 236 236 00:10:58,320 --> 00:11:00,130 and not in an American way. 237 237 00:11:00,130 --> 00:11:02,260 That's only for the currency. 238 238 00:11:02,260 --> 00:11:04,370 Okay, so that's USD, 239 239 00:11:04,370 --> 00:11:07,653 but the rest is still according to the users locale. 240 240 00:11:08,570 --> 00:11:10,520 So that's what I said earlier, 241 241 00:11:10,520 --> 00:11:13,030 that the currency is completely independent 242 242 00:11:13,030 --> 00:11:15,080 from the locale itself. 243 243 00:11:15,080 --> 00:11:15,913 So in this case, 244 244 00:11:15,913 --> 00:11:19,453 we have a European country with an American currency. 245 245 00:11:20,690 --> 00:11:21,820 All right. 246 246 00:11:21,820 --> 00:11:22,770 Now indeed, 247 247 00:11:22,770 --> 00:11:27,480 we also have the currency in the account object. 248 248 00:11:27,480 --> 00:11:28,670 So we have the locale 249 249 00:11:28,670 --> 00:11:30,420 and also the currency. 250 250 00:11:30,420 --> 00:11:33,590 And so let's now get that currency also 251 251 00:11:33,590 --> 00:11:34,993 from the account itself. 252 252 00:11:37,030 --> 00:11:38,355 So 253 253 00:11:38,355 --> 00:11:39,693 that's right here. 254 254 00:11:42,420 --> 00:11:45,060 And so here we actually want account 255 255 00:11:46,090 --> 00:11:47,110 dot 256 256 00:11:47,110 --> 00:11:47,943 currency. 257 257 00:11:49,640 --> 00:11:52,060 So if I load it now, 258 258 00:11:52,060 --> 00:11:53,360 (types on keyboard) 259 259 00:11:53,360 --> 00:11:55,283 then indeed we get euros. 260 260 00:11:56,841 --> 00:11:58,020 All right. 261 261 00:11:58,020 --> 00:12:01,270 And if I log in as Jessica Davis, 262 262 00:12:01,270 --> 00:12:05,250 which has USD as the currency, 263 263 00:12:05,250 --> 00:12:07,160 then we get the dollars, 264 264 00:12:07,160 --> 00:12:11,030 and we get it also formatted in the American way. 265 265 00:12:11,030 --> 00:12:12,690 Because for Jessica Davis, 266 266 00:12:12,690 --> 00:12:13,990 the locale 267 267 00:12:13,990 --> 00:12:15,123 is also, 268 268 00:12:17,281 --> 00:12:19,460 it is English in the US. 269 269 00:12:19,460 --> 00:12:21,670 And so this is what it looks like here 270 270 00:12:21,670 --> 00:12:24,683 formatted for the US with US dollars. 271 271 00:12:26,520 --> 00:12:28,380 Of course we could change this to euros. 272 272 00:12:28,380 --> 00:12:33,100 And then, (types on keyboard) 273 273 00:12:33,100 --> 00:12:35,343 of course now we would have the euro sign. 274 274 00:12:37,830 --> 00:12:39,490 All right. 275 275 00:12:39,490 --> 00:12:43,040 So one more time you can see how powerful this is, 276 276 00:12:43,040 --> 00:12:46,593 and how easy it makes formatting for us developers. 277 277 00:12:48,430 --> 00:12:49,670 Okay. 278 278 00:12:49,670 --> 00:12:51,750 Now anyway that is the movements. 279 279 00:12:51,750 --> 00:12:56,750 But now we also have the currency in a lot of other places, 280 280 00:12:56,980 --> 00:12:59,870 for example, here in the balance, 281 281 00:12:59,870 --> 00:13:03,393 and then also down here in the statistics. 282 282 00:13:04,230 --> 00:13:07,560 So that starts to also implement the same formatting 283 283 00:13:07,560 --> 00:13:09,530 here in the balance. 284 284 00:13:09,530 --> 00:13:10,423 And so that is, 285 285 00:13:12,500 --> 00:13:13,453 that's right here. 286 286 00:13:14,320 --> 00:13:15,190 Okay. 287 287 00:13:15,190 --> 00:13:17,620 So here we also have this old way 288 288 00:13:17,620 --> 00:13:19,560 basically of formatting. 289 289 00:13:19,560 --> 00:13:21,483 But we know that we can do better. 290 290 00:13:22,610 --> 00:13:27,410 So we can now go ahead and grab all of this, 291 291 00:13:27,410 --> 00:13:28,433 like this, 292 292 00:13:29,910 --> 00:13:31,490 and paste it here, 293 293 00:13:31,490 --> 00:13:33,470 and then use this. 294 294 00:13:33,470 --> 00:13:34,710 Okay. 295 295 00:13:34,710 --> 00:13:36,950 However, as you can guess, 296 296 00:13:36,950 --> 00:13:38,740 that is not a good practice, 297 297 00:13:38,740 --> 00:13:40,080 because we are repeating 298 298 00:13:40,080 --> 00:13:42,573 the don't repeat yourself principle. 299 299 00:13:44,300 --> 00:13:45,230 Right. 300 300 00:13:45,230 --> 00:13:46,823 So let's get rid of this. 301 301 00:13:47,827 --> 00:13:48,660 And 302 302 00:13:50,410 --> 00:13:51,660 as you can guess, 303 303 00:13:51,660 --> 00:13:53,870 we will create a new function here 304 304 00:13:53,870 --> 00:13:57,849 which will take care of formatting the currencies. 305 305 00:13:57,849 --> 00:14:00,090 (types on keyboard) 306 306 00:14:00,090 --> 00:14:02,860 So let's call it 'formatCur', 307 307 00:14:02,860 --> 00:14:04,373 which stands for currency. 308 308 00:14:05,308 --> 00:14:06,900 (types on keyboard) So a new function. 309 309 00:14:06,900 --> 00:14:10,450 And let's create a very reusable function here. 310 310 00:14:10,450 --> 00:14:12,010 So instead of passing 311 311 00:14:12,010 --> 00:14:14,800 a whole account object into this function, 312 312 00:14:14,800 --> 00:14:19,430 which is very specific of course to this exact application. 313 313 00:14:19,430 --> 00:14:21,530 Let's do a function that you could use 314 314 00:14:21,530 --> 00:14:24,040 in any other application. 315 315 00:14:24,040 --> 00:14:27,070 So basically a function that is less dependent 316 316 00:14:27,070 --> 00:14:29,950 on the underlying application data. 317 317 00:14:29,950 --> 00:14:30,783 Okay. 318 318 00:14:30,783 --> 00:14:31,660 And so instead, 319 319 00:14:31,660 --> 00:14:34,150 what we will do is to simply pass in 320 320 00:14:34,150 --> 00:14:37,759 all the data that this function needs to work with. 321 321 00:14:37,759 --> 00:14:38,890 (types on keyboard) 322 322 00:14:38,890 --> 00:14:41,930 So that's the value, the locale 323 323 00:14:41,930 --> 00:14:43,409 and the currency. 324 324 00:14:43,409 --> 00:14:45,580 (types on keyboard) 325 325 00:14:45,580 --> 00:14:46,660 Okay. 326 326 00:14:46,660 --> 00:14:50,840 So again we could pass the entire account object, 327 327 00:14:50,840 --> 00:14:52,630 here instead of these two. 328 328 00:14:52,630 --> 00:14:56,030 But here we just want to do a reusable function. 329 329 00:14:56,030 --> 00:14:58,126 And so this is a lot better for that. 330 330 00:14:58,126 --> 00:15:00,298 (types on keyboard) 331 331 00:15:00,298 --> 00:15:01,690 All right. 332 332 00:15:01,690 --> 00:15:04,800 So this is the code that we had written earlier. 333 333 00:15:04,800 --> 00:15:07,663 And here, we don't even need to create a new variable, 334 334 00:15:08,540 --> 00:15:11,070 all we will do is to return the result 335 335 00:15:11,070 --> 00:15:14,240 of this number format function. 336 336 00:15:14,240 --> 00:15:17,110 Now, we just need to adapt this a little bit. 337 337 00:15:17,110 --> 00:15:19,180 So here it's just the locale 338 338 00:15:19,180 --> 00:15:22,300 that we get in here as an argument. 339 339 00:15:22,300 --> 00:15:26,500 And then here the same for the currency. 340 340 00:15:26,500 --> 00:15:30,603 And what we want to format is the value that we get in. 341 341 00:15:31,510 --> 00:15:32,530 All right. 342 342 00:15:32,530 --> 00:15:36,500 So again, a nice and simple reusable function 343 343 00:15:36,500 --> 00:15:39,310 that can take any value any locale 344 344 00:15:39,310 --> 00:15:40,940 and any currency, 345 345 00:15:40,940 --> 00:15:44,730 and will then return this value here nicely formatted 346 346 00:15:44,730 --> 00:15:45,870 for that locale 347 347 00:15:45,870 --> 00:15:46,973 and currency. 348 348 00:15:48,690 --> 00:15:50,173 So let's use that here. 349 349 00:15:51,920 --> 00:15:54,980 So of course, instead of what we had before, 350 350 00:15:54,980 --> 00:15:56,980 formattedMov will now become 351 351 00:15:58,220 --> 00:16:00,053 format the currency. 352 352 00:16:00,893 --> 00:16:03,103 And then the value is mov, 353 353 00:16:04,150 --> 00:16:07,320 the locale, which I think it's the second one, 354 354 00:16:07,320 --> 00:16:08,740 yeah, it is. 355 355 00:16:08,740 --> 00:16:09,910 So it's very handy, 356 356 00:16:09,910 --> 00:16:14,070 again here in VS code to just hover over the function name. 357 357 00:16:14,070 --> 00:16:16,800 So the locale is at account, 358 358 00:16:16,800 --> 00:16:17,770 dot locale 359 359 00:16:17,770 --> 00:16:19,910 at the currency at account 360 360 00:16:20,990 --> 00:16:22,523 dot currency. 361 361 00:16:23,553 --> 00:16:25,900 (types on keyboard) 362 362 00:16:25,900 --> 00:16:27,533 And so we can get rid of this. 363 363 00:16:30,630 --> 00:16:31,820 Now I will just copy 364 364 00:16:33,280 --> 00:16:34,273 this part here. 365 365 00:16:35,561 --> 00:16:38,320 (types on keyboard) 366 366 00:16:38,320 --> 00:16:41,950 And so now what we want to format is account 367 367 00:16:41,950 --> 00:16:42,783 dot 368 368 00:16:42,783 --> 00:16:43,980 (types on keyboard) balance. 369 369 00:16:43,980 --> 00:16:44,940 Okay. 370 370 00:16:44,940 --> 00:16:47,510 And we actually don't even have to store it 371 371 00:16:47,510 --> 00:16:49,393 into a separate variable first, 372 372 00:16:50,370 --> 00:16:53,990 we can just take this result directly, 373 373 00:16:53,990 --> 00:16:57,030 and then display it as a text content 374 374 00:16:57,030 --> 00:16:58,283 here in our application. 375 375 00:16:59,212 --> 00:17:01,310 (types on keyboard) 376 376 00:17:01,310 --> 00:17:04,710 So if I log in now as Jonas, 377 377 00:17:04,710 --> 00:17:08,150 then this would already be nicely formatted. 378 378 00:17:08,150 --> 00:17:09,643 And indeed it is. 379 379 00:17:10,490 --> 00:17:13,320 So we see we have this nice separator here, 380 380 00:17:13,320 --> 00:17:15,423 which makes our number easier to read. 381 381 00:17:17,070 --> 00:17:19,060 And now as Jessica Davis, 382 382 00:17:19,060 --> 00:17:21,130 it should be the American separator. 383 383 00:17:21,130 --> 00:17:22,650 So with the comma here. 384 384 00:17:22,650 --> 00:17:23,870 Okay. 385 385 00:17:23,870 --> 00:17:25,550 So that's great. 386 386 00:17:25,550 --> 00:17:29,173 All that's left now is these three values down here. 387 387 00:17:31,100 --> 00:17:31,933 All right. 388 388 00:17:31,933 --> 00:17:33,743 But that should be easy enough with the function 389 389 00:17:33,743 --> 00:17:35,980 that we already created. 390 390 00:17:35,980 --> 00:17:37,653 So let's just copy it here. 391 391 00:17:39,760 --> 00:17:42,690 And then we simply basically need to paste it here 392 392 00:17:42,690 --> 00:17:44,173 to these three places. 393 393 00:17:45,126 --> 00:17:46,910 (types on keyboard) 394 394 00:17:46,910 --> 00:17:50,803 So here it is the incomes that we want to format, right. 395 395 00:17:53,040 --> 00:17:54,030 So incomes 396 396 00:17:54,865 --> 00:17:56,880 (types on keyboard) 397 397 00:17:56,880 --> 00:17:58,320 down here it is 398 398 00:17:59,800 --> 00:18:01,650 this part here. 399 399 00:18:01,650 --> 00:18:04,103 So the absolute value of the out. 400 400 00:18:11,645 --> 00:18:13,490 And then finally down here, 401 401 00:18:13,490 --> 00:18:14,893 it is the interest. 402 402 00:18:16,660 --> 00:18:17,531 Now I copied 403 403 00:18:17,531 --> 00:18:19,281 (chuckles) that code from earlier. 404 404 00:18:22,970 --> 00:18:27,399 So again, it is this interest that we want to format now. 405 405 00:18:27,399 --> 00:18:28,960 (types on keyboard) 406 406 00:18:28,960 --> 00:18:30,103 So interest. 407 407 00:18:32,130 --> 00:18:35,500 And indeed, you can already see even without logging in, 408 408 00:18:35,500 --> 00:18:37,883 that it worked down here. 409 409 00:18:38,760 --> 00:18:41,440 So we have this nice separator here, indeed. 410 410 00:18:41,440 --> 00:18:43,770 And so if we log in again 411 411 00:18:43,770 --> 00:18:45,300 with Jessica Davis, 412 412 00:18:45,300 --> 00:18:47,900 to see it as US dollars, 413 413 00:18:47,900 --> 00:18:51,860 then we get this nice result here as well. 414 414 00:18:51,860 --> 00:18:53,030 Beautiful. 415 415 00:18:53,030 --> 00:18:57,370 And actually, that's it for the Internationalization API. 416 416 00:18:57,370 --> 00:18:59,180 That's all I had to show you. 417 417 00:18:59,180 --> 00:19:01,360 But as I told you right in the beginning, 418 418 00:19:01,360 --> 00:19:04,143 there is a lot more potential in this API. 32701