1 00:00:00,060 --> 00:00:06,420 S. is loaded with some really amazing mini applications that you can build in order to practice and 2 00:00:06,420 --> 00:00:12,340 get a better feel for what you can do when you're making AJAX requests and getting back Jason data. 3 00:00:12,660 --> 00:00:19,110 So first one that we're doing is making a simple request, a simple Futch request to an end point and 4 00:00:19,110 --> 00:00:23,910 returning back the data that's contained within the endpoint and then outputting that data onto the 5 00:00:23,910 --> 00:00:24,240 page. 6 00:00:24,250 --> 00:00:30,540 So it's just loading to the endpoint, making a fetch request, getting the data back within a JSON 7 00:00:30,690 --> 00:00:35,310 format, turning into JavaScript object and then creating the page elements accordingly. 8 00:00:35,580 --> 00:00:39,630 The next application is also connecting to an endpoint. 9 00:00:39,640 --> 00:00:47,010 So we're going to be connecting to the Wikipedia endpoint and making a request to return back content 10 00:00:47,280 --> 00:00:48,610 for the search results. 11 00:00:48,870 --> 00:00:56,280 So with user interaction, loading JSON data and then returning back, different search results accordingly. 12 00:00:56,430 --> 00:01:05,040 So whatever we add in to this search, we're loading the JSON, it's constructing the customized end 13 00:01:05,040 --> 00:01:10,920 point with the different parameters and then loading the data and putting it on the page. 14 00:01:11,130 --> 00:01:18,210 And we're selecting from some of the data that's being returned back, such as the page ID and also 15 00:01:18,540 --> 00:01:25,950 the size the word cat and a snippet of the code that's contained within the Wikipedia endpoint. 16 00:01:26,730 --> 00:01:30,020 The next one is where we're searching on a map location. 17 00:01:30,360 --> 00:01:38,070 So using the wiki map here, Doug, and we're just using an example of the API, so connecting to the 18 00:01:38,070 --> 00:01:45,840 API with latitude and longitude, and it's searching for that area and then returning back the corresponding 19 00:01:45,840 --> 00:01:46,320 results. 20 00:01:46,560 --> 00:01:52,830 So just another endpoint where we can customize the request parameters and get different results back 21 00:01:52,830 --> 00:01:54,310 depending on what we've entered in. 22 00:01:55,020 --> 00:01:58,110 Next up is going to be another connection. 23 00:01:58,290 --> 00:02:05,130 And this one is going to connect to several different and points and load the data from the endpoints. 24 00:02:05,370 --> 00:02:08,200 And there's also going to be using the same functionality. 25 00:02:08,220 --> 00:02:15,150 So repurposing some of the functions across multiple JSON endpoints so the data always isn't structured 26 00:02:15,150 --> 00:02:15,660 the same. 27 00:02:15,810 --> 00:02:23,070 So we're adjusting for what's being returned back and dynamically outputting content and looping through 28 00:02:23,070 --> 00:02:28,180 the object data into an array and getting the property name and the value. 29 00:02:28,530 --> 00:02:36,540 So a lot of practice with selecting and getting content back and then working with the JavaScript object 30 00:02:36,540 --> 00:02:42,230 data that's coming from the JSON end point and utilizing it and making use of it. 31 00:02:42,240 --> 00:02:47,720 There's also some debugging and what you can do to customize the content being output. 32 00:02:48,240 --> 00:02:54,960 Next up is another endpoint and this one is selecting to the random user emy endpoint. 33 00:02:55,200 --> 00:03:01,110 So it's returning back a random selection of users and then we can also click on the user and it's going 34 00:03:01,110 --> 00:03:05,960 to highlight that user information so we can return back various amounts of users. 35 00:03:05,960 --> 00:03:12,990 So if we want to get 50 results back, we can get 50 results back into the page and then make a selection 36 00:03:12,990 --> 00:03:13,730 of the user. 37 00:03:13,740 --> 00:03:15,430 It's going to highlight that information. 38 00:03:15,630 --> 00:03:17,060 This is just a dummy data. 39 00:03:17,280 --> 00:03:20,610 So this is a really good rich API that you can connect to. 40 00:03:20,790 --> 00:03:24,540 And there's a quite a bit of data within the object that gets returned back. 41 00:03:24,720 --> 00:03:30,900 So you can get some good practice here where you can select deep into the object data and output it 42 00:03:30,900 --> 00:03:37,050 within your Web page as you make the AJAX requests return back that the data and then making another 43 00:03:37,050 --> 00:03:41,610 request to get the customized information about that particular user. 44 00:03:42,330 --> 00:03:45,600 Next up is another connection to a JSON. 45 00:03:45,900 --> 00:03:54,150 So we're making a connection to the open, whether API and this one is limited so we can only make so 46 00:03:54,150 --> 00:03:55,080 many requests. 47 00:03:55,680 --> 00:03:59,220 So that one is another example of working with APIs. 48 00:03:59,220 --> 00:04:05,190 And some of them, when you are working with the testing data, they're going to have limits to the 49 00:04:05,190 --> 00:04:05,820 requests. 50 00:04:06,000 --> 00:04:09,780 So just getting comfortable with seeing different error messages and how you can handle that. 51 00:04:10,200 --> 00:04:14,570 And we're also going to be creating a connection to a joke API. 52 00:04:14,580 --> 00:04:22,830 So this is a Chuck Norris style joke API first, when the page loads we go through the joke API and 53 00:04:22,830 --> 00:04:24,240 we listed all the categories. 54 00:04:24,370 --> 00:04:29,040 So this is all dynamically created and that goes for all of the applications. 55 00:04:29,040 --> 00:04:30,090 Within this lesson. 56 00:04:30,270 --> 00:04:36,810 We're starting out with a very basic page structure and then all of the content is actually generated 57 00:04:37,020 --> 00:04:38,220 with JavaScript. 58 00:04:38,230 --> 00:04:44,580 So if we actually look at the page source, it's very straightforward and we've only got the four elements 59 00:04:44,580 --> 00:04:48,350 on the page and the rest of it is generated with JavaScript. 60 00:04:48,600 --> 00:04:55,380 So this allows us to search the API, return back results from the API, and then we can output the 61 00:04:55,380 --> 00:04:59,190 contents of those results from that request. 62 00:04:59,800 --> 00:05:07,470 And we can also specify the different categories as well and list out content that are from that category. 63 00:05:07,480 --> 00:05:12,060 So we make a selection, it's going to list out the content from the API. 64 00:05:12,070 --> 00:05:16,890 It's going to go and make another feature request to the endpoint and list out the content accordingly. 65 00:05:18,340 --> 00:05:20,950 So we also have another really nice API. 66 00:05:20,950 --> 00:05:26,920 That's a great way to practice working with data so very similar to the jokes where we're loading out 67 00:05:27,070 --> 00:05:28,130 different categories. 68 00:05:28,330 --> 00:05:30,460 So this is done when the page loads. 69 00:05:30,700 --> 00:05:33,370 So we're constructing the categories within the H1. 70 00:05:33,370 --> 00:05:38,640 So we've got the six buttons dynamically generated from the endpoint. 71 00:05:38,650 --> 00:05:42,460 So we make the request directly when we load the page. 72 00:05:42,820 --> 00:05:50,020 And this again is very late on the HTML where we've got the four elements and then when we do make the 73 00:05:50,020 --> 00:05:56,860 connection, we use the JavaScript code and we wait for the DOM content loaded that we make our request 74 00:05:56,860 --> 00:06:03,160 to the endpoint and that gives us the loading of the categories and then from the categories we can 75 00:06:03,160 --> 00:06:06,280 load out the different API data. 76 00:06:06,610 --> 00:06:13,900 And then we're also generating and we're chunking the data into pages of 10 pieces of data and also 77 00:06:13,930 --> 00:06:19,090 adding in buttons here so the user can select the piece of data that they want to look at. 78 00:06:19,370 --> 00:06:25,490 So once they've selected it, they can click it and get more details about that piece of data. 79 00:06:25,810 --> 00:06:31,000 And this is a way to practice navigating and providing some. 80 00:06:33,120 --> 00:06:40,350 User selected content where we're connecting to the API and also getting the data that the user might 81 00:06:40,350 --> 00:06:40,980 be looking for. 82 00:06:41,010 --> 00:06:44,250 So it allows the user to select and return back data. 83 00:06:44,490 --> 00:06:47,500 And once again, it's all done with JavaScript. 84 00:06:47,760 --> 00:06:53,610 So when we have the four elements that we start out with and the rest is generated with JavaScript, 85 00:06:54,120 --> 00:06:56,790 we're also connecting to a trivia database. 86 00:06:57,190 --> 00:07:01,580 And this is also the same concept where we're focusing a lot on the JavaScript. 87 00:07:01,830 --> 00:07:05,640 So we start with the four core elements that we did and the other lessons. 88 00:07:05,790 --> 00:07:12,180 And then we generate this fully interactive trivia database game so where we can select the number of 89 00:07:12,180 --> 00:07:20,220 questions that we want to do the category and dynamically select the category and also selective one 90 00:07:20,220 --> 00:07:24,810 easy, medium and hard so that a lot of these are set with the endpoint. 91 00:07:24,960 --> 00:07:30,420 And once the user's made their selection, we can start the game and it makes the connection. 92 00:07:30,570 --> 00:07:32,790 Load's the question, the trivia question. 93 00:07:34,530 --> 00:07:37,680 That information is presented within the API. 94 00:07:37,830 --> 00:07:44,400 So coming back from the API, we've got incorrect answers as well as we've got a correct answer so we 95 00:07:44,400 --> 00:07:46,320 can select the answer. 96 00:07:46,650 --> 00:07:51,180 And if we got the correct answer, we it goes green, the other ones go red. 97 00:07:51,180 --> 00:07:52,680 We can move to the next question. 98 00:07:53,280 --> 00:07:58,410 And this one, if we get it incorrect, we don't score for that. 99 00:07:58,440 --> 00:08:00,030 We move through the next questions. 100 00:08:00,390 --> 00:08:09,570 And then lastly, and we get a score for the questions we scored one, you score one out of three questions 101 00:08:09,750 --> 00:08:16,590 and then we can start again and generate fully dynamic interactive game. 102 00:08:16,830 --> 00:08:18,330 And this is all data driven. 103 00:08:18,330 --> 00:08:22,230 So it's all coming from the database, the trivia database. 104 00:08:22,230 --> 00:08:26,730 And point was we make the selections that loads the appropriate data. 105 00:08:26,730 --> 00:08:31,890 So that's the open ti db dot com API where we're making those selections from. 106 00:08:32,760 --> 00:08:35,750 We also have a stock exchange API. 107 00:08:36,120 --> 00:08:39,060 So this is our really robust API. 108 00:08:39,060 --> 00:08:46,370 There's a lot of information contained in here so we can do a search for it within the Stack API so 109 00:08:46,380 --> 00:08:53,340 it returns back the stock information, the object information, and we can select that and see more 110 00:08:53,340 --> 00:09:00,630 content and then also go back in and search for more stuff within the Stack API and really getting a 111 00:09:00,630 --> 00:09:08,910 good opportunity to practice getting and outputting the page content coming from the API endpoint and 112 00:09:08,910 --> 00:09:12,750 getting the JSON data and using it within the Web page. 113 00:09:13,500 --> 00:09:17,000 We also have another one where we're loading country information. 114 00:09:17,430 --> 00:09:25,140 So what this does is this loads a full list of over two hundred and fifty countries with all of this 115 00:09:25,140 --> 00:09:26,730 data that's contained here. 116 00:09:27,150 --> 00:09:34,920 So minimizing the requests to the endpoint, we're going to be connecting to this API with the one initial 117 00:09:34,920 --> 00:09:38,100 connection and then just returning back. 118 00:09:38,250 --> 00:09:41,730 And it's all JavaScript that's going to be chunking all of the pages. 119 00:09:41,910 --> 00:09:45,620 So generating all of the different pages that we can click through. 120 00:09:45,630 --> 00:09:52,320 This is all done with JavaScript dynamically setting and allowing us to select the different page pages 121 00:09:52,320 --> 00:09:56,460 so all the data is chunked and allows us to output. 122 00:09:56,700 --> 00:10:03,240 So simulating connecting to an API, getting a whole lot of JSON data and then making use of that data 123 00:10:03,360 --> 00:10:04,410 within the webpage. 124 00:10:05,580 --> 00:10:13,830 And the source code for this one as well is just the initial for each HTML elements and then the rest 125 00:10:13,830 --> 00:10:16,020 is generated and done with JavaScript. 126 00:10:17,040 --> 00:10:22,800 And there's also another take on that, the same API, that country API where we can search by country 127 00:10:22,800 --> 00:10:26,370 name, and this is going to load the country information. 128 00:10:26,670 --> 00:10:33,930 And in this case we've extended some of the functionality where we can click on the returned results 129 00:10:34,260 --> 00:10:39,990 and that will output all of the object details on the page so we can search by whatever name we want 130 00:10:40,200 --> 00:10:44,460 and it will return back the content that corresponds with it. 131 00:10:44,760 --> 00:10:50,880 So if won't search for Canada, we get all of this information back from the from the rest countries, 132 00:10:50,880 --> 00:10:57,360 EU, API, and then we can loop through it and output it onto the page. 133 00:10:58,410 --> 00:11:04,440 It's another really good exercise of getting and selecting and allowing the user to have interactive 134 00:11:04,440 --> 00:11:08,730 content and generating the data that they're looking for. 135 00:11:09,180 --> 00:11:11,760 And this is all coming dynamically from the API. 136 00:11:13,890 --> 00:11:17,700 And one of the best ways to learn, of course, is to try the code out for yourself. 137 00:11:17,910 --> 00:11:20,040 All the source code is included. 138 00:11:20,250 --> 00:11:22,920 If you have any questions or comments, please let me know. 139 00:11:23,160 --> 00:11:26,670 Let's get started coding and creating this amazing project.