1 00:00:00,750 --> 00:00:05,570 All right guys so we have our UI here with just a bunch of placeholders. 2 00:00:05,580 --> 00:00:10,950 Now we want to fetch the data from the API from the weather API underground. 3 00:00:11,340 --> 00:00:16,950 So we're going to go ahead and go to whether or not J.S. if we're going to create a class here called 4 00:00:16,950 --> 00:00:17,520 whether 5 00:00:20,540 --> 00:00:21,950 it's going to have a constructor 6 00:00:24,740 --> 00:00:29,110 and then we're gonna have a few properties here one is going to be our API key. 7 00:00:30,320 --> 00:00:35,660 So yours will be different than mine it should be if you're on this page it'll be this this number right 8 00:00:35,660 --> 00:00:37,250 here. 9 00:00:37,250 --> 00:00:42,710 Or if you go to key settings it'll be this right here your key ID. 10 00:00:42,710 --> 00:00:48,480 So let me just paste that in and then we're also going to set the city. 11 00:00:49,370 --> 00:00:53,710 So say this start city equals the city that's passed in. 12 00:00:53,710 --> 00:00:56,500 And we should actually have city and state right here 13 00:00:59,650 --> 00:01:00,530 and there will do. 14 00:01:00,560 --> 00:01:04,760 This starts day equals day. 15 00:01:05,990 --> 00:01:06,370 All right. 16 00:01:06,380 --> 00:01:14,670 And then we'll go underneath here and let's say Fetch weather from API. 17 00:01:15,020 --> 00:01:18,730 So this is going to be in a sync function called Get weather 18 00:01:23,340 --> 00:01:31,710 and we're going to say Consta response and we want to wait for the fetcher spots and then the u r l 19 00:01:31,710 --> 00:01:35,250 we're going to pass in bring some back ticks here. 20 00:01:35,250 --> 00:01:37,050 You are going to be. 21 00:01:37,710 --> 00:01:46,080 Let's go over here and let's go to documentation and I'm just going to grab this OK if you don't have 22 00:01:46,080 --> 00:01:49,660 this page up just go ahead and copy this in here. 23 00:01:49,680 --> 00:01:59,830 Now this is the API key soon going to replace this with the dynamic value of this Daut API key. 24 00:02:00,090 --> 00:02:06,210 And then I'm going to replace the state with the dynamic value of this data state. 25 00:02:06,420 --> 00:02:12,560 And also the city will replace that with this dot city. 26 00:02:12,690 --> 00:02:15,510 OK make sure you have dot Jason at the end though. 27 00:02:15,960 --> 00:02:17,820 So that's our response variable. 28 00:02:17,820 --> 00:02:20,540 Now we want the response data. 29 00:02:20,880 --> 00:02:34,350 So let's do Konst response data set it to a wait and then the response start Jason and then we can simply 30 00:02:34,350 --> 00:02:39,370 return the response data. 31 00:02:42,250 --> 00:02:49,980 Now again if we look at what this gives us everything we want is inside of the current observation object 32 00:02:49,990 --> 00:02:53,570 that's where all the weather information is and the location info. 33 00:02:53,680 --> 00:02:58,030 So instead of just returning the response data from that we get from this. 34 00:02:58,180 --> 00:03:04,020 I want to return response data Daut current underscore observation. 35 00:03:04,480 --> 00:03:09,810 OK that way we just have one single object with all the weather stuff inside of it. 36 00:03:10,370 --> 00:03:10,830 OK. 37 00:03:10,840 --> 00:03:17,620 And then the only other method that I want in this class is to change the weather location. 38 00:03:17,620 --> 00:03:20,730 So we might as we'll just put that in here. 39 00:03:22,330 --> 00:03:33,940 So we'll say change locations and all this is going to do it's going to take in city state and we're 40 00:03:33,940 --> 00:03:43,540 going to set this city equal to the city that's passed in the scene with the state like that and that's 41 00:03:43,540 --> 00:03:44,410 it. 42 00:03:44,410 --> 00:03:47,680 So it's save and that's our complete weather class. 43 00:03:47,680 --> 00:03:50,580 So let's close that up. 44 00:03:50,590 --> 00:03:51,720 Let's go to our app Jay. 45 00:03:51,740 --> 00:03:53,020 Yes. 46 00:03:53,340 --> 00:04:01,420 And now let's initialize the the weather class so we'll say and knit 47 00:04:03,940 --> 00:04:14,520 or knit weather object and we'll do that icing Konst weather equals new weather. 48 00:04:14,650 --> 00:04:16,940 Now remember this takes in a city in St.. 49 00:04:16,960 --> 00:04:19,650 Now this is ultimately going to come from local storage. 50 00:04:19,660 --> 00:04:26,470 But for now I'm going to hard code it to Boston Mass. 51 00:04:26,470 --> 00:04:26,730 All right. 52 00:04:26,740 --> 00:04:32,630 Just for now and then let's see if we should be able to call get weather. 53 00:04:32,800 --> 00:04:34,450 So just to test it out. 54 00:04:36,080 --> 00:04:38,370 See I want to do here. 55 00:04:38,770 --> 00:04:39,130 Let's 56 00:04:43,120 --> 00:04:50,090 turn to think of yeah let's do weather Daut get weather 57 00:04:55,720 --> 00:04:57,430 now that's going to return or. 58 00:04:57,790 --> 00:05:07,940 I'm sorry a promise because when I close it up it's going to return a promise because get weather is 59 00:05:07,940 --> 00:05:13,720 a synchronous OK and just by adding async means that this is going to return a promise. 60 00:05:13,730 --> 00:05:22,340 So we need to treat it like a promise and use dot then and then catch like that. 61 00:05:22,340 --> 00:05:24,500 So for Catch would just say error 62 00:05:32,300 --> 00:05:38,580 all right and then the dog then we'll get our results. 63 00:05:41,500 --> 00:05:47,830 And then let's just console log the results. 64 00:05:48,360 --> 00:05:49,490 I will save that. 65 00:05:49,510 --> 00:05:51,700 Let's go to our application here. 66 00:05:52,030 --> 00:05:58,660 Let's open up our console go to our console and see whether is not defined. 67 00:06:00,630 --> 00:06:07,570 This should be an upper case w and there we go so if we look at this object we're getting all of the 68 00:06:07,570 --> 00:06:10,780 weather information for Boston Massachusetts. 69 00:06:10,780 --> 00:06:12,180 It's as easy as that. 70 00:06:12,310 --> 00:06:18,730 And you could pass in any city and state here and now if we wanted to change it we could actually just 71 00:06:18,730 --> 00:06:19,480 call. 72 00:06:19,480 --> 00:06:22,670 We could go before we do get weather and we could say whether Daut 73 00:06:25,940 --> 00:06:31,950 I think it was change location and then we can say Miami 74 00:06:34,410 --> 00:06:40,250 fell and save and now go down here and you'll see that we're now getting it from Miami Florida. 75 00:06:40,440 --> 00:06:43,330 So it's as easy as that to change the location. 76 00:06:43,620 --> 00:06:46,070 But I'm going to comment that for now. 77 00:06:46,170 --> 00:06:50,250 And then this get weather I'm going to wrap this in its own function 78 00:06:52,970 --> 00:06:54,110 called Get weather 79 00:06:59,710 --> 00:07:07,190 ok just like that and I want this to be called when the dawn loads so what I'm going to do is create 80 00:07:07,190 --> 00:07:09,810 an event listener up here. 81 00:07:10,190 --> 00:07:11,420 So let's do 82 00:07:14,790 --> 00:07:17,940 get weather on download. 83 00:07:18,330 --> 00:07:21,480 So will say document dot an event listener 84 00:07:25,780 --> 00:07:35,000 is going to be dorm content loaded and we're going to call get weather. 85 00:07:35,140 --> 00:07:38,150 Now if I save it should do the same thing. 86 00:07:38,160 --> 00:07:39,170 All right. 87 00:07:40,140 --> 00:07:46,240 So what we want to do next is instead of just logging the results right here like we're doing. 88 00:07:46,410 --> 00:07:53,040 We want to actually call a method that will paint the screen that will paint the UI we're actually going 89 00:07:53,040 --> 00:07:53,950 to call it pain. 90 00:07:54,000 --> 00:07:59,730 So we'll say you dot paint and we'll pass in the results and then we'll get all those results inside 91 00:07:59,730 --> 00:08:01,160 of our application. 92 00:08:01,170 --> 00:08:02,590 So that's what we'll do next.