1 00:00:00,240 --> 00:00:07,290 The interesting challenge for this lesson is we're connecting to a joke API and this joke API only allows 2 00:00:07,290 --> 00:00:10,670 us to have 10 requests per hour on the free application. 3 00:00:11,040 --> 00:00:17,220 So when you build out the application, the challenge is going to be when you make your request, get 4 00:00:17,220 --> 00:00:21,660 the structure of the JSON data that you want to output on the page within. 5 00:00:23,540 --> 00:00:28,150 Less than the 10 requests, otherwise you're going to have to wait an hour in order to complete it. 6 00:00:28,340 --> 00:00:29,200 So let's get started. 7 00:00:31,170 --> 00:00:37,170 In this lesson, we're going to be connecting to API jokes, dot one website, so they've got an open 8 00:00:37,170 --> 00:00:42,390 API where you can return back a joke of a day and then you can sign up and you can get a key and you 9 00:00:42,390 --> 00:00:45,930 can return back even more content from the API. 10 00:00:46,230 --> 00:00:52,230 So we're going to be just using a basic connection and running our code to make a connection to the 11 00:00:52,230 --> 00:00:52,770 API. 12 00:00:53,190 --> 00:00:59,070 So we've got our standard HTML templates, so few different elements on the page. 13 00:00:59,080 --> 00:01:04,950 We've got a main container that contains an input, a button and an output class and then linking to 14 00:01:04,950 --> 00:01:09,420 code one G.S. and then we've got the code one G.S. content. 15 00:01:09,780 --> 00:01:12,480 So what we want to do is connect to the button first. 16 00:01:12,810 --> 00:01:20,820 So create the JavaScript code and using the document object and query selector, we're selecting the 17 00:01:20,820 --> 00:01:23,130 element with a class of button. 18 00:01:24,560 --> 00:01:30,230 And then we'll add in that listener that's going to make the request to the endpoint, so to the button 19 00:01:30,830 --> 00:01:35,210 out of that listener and whatever, the button gets clicked. 20 00:01:37,680 --> 00:01:47,010 There are fire off the vent and this event is going to make the Futch request so fetch and also will 21 00:01:47,010 --> 00:01:50,640 set a perimeter here for the euro of the end point. 22 00:01:51,480 --> 00:01:54,840 So that's available at the joke one. 23 00:02:10,540 --> 00:02:19,240 And forget joke of the day, so it's returning back the file, so that's the URL that we can use to 24 00:02:19,240 --> 00:02:26,530 make the initial connection to so the joke of the day and then make the Futch request to the euro. 25 00:02:28,280 --> 00:02:36,170 And once we get content back, so once we get the response back, then return the response object as 26 00:02:36,170 --> 00:02:36,750 Jason. 27 00:02:38,270 --> 00:02:44,960 And then lastly, take the data that's being returned back and then we'll put that into the console. 28 00:02:47,870 --> 00:02:55,490 So we've got our initial connection making the request and we're returning it back as Jason data and 29 00:02:55,490 --> 00:03:04,160 this is returning back the joke that we have and it's got the joke, it's got title and some of the 30 00:03:04,160 --> 00:03:05,890 parameters of the joke itself. 31 00:03:08,720 --> 00:03:12,750 And then we've got success on how many jokes that we were able to return back. 32 00:03:14,540 --> 00:03:20,290 So now let's start let's take the joke contents and then we'll output it to the page. 33 00:03:20,300 --> 00:03:26,660 So navigating through the object and then returning back and putting the contents of that particular 34 00:03:26,660 --> 00:03:30,710 joke and also going to select the page elements. 35 00:03:31,280 --> 00:03:42,380 So we've got the input elements and using the documents and query selector, select the input on the 36 00:03:42,380 --> 00:03:42,770 page 37 00:03:45,980 --> 00:03:49,730 and then take the input elements style. 38 00:03:49,760 --> 00:03:55,330 And since we're not going to be using it, do a display, none of that content. 39 00:03:56,030 --> 00:04:05,540 And then also for the output area, using the document and query selector, select the element with 40 00:04:05,540 --> 00:04:06,980 a class of output. 41 00:04:09,900 --> 00:04:16,920 And that will give us a container to put the content to whatever the button gets clicked and button. 42 00:04:17,220 --> 00:04:18,810 Let's update the text content. 43 00:04:24,940 --> 00:04:30,760 So it's going to get the joke of the day whenever the button gets clicked, and that will just simply 44 00:04:30,760 --> 00:04:34,240 output the content at the bottom within that output area. 45 00:04:38,700 --> 00:04:47,700 So let's start to navigate through the object, and if we do have a success value, so if the success 46 00:04:47,700 --> 00:04:55,980 total is greater than one that we know that we can output content, so have a condition to check to 47 00:04:55,980 --> 00:05:03,890 see if detA success total is greater than zero. 48 00:05:04,650 --> 00:05:09,300 And if it is, then we know that we can make the request and output the jokes content. 49 00:05:13,210 --> 00:05:20,620 And create a function where we can output the joke and the jokes themselves are going to be contained 50 00:05:20,620 --> 00:05:28,450 within data and the object is jokes, and this is the array that is contained with. 51 00:05:28,870 --> 00:05:36,220 So a pass through the full data object and then output the joke. 52 00:05:40,200 --> 00:05:43,320 And taking in the joke information. 53 00:05:46,740 --> 00:05:54,630 And we'll actually just call this data as well, and for now, we'll log it out into the console just 54 00:05:54,630 --> 00:05:58,680 to make sure that we are getting the object passed properly. 55 00:06:05,720 --> 00:06:11,540 And it looks like we're seeing undefined within the console, so there's nothing being output within 56 00:06:11,540 --> 00:06:12,740 the data jokes. 57 00:06:13,010 --> 00:06:20,960 So let's double check and output the contents of the console and see what we've got for data jokes. 58 00:06:22,620 --> 00:06:25,720 So we're getting undefined going back to data. 59 00:06:26,060 --> 00:06:31,760 And this is how you can troubleshoot the object to make sure that you are able to get the object properly. 60 00:06:32,060 --> 00:06:37,850 So it's actually within a property name of contents and then that's where the joke is contained. 61 00:06:39,260 --> 00:06:47,960 So adding in the contents and adding in the contents property value, now we're able to return back 62 00:06:47,970 --> 00:06:49,250 the jokes content. 63 00:06:52,000 --> 00:07:01,060 And see the joke within the console, so the joke content is under the joke, so there's a description 64 00:07:01,060 --> 00:07:02,860 value that we can use as a heading. 65 00:07:03,370 --> 00:07:05,980 So let's construct output for the page. 66 00:07:11,930 --> 00:07:16,670 And set up the inner HTML, I can use the tactics for this. 67 00:07:17,530 --> 00:07:25,990 And outputting the joke content, so setting up a separate variable for joke and because this is just 68 00:07:25,990 --> 00:07:31,300 going to be using the first item within the array, that will return back the joke contents. 69 00:07:34,160 --> 00:07:43,940 And then going into the array, we can output within the each one the joke and using the curly brackets, 70 00:07:46,310 --> 00:07:53,240 let's output the joke description and close off each one. 71 00:07:55,520 --> 00:07:57,560 So that added the joke of the day. 72 00:08:03,120 --> 00:08:11,700 And for Output's or just concatenated to the current output and also update the Tuggle of the Wardrop 73 00:08:11,700 --> 00:08:14,310 for the editor so that we can see the contents. 74 00:08:14,880 --> 00:08:18,510 And now let's look at the next content that we want to output. 75 00:08:19,890 --> 00:08:23,220 And we can output the category if we want the language. 76 00:08:23,850 --> 00:08:26,670 And actually, let's just go right into the joke. 77 00:08:27,630 --> 00:08:29,140 So the title of the joke. 78 00:08:30,060 --> 00:08:34,980 So this is where we can have the actual joke content and this is going to be a div. 79 00:08:36,580 --> 00:08:45,400 And the path is going to be joke, joke and title, and in order to put the joke itself, it's going 80 00:08:45,400 --> 00:08:47,140 to be a joke joke text. 81 00:08:49,120 --> 00:08:56,410 So that's going to put the joke content into the page and making our quest to the end point of the joke 82 00:08:56,410 --> 00:08:57,010 and point. 83 00:08:58,300 --> 00:09:00,640 And there is one thing to note as well for this. 84 00:09:00,970 --> 00:09:06,040 So when we click it, we're getting this four twenty nine error. 85 00:09:06,310 --> 00:09:07,690 So we're getting an undefined. 86 00:09:07,690 --> 00:09:13,690 And when you do encounter these types of errors, what you can do is you can open it up within the Web 87 00:09:13,690 --> 00:09:19,300 browser to check to see if there's an error with the end point. 88 00:09:20,050 --> 00:09:25,810 And there is a message here that says too many requests, the rate limit of 10 requests per hour has 89 00:09:25,810 --> 00:09:26,530 been exceeded. 90 00:09:26,740 --> 00:09:30,010 So we've got to wait fifty one minutes in order to make another request. 91 00:09:30,220 --> 00:09:32,380 That's what we're throwing the undefined. 92 00:09:32,530 --> 00:09:38,040 And also, since we've got undefined, we're not able to read the total. 93 00:09:39,460 --> 00:09:45,250 So be mindful of the fact that there are limitations on these open APIs. 94 00:09:45,760 --> 00:09:49,450 So if you do encounter any of the issues, this is how you can troubleshoot them. 95 00:09:51,800 --> 00:09:57,530 This lesson has an interesting challenge because as we saw within the lesson, that you can only make 96 00:09:57,530 --> 00:10:04,730 10 requests per hour, so connect to the API, build your application and build it so that you're making 97 00:10:04,730 --> 00:10:07,690 less than 10 requests to the endpoint API. 98 00:10:08,090 --> 00:10:16,250 You can also try to store the structure that JSON structure so that within the 10 requests you build 99 00:10:16,250 --> 00:10:22,700 one where you can make a request to the joke API without running out of request options for that our.