1 00:00:00,824 --> 00:00:03,540 Welcome to the first coding challenge 2 00:00:03,540 --> 00:00:07,980 of this section and also in a long time actually, 3 00:00:07,980 --> 00:00:10,230 and this one is gonna be a big one 4 00:00:10,230 --> 00:00:12,533 and so let's get started right away. 5 00:00:14,550 --> 00:00:17,480 And in this challenge you gonna build a function, 6 00:00:17,480 --> 00:00:18,490 'where am I'. 7 00:00:18,490 --> 00:00:21,460 Which then displays a country on the page, 8 00:00:21,460 --> 00:00:24,230 but based only on the GPS coordinates 9 00:00:24,230 --> 00:00:26,940 that you provide to the function. 10 00:00:26,940 --> 00:00:28,090 All right? 11 00:00:28,090 --> 00:00:31,930 So instead of providing a real country name like Portugal, 12 00:00:31,930 --> 00:00:34,370 all you will provide is coordinates 13 00:00:34,370 --> 00:00:36,290 of any place on the world. 14 00:00:36,290 --> 00:00:38,120 And based on these coordinates, 15 00:00:38,120 --> 00:00:40,160 then a country will be rendered, 16 00:00:40,160 --> 00:00:42,320 just like we have been doing. 17 00:00:42,320 --> 00:00:43,240 All right? 18 00:00:43,240 --> 00:00:46,690 And so for that, we are going to use a second API 19 00:00:46,690 --> 00:00:50,310 to basically geocode coordinates. 20 00:00:50,310 --> 00:00:52,083 And so here are your tasks. 21 00:00:52,930 --> 00:00:55,700 So, again create a function 'where am I', 22 00:00:55,700 --> 00:00:59,213 which takes as inputs, the latitude and longitude. 23 00:01:00,210 --> 00:01:03,270 So coordinates, as you already know 24 00:01:03,270 --> 00:01:07,050 and that's always, we have some test data down below. 25 00:01:07,050 --> 00:01:08,870 Then the next step, 26 00:01:08,870 --> 00:01:13,270 once you've got these coordinates is to do reverse geocoding 27 00:01:13,270 --> 00:01:15,060 on these coordinates 28 00:01:15,060 --> 00:01:18,180 and reverse geocoding means to convert coordinates 29 00:01:18,180 --> 00:01:20,140 to a meaningful location, 30 00:01:20,140 --> 00:01:23,220 for example, a city or a country name. 31 00:01:23,220 --> 00:01:27,083 And so the API that we're gonna use for that is this one. 32 00:01:27,960 --> 00:01:31,891 So go to this URL, Geocode.xyz, 33 00:01:31,891 --> 00:01:34,223 and then here click on API. 34 00:01:35,150 --> 00:01:37,500 And so down here you then have the format 35 00:01:37,500 --> 00:01:39,880 of the URL that you need to use, 36 00:01:39,880 --> 00:01:42,263 in order to do reverse geocoding. 37 00:01:43,550 --> 00:01:44,383 All right? 38 00:01:44,383 --> 00:01:49,220 So the URL format is simply this one here, 39 00:01:49,220 --> 00:01:51,488 but instead of XML, 40 00:01:51,488 --> 00:01:52,973 you should use JSON. 41 00:01:53,900 --> 00:01:55,833 So that's exactly what we have here. 42 00:01:57,302 --> 00:01:58,350 All right? 43 00:01:58,350 --> 00:02:02,210 So to do this, you should use the fetch API of course, 44 00:02:02,210 --> 00:02:05,320 and then also promises just like we have been doing 45 00:02:05,320 --> 00:02:07,860 in the last couple of videos. 46 00:02:07,860 --> 00:02:10,943 However, do not use the JSON function 47 00:02:10,943 --> 00:02:12,950 that we created previously. 48 00:02:12,950 --> 00:02:14,790 So that would be cheating, 49 00:02:14,790 --> 00:02:18,440 because it would make this whole challenge too easy. 50 00:02:18,440 --> 00:02:21,620 Next, once you have the data take a look at it, 51 00:02:21,620 --> 00:02:25,200 and then using the data print a message like this here 52 00:02:25,200 --> 00:02:26,183 to the console. 53 00:02:27,060 --> 00:02:30,800 Then chain of catch method to the end of the promise 54 00:02:30,800 --> 00:02:33,963 and log any errors that might occur to the console. 55 00:02:35,220 --> 00:02:39,420 Then finally there's one important thing about this API, 56 00:02:39,420 --> 00:02:41,410 which is that it only allows you 57 00:02:41,410 --> 00:02:44,350 to make three requests per second. 58 00:02:44,350 --> 00:02:47,000 So if you reload the page really fast, 59 00:02:47,000 --> 00:02:50,610 then you will get an error with the code four or three. 60 00:02:50,610 --> 00:02:53,290 And this is an error with the request. 61 00:02:53,290 --> 00:02:55,783 So it's a little bit like the four or four error, 62 00:02:55,783 --> 00:02:57,680 that we worked on before. 63 00:02:57,680 --> 00:02:58,513 Remember? 64 00:02:59,380 --> 00:03:02,190 So the fetch function does not reject the promise 65 00:03:02,190 --> 00:03:03,660 in this case, 66 00:03:03,660 --> 00:03:06,740 and so you basically have to do that manually, 67 00:03:06,740 --> 00:03:08,403 and so that is step five. 68 00:03:09,630 --> 00:03:12,580 And so with that, you completed part one. 69 00:03:12,580 --> 00:03:16,610 So part one is basically about reverse geocoding. 70 00:03:16,610 --> 00:03:20,450 And then in part two it's time to use the data that you get 71 00:03:20,450 --> 00:03:23,383 from step number one, to render a country. 72 00:03:24,570 --> 00:03:29,170 And so take the relevant attribute from the geocoding API 73 00:03:29,170 --> 00:03:33,280 and plug it into the countries API that we have been using. 74 00:03:33,280 --> 00:03:36,010 And just like we have been doing rendered a country 75 00:03:36,010 --> 00:03:38,123 and also catch any errors. 76 00:03:39,110 --> 00:03:42,420 And for this one, you can actually even copy the code. 77 00:03:42,420 --> 00:03:45,120 So there's no needs to type the same code, 78 00:03:45,120 --> 00:03:46,930 at least if you're in a hurry. 79 00:03:46,930 --> 00:03:49,610 So if you want to write the same code again 80 00:03:49,610 --> 00:03:51,400 of course that's still great 81 00:03:51,400 --> 00:03:53,760 because that will help your muscle memory 82 00:03:53,760 --> 00:03:56,890 to really internalize these concepts. 83 00:03:56,890 --> 00:03:58,330 Now if for any reason, 84 00:03:58,330 --> 00:04:00,373 by the time you're watching this course 85 00:04:00,373 --> 00:04:03,080 this API here is no longer working. 86 00:04:03,080 --> 00:04:08,060 Then please just Google for another reverse geocoding API. 87 00:04:08,060 --> 00:04:11,033 So I'm sure there should be another one that you can use. 88 00:04:12,260 --> 00:04:13,100 Okay? 89 00:04:13,100 --> 00:04:15,540 But anyway, once you have all of this done, 90 00:04:15,540 --> 00:04:18,820 then you should test your function with these, 91 00:04:18,820 --> 00:04:21,260 three tests, data coordinates. 92 00:04:21,260 --> 00:04:23,640 So hopefully you can complete this challenge 93 00:04:23,640 --> 00:04:26,020 and have some fun along the way. 94 00:04:26,020 --> 00:04:27,770 So I designed this one too, 95 00:04:27,770 --> 00:04:30,430 one more time, be fun for you. 96 00:04:30,430 --> 00:04:31,769 So go have some fun now. 97 00:04:31,769 --> 00:04:34,453 And I see you back here once you're ready. 98 00:04:38,680 --> 00:04:40,040 All right. 99 00:04:40,040 --> 00:04:44,310 So here I am back and here goes my solution. 100 00:04:44,310 --> 00:04:48,620 So 'where am I' is the function that we're gonna create 101 00:04:48,620 --> 00:04:50,870 and attach you, hopefully create it yourself. 102 00:04:51,890 --> 00:04:54,409 And so if your coat works perfectly then, 103 00:04:54,409 --> 00:04:56,910 there's actually not even a need 104 00:04:56,910 --> 00:04:59,323 to watch this video probably to the end. 105 00:05:00,520 --> 00:05:03,980 But anyway, let's now take this URL format 106 00:05:03,980 --> 00:05:07,583 and then do a fetch request to this URL. 107 00:05:09,580 --> 00:05:13,590 So fetch here, let's use a template string 108 00:05:13,590 --> 00:05:16,853 because now here we need to plug in a latitude. 109 00:05:20,480 --> 00:05:24,723 And then here after the comma, we need the longitude. 110 00:05:26,620 --> 00:05:29,000 All right, then on this, 111 00:05:29,000 --> 00:05:33,350 We call the then method and here we get to response. 112 00:05:33,350 --> 00:05:36,180 Let's just call it res for now. 113 00:05:36,180 --> 00:05:40,640 And then immediately we return res.json, 114 00:05:40,640 --> 00:05:43,970 which remember we'll return a new promise. 115 00:05:43,970 --> 00:05:47,510 And it is this one, which then we'll get the data, 116 00:05:47,510 --> 00:05:51,430 because the data is going to be the resolved value 117 00:05:51,430 --> 00:05:52,823 of this promise. 118 00:05:54,380 --> 00:05:56,470 Right? So that's nothing you, 119 00:05:56,470 --> 00:05:59,279 and so let's take a look at the data here. 120 00:05:59,279 --> 00:06:00,803 All right. 121 00:06:03,160 --> 00:06:04,623 So let's reload here. 122 00:06:05,460 --> 00:06:10,460 Oh, and of course I need to call this function indeed. 123 00:06:11,840 --> 00:06:16,490 So let's grab these coordinates, give it a safe. 124 00:06:16,490 --> 00:06:19,403 And so now it actually already worked. 125 00:06:21,120 --> 00:06:22,370 All right. 126 00:06:22,370 --> 00:06:23,610 So let's open it 127 00:06:23,610 --> 00:06:26,023 and let's see what kind of stuff we have here. 128 00:06:26,860 --> 00:06:28,680 So we have the city, 129 00:06:28,680 --> 00:06:30,640 we have the, 130 00:06:30,640 --> 00:06:33,620 basically the confidence that this data is correct, 131 00:06:33,620 --> 00:06:36,053 which is 90%, which is pretty good. 132 00:06:36,900 --> 00:06:38,500 So the country is Germany. 133 00:06:38,500 --> 00:06:42,440 And then here we have all kinds of stuff, 134 00:06:42,440 --> 00:06:45,160 but what matters is actually the country, 135 00:06:45,160 --> 00:06:46,750 at least for part two, 136 00:06:46,750 --> 00:06:49,190 which is gonna be to render the country. 137 00:06:49,190 --> 00:06:52,720 But for now, the task is to lock to the console as string. 138 00:06:52,720 --> 00:06:56,310 You are in city and then country. 139 00:06:56,310 --> 00:06:58,083 So like in Berlin, Germany. 140 00:06:59,200 --> 00:07:00,450 Now, okay? 141 00:07:00,450 --> 00:07:01,893 So let's do that. 142 00:07:03,790 --> 00:07:05,773 So you are in, 143 00:07:07,440 --> 00:07:08,490 and then (data.city), 144 00:07:12,087 --> 00:07:14,837 (data.country), 145 00:07:16,453 --> 00:07:18,036 country, like this, 146 00:07:19,534 --> 00:07:21,350 and all right. 147 00:07:21,350 --> 00:07:23,363 So we are in Berlin, Germany. 148 00:07:24,880 --> 00:07:28,523 Let's actually already do this with the other coordinates. 149 00:07:32,580 --> 00:07:37,580 So let's see what countries we are in. 150 00:07:38,150 --> 00:07:39,623 I actually have no idea. 151 00:07:41,500 --> 00:07:42,750 All right. 152 00:07:42,750 --> 00:07:44,913 So we get undefined, undefined. 153 00:07:45,760 --> 00:07:47,490 And so this is actually the problem that 154 00:07:47,490 --> 00:07:49,643 I was mentioning right at the beginning. 155 00:07:50,680 --> 00:07:55,680 So, this one where the API, sorry. 156 00:07:57,130 --> 00:08:01,410 So where the API only allows three requests per second. 157 00:08:01,410 --> 00:08:04,880 And so, now we got this error four or three. 158 00:08:04,880 --> 00:08:08,011 And so indeed it is exactly this one. 159 00:08:08,011 --> 00:08:09,090 All right? 160 00:08:09,090 --> 00:08:12,400 And so one more time the fetch function 161 00:08:12,400 --> 00:08:14,920 is not correctly handling this error. 162 00:08:14,920 --> 00:08:17,120 So it is not rejecting the promise, 163 00:08:17,120 --> 00:08:20,250 even though this clearly is an error. 164 00:08:20,250 --> 00:08:24,143 And so as you already know, we need to now manually do that. 165 00:08:27,990 --> 00:08:30,260 So here we need to now return. 166 00:08:30,260 --> 00:08:33,520 And just to make sure let's take a look at the response 167 00:08:34,700 --> 00:08:36,910 and this doesn't always happen. 168 00:08:36,910 --> 00:08:37,743 Okay. 169 00:08:37,743 --> 00:08:40,850 And so in this case, it actually worked just fine. 170 00:08:40,850 --> 00:08:44,883 So one of this error is Cape town South Africa, 171 00:08:45,740 --> 00:08:48,563 and the other one is Mumbai in India. 172 00:08:49,830 --> 00:08:51,400 All right? 173 00:08:51,400 --> 00:08:54,913 So let's try to reload again, very fast here. 174 00:08:55,934 --> 00:08:58,233 And so now we get that error again. 175 00:08:59,380 --> 00:09:00,940 Okay? 176 00:09:00,940 --> 00:09:03,350 So where's that response? 177 00:09:05,260 --> 00:09:10,260 So the one that's associated to 13.381. 178 00:09:11,170 --> 00:09:12,810 So that's this one. 179 00:09:12,810 --> 00:09:15,230 And so one more time you get that okay. 180 00:09:15,230 --> 00:09:17,020 Is false. 181 00:09:17,020 --> 00:09:20,360 So let's use that to our advantage. 182 00:09:20,360 --> 00:09:23,795 So if res.okay, 183 00:09:23,795 --> 00:09:25,200 is false, 184 00:09:25,200 --> 00:09:29,510 then throw new error 185 00:09:30,470 --> 00:09:35,470 with the error message problem with geocoding. 186 00:09:37,440 --> 00:09:42,440 And again, let's actually include the status code here. 187 00:09:43,798 --> 00:09:44,631 All right? 188 00:09:45,550 --> 00:09:48,560 So, here we are throwing a new error. 189 00:09:48,560 --> 00:09:50,700 And so we are rejecting this promise, 190 00:09:50,700 --> 00:09:52,373 that's gonna be returned here, 191 00:09:53,360 --> 00:09:57,080 but we are, as of now not catching it anywhere. 192 00:09:57,080 --> 00:09:58,280 And so at this point 193 00:09:58,280 --> 00:10:01,510 we would have an unhandled promise rejection. 194 00:10:01,510 --> 00:10:03,410 And actually, let me show that to you. 195 00:10:04,990 --> 00:10:08,080 So I need to save this a bit faster 196 00:10:08,080 --> 00:10:09,763 in order to create the error. 197 00:10:12,140 --> 00:10:16,173 So, sometimes it's not that easy to catch it. 198 00:10:17,560 --> 00:10:22,230 Let's do it really fast here now, all right. 199 00:10:22,230 --> 00:10:25,503 So now you get uncaught promise, basically. 200 00:10:26,860 --> 00:10:29,950 So the error message is already the one that we want, 201 00:10:29,950 --> 00:10:32,700 but it should not be uncaught. 202 00:10:32,700 --> 00:10:33,533 Right? 203 00:10:33,533 --> 00:10:37,863 And so, indeed we need to catch any promise rejection. 204 00:10:39,590 --> 00:10:41,033 And so let's do that. 205 00:10:43,220 --> 00:10:45,950 And all I'm gonna do in this case is simply log it 206 00:10:45,950 --> 00:10:47,653 to the console as an error, 207 00:10:49,150 --> 00:10:52,853 simply the error.message. 208 00:10:53,870 --> 00:10:56,963 And then I will again, like add an emoji here, 209 00:10:57,980 --> 00:11:00,483 just so we know that it's our own message. 210 00:11:02,570 --> 00:11:03,410 Okay. 211 00:11:03,410 --> 00:11:05,573 Something is missing here apparently. 212 00:11:08,150 --> 00:11:11,620 So here again, we get problem with geocoding. 213 00:11:11,620 --> 00:11:14,680 And so now we successfully handled the error 214 00:11:14,680 --> 00:11:17,590 and could now do something more meaningful with it. 215 00:11:17,590 --> 00:11:19,034 And if we had to like, 216 00:11:19,034 --> 00:11:22,860 again displaying some kind of error message 217 00:11:22,860 --> 00:11:24,250 or logging this error 218 00:11:24,250 --> 00:11:27,050 in some error tracking application. 219 00:11:27,050 --> 00:11:28,330 Now, okay. 220 00:11:28,330 --> 00:11:29,410 So I think with this, 221 00:11:29,410 --> 00:11:32,113 we actually already completed part one. 222 00:11:33,050 --> 00:11:37,490 So we did four and five in the opposite order, 223 00:11:37,490 --> 00:11:39,220 but that's okay. 224 00:11:39,220 --> 00:11:41,500 And so now it's time to use this data 225 00:11:41,500 --> 00:11:42,833 to render a country. 226 00:11:43,809 --> 00:11:46,623 And so this is essentially what we already did before. 227 00:11:47,530 --> 00:11:50,383 So I'm just gonna come here and copy that. 228 00:11:52,140 --> 00:11:54,963 So, let's see where that is. 229 00:11:56,560 --> 00:11:58,343 Well, it's even more up there, 230 00:11:59,480 --> 00:12:00,530 or actually it's not, 231 00:12:04,730 --> 00:12:07,730 so actually I will just copy this part here 232 00:12:07,730 --> 00:12:09,023 of the error handling. 233 00:12:09,890 --> 00:12:11,763 Oh, and actually I can get all of it. 234 00:12:14,060 --> 00:12:15,270 Okay? 235 00:12:15,270 --> 00:12:17,343 So let's paste that here then, 236 00:12:19,760 --> 00:12:23,640 let's get rid of these comments, 237 00:12:23,640 --> 00:12:27,113 and of course now here we need to do a new fetch. 238 00:12:28,410 --> 00:12:30,513 So return fetch, 239 00:12:31,680 --> 00:12:35,020 and then, well actually I need to go back 240 00:12:35,020 --> 00:12:36,883 and get the country as well. 241 00:12:38,600 --> 00:12:41,943 So yeah, that's essentially this URL here. 242 00:12:47,840 --> 00:12:48,673 Okay. 243 00:12:51,350 --> 00:12:55,023 So let's save it I'm not sure if it's gonna work yet. 244 00:12:56,900 --> 00:12:57,940 And it doesn't. 245 00:12:57,940 --> 00:12:58,800 And that's of course, 246 00:12:58,800 --> 00:13:01,003 because this country here doesn't exist. 247 00:13:01,930 --> 00:13:05,610 So the country that we need is stored in data.country. 248 00:13:08,020 --> 00:13:10,830 And so, here we are now logging this string, 249 00:13:10,830 --> 00:13:13,180 just like we were doing before. 250 00:13:13,180 --> 00:13:15,300 And then based on that country 251 00:13:15,300 --> 00:13:20,130 we have our next fecth here, which we will then return. 252 00:13:20,130 --> 00:13:24,970 And then here we have a dead part where we handle the error, 253 00:13:24,970 --> 00:13:26,640 if the country cannot be found 254 00:13:27,650 --> 00:13:31,163 and finally here then we render that country. 255 00:13:33,450 --> 00:13:35,530 But it is not gonna be a neighbor. 256 00:13:35,530 --> 00:13:37,770 So let's get rid of this part. 257 00:13:37,770 --> 00:13:40,973 And up there, we call it response simply res. 258 00:13:42,200 --> 00:13:44,300 So let's do the same here. 259 00:13:44,300 --> 00:13:47,373 And for now let's test it only with one testing data. 260 00:13:48,830 --> 00:13:50,530 So let's see. 261 00:13:50,530 --> 00:13:52,920 And now we still get an error, 262 00:13:52,920 --> 00:13:56,423 cannot read properties, zero of undefined. 263 00:13:57,370 --> 00:13:59,373 So where does that come from? 264 00:14:01,930 --> 00:14:04,870 And so this stack trace here, 265 00:14:04,870 --> 00:14:07,330 is once again not really helpful, 266 00:14:07,330 --> 00:14:10,800 but I think that I still know the answer 267 00:14:10,800 --> 00:14:13,040 and that is because here we actually needed 268 00:14:13,040 --> 00:14:15,603 to take the first element of the array. 269 00:14:17,910 --> 00:14:19,393 If I remember correctly, 270 00:14:21,030 --> 00:14:23,853 well, now nothing happened. 271 00:14:24,800 --> 00:14:27,320 Oh, but I think I know why. 272 00:14:27,320 --> 00:14:29,310 And the reason for that is that, 273 00:14:29,310 --> 00:14:31,783 previously we had this finally here. 274 00:14:32,820 --> 00:14:36,430 So we had this finally which set the country's container, 275 00:14:36,430 --> 00:14:38,570 a perversity back to one. 276 00:14:38,570 --> 00:14:41,933 And as we did that, we removed this from here. 277 00:14:43,900 --> 00:14:45,650 So right here. 278 00:14:45,650 --> 00:14:49,530 So basically now we should set this back here, 279 00:14:49,530 --> 00:14:53,440 so that we can be back to using it in the future. 280 00:14:53,440 --> 00:14:55,170 And so if I saved us now, 281 00:14:55,170 --> 00:14:56,800 Oh, beautiful, 282 00:14:56,800 --> 00:14:58,490 there you have it. 283 00:14:58,490 --> 00:15:01,070 And this is really amazing. 284 00:15:01,070 --> 00:15:03,860 So just using the GPS coordinates, 285 00:15:03,860 --> 00:15:06,820 we can now determine the country that we are in. 286 00:15:06,820 --> 00:15:09,200 And then also display it along with a bunch 287 00:15:09,200 --> 00:15:11,430 of information about the country, 288 00:15:11,430 --> 00:15:12,653 here on our page, 289 00:15:13,540 --> 00:15:16,350 and all thanks to the power of APIs 290 00:15:16,350 --> 00:15:18,903 and also asynchronous JavaScript. 291 00:15:19,960 --> 00:15:22,713 So let's now also test with these two. 292 00:15:25,090 --> 00:15:26,330 Now, right? 293 00:15:26,330 --> 00:15:28,810 But now here in one of them, 294 00:15:28,810 --> 00:15:31,830 we actually got an error with geocoding. 295 00:15:31,830 --> 00:15:33,890 And again, the reason for that is, 296 00:15:33,890 --> 00:15:37,000 that we can only do three requests a second. 297 00:15:37,000 --> 00:15:39,883 And so sometimes this 10 doesn't really work. 298 00:15:41,070 --> 00:15:43,333 Now, but now we actually got all three. 299 00:15:44,650 --> 00:15:49,093 Now this one here for India looks a bit weird, 300 00:15:51,270 --> 00:15:52,530 right? 301 00:15:52,530 --> 00:15:55,890 So this one is India but when we get the data for India, 302 00:15:55,890 --> 00:15:59,470 then apparently because this country also has Indian 303 00:15:59,470 --> 00:16:01,790 in its name, this is then gonna be 304 00:16:01,790 --> 00:16:03,593 the first country that is found, 305 00:16:05,100 --> 00:16:05,940 right. 306 00:16:05,940 --> 00:16:08,453 So there's probably multiple countries for India, 307 00:16:09,290 --> 00:16:12,090 but yeah, that doesn't really matter here in this case, 308 00:16:12,090 --> 00:16:15,563 if you want you can just use some other coordinates here. 309 00:16:16,450 --> 00:16:17,510 All right? 310 00:16:17,510 --> 00:16:20,500 But anyway again, I hope you had some fun 311 00:16:20,500 --> 00:16:23,860 and this was a great use case for how we can actually use, 312 00:16:23,860 --> 00:16:26,000 multiple APIs in sequence 313 00:16:26,000 --> 00:16:29,583 to create a really amazing result like this one.