1 00:00:09,220 --> 00:00:15,010 Hey, everyone, it's time to do our list of exercises, number five, so as always, I'm just going 2 00:00:15,010 --> 00:00:20,070 to read the question, give you a few tips, and then I'm going to give you some time to solve it. 3 00:00:20,740 --> 00:00:27,250 So, number one, populate the below select box with the list of countries of the world. 4 00:00:27,640 --> 00:00:30,370 The task should be divided in two parts. 5 00:00:30,790 --> 00:00:38,500 So first, create a function to get countries using Ajax from the following API. 6 00:00:38,710 --> 00:00:42,030 So I'm giving you the Yooralla for the API. 7 00:00:42,430 --> 00:00:48,540 And the second part is create a function to add the option element for each country. 8 00:00:48,820 --> 00:00:51,240 So you need to create two functions here. 9 00:00:51,520 --> 00:00:59,990 So if you inspect this element, you will see that this is a select box with with only one option inside. 10 00:01:00,160 --> 00:01:06,010 So the first part of your work is going to be doing an AJAX requests for this API. 11 00:01:06,130 --> 00:01:11,640 If you go to this address, you will see that you will receive a list of all countries in the world. 12 00:01:11,920 --> 00:01:20,830 So all you have to do is looping through this list or this array and then adding every country has an 13 00:01:20,830 --> 00:01:22,810 option of this select box. 14 00:01:23,680 --> 00:01:25,570 So this would be pretty easy to do. 15 00:01:25,720 --> 00:01:32,770 And now there's another part for this exercise, which it is when a country is selected, use local 16 00:01:32,770 --> 00:01:37,050 storage to make it selected the next time the page is loaded. 17 00:01:37,390 --> 00:01:46,600 So if I select a country here, let's say France, the next time I load the page, not only you need 18 00:01:46,960 --> 00:01:55,150 to populate this list again, but you need to preselect friends, which is what is stored in the local 19 00:01:55,150 --> 00:01:55,780 storage. 20 00:01:55,780 --> 00:02:00,590 And every time you change the country, you just update the local storage. 21 00:02:00,760 --> 00:02:06,970 So the next time the page loads, it loads with the previous country preselected. 22 00:02:07,290 --> 00:02:07,610 Right. 23 00:02:07,660 --> 00:02:09,130 So that's it for number one. 24 00:02:09,370 --> 00:02:14,020 Number two, the Jason below represents a list of courses. 25 00:02:14,320 --> 00:02:17,620 Each course has a title and an array of reviews. 26 00:02:18,010 --> 00:02:25,210 Create a function to pass the Jason, add another property for the average rating of each course, then 27 00:02:25,210 --> 00:02:29,200 return a new JSON with the updated object. 28 00:02:30,820 --> 00:02:34,250 So here, for each course, you have an object. 29 00:02:34,660 --> 00:02:36,670 So here's the object. 30 00:02:37,540 --> 00:02:40,610 Actually, let me use another one as an example. 31 00:02:40,630 --> 00:02:41,830 This one is good. 32 00:02:43,790 --> 00:02:49,910 So here we have one property called Title, which is the title of the course in one property for the 33 00:02:49,910 --> 00:02:53,340 reviews, which is just the list of reviews. 34 00:02:53,930 --> 00:03:00,170 So what you have to do is pass this JSON, then go inside this object. 35 00:03:00,170 --> 00:03:08,270 And for each course, you need to add the new property called average rating, which you are going to 36 00:03:08,270 --> 00:03:10,850 calculate from this array. 37 00:03:11,240 --> 00:03:15,650 But as you can see, some courses don't have any reviews like this one. 38 00:03:15,950 --> 00:03:18,610 And there are also some extra rules. 39 00:03:19,100 --> 00:03:26,870 So I want you to use, try, catch and throw to comply with the following rules if the course doesn't 40 00:03:26,870 --> 00:03:28,130 have any reviews. 41 00:03:28,550 --> 00:03:33,700 The average rating property should receive the value, no reviews. 42 00:03:33,980 --> 00:03:40,790 So then instead of sending the average, you are just going to send a string with the text. 43 00:03:40,790 --> 00:03:41,780 No reviews. 44 00:03:42,110 --> 00:03:48,010 If the course says less than five reviews, the average rating property should receive the value. 45 00:03:48,290 --> 00:03:50,750 Not enough reviews yet. 46 00:03:51,110 --> 00:03:55,130 So if it's below five still, you won't calculate anything. 47 00:03:55,340 --> 00:04:03,140 You are just going to send not enough reviews yet for this new property if the course has five reviews 48 00:04:03,140 --> 00:04:11,750 or more so otherwise the property should receive the average rating of the course rounded to one decimal 49 00:04:11,750 --> 00:04:12,410 place. 50 00:04:12,800 --> 00:04:20,180 So what you can do here is just sending the new Jason to the console just so you can check if this is 51 00:04:20,180 --> 00:04:27,680 right, if everything's right, if you have a Jason back with a new property for each of the courses, 52 00:04:27,680 --> 00:04:29,660 then this is enough. 53 00:04:30,260 --> 00:04:36,110 So, number three, add the new functionality to the country selector of exercise one. 54 00:04:36,290 --> 00:04:41,990 So here you have this country selector that you are going to solve in exercise number one. 55 00:04:42,000 --> 00:04:44,250 And now we are going to add something here. 56 00:04:44,480 --> 00:04:51,890 So when the country is selected, I want you to list below it the public holidays for that country in 57 00:04:51,890 --> 00:04:53,080 the previous year. 58 00:04:53,390 --> 00:04:55,040 Use the layout below. 59 00:04:55,310 --> 00:04:59,960 So let's say I go here, I see all the countries and I select Italy. 60 00:05:00,350 --> 00:05:08,600 What I want you to do is just list this right below that select box where I can see the country that 61 00:05:08,600 --> 00:05:11,100 I selected the previous year. 62 00:05:11,120 --> 00:05:18,230 This is important because the API that we are going to use only works for the previous year. 63 00:05:18,470 --> 00:05:21,490 So if you tried the current here, this is not going to work. 64 00:05:21,770 --> 00:05:26,900 So I want you to use the previous here, which in this case is 2019. 65 00:05:27,980 --> 00:05:35,480 And then you were going to list all the public holidays for that country, how are you going to do that? 66 00:05:35,750 --> 00:05:38,260 You're going to use the holiday API. 67 00:05:38,390 --> 00:05:41,000 So here's the link if you go inside here. 68 00:05:42,560 --> 00:05:49,970 You need to get a free API key, it's really easy, you just click here, just leave your email and 69 00:05:49,970 --> 00:05:52,430 you are going to receive an API key. 70 00:05:52,610 --> 00:06:00,230 And then inside here, I want you to try to find the URL that you need to use so you can get the list 71 00:06:00,230 --> 00:06:02,600 of public holidays for that country. 72 00:06:02,750 --> 00:06:08,530 If you have any questions, just go to the video where I solve this exercise. 73 00:06:08,540 --> 00:06:11,360 So then you see how to use this API. 74 00:06:11,360 --> 00:06:15,320 But before you do that, just try to explore this API. 75 00:06:15,320 --> 00:06:23,420 Just go to these menus here, try to find some documentation where you can see what the your and the 76 00:06:23,420 --> 00:06:27,000 properties that you need to use for this request. 77 00:06:27,770 --> 00:06:28,600 So that's it. 78 00:06:28,610 --> 00:06:33,470 We only have three exercises, but this is going to take a bit more time than normally. 79 00:06:33,480 --> 00:06:34,700 So good luck. 80 00:06:34,940 --> 00:06:40,250 And when you're done, just go back here, because in the next video, I'm going to start solving these 81 00:06:40,250 --> 00:06:41,420 exercises. 82 00:06:41,420 --> 00:06:42,380 So I'll see you then.