1 00:00:00,790 --> 00:00:07,020 All right guys in the last video we created our weather class which fetches data from the Weather Underground 2 00:00:07,050 --> 00:00:07,980 API. 3 00:00:08,160 --> 00:00:14,070 Now we want to take that information and not just console log and put it into our UI. 4 00:00:14,100 --> 00:00:19,020 So what we're going to do is right here when we call get weather and we get the results back from the 5 00:00:19,020 --> 00:00:26,760 asynchronous method inside the class instead of just logging the results we're going to call a method 6 00:00:26,760 --> 00:00:30,040 inside the UI class called paint. 7 00:00:30,060 --> 00:00:36,200 OK so the idea is it's painting the UI with these results that we're going to pass in. 8 00:00:36,440 --> 00:00:36,830 OK. 9 00:00:36,840 --> 00:00:40,670 Now we don't have the UI class created yet so that's not going to work. 10 00:00:40,680 --> 00:00:42,180 But we're going to do that now. 11 00:00:42,330 --> 00:00:54,150 So let's go to UIGEA us and let's create a class called UI and we're going to create a constructor. 12 00:00:54,150 --> 00:00:58,920 This constructor is going to have a lot of stuff in it because we have a lot of different elements to 13 00:00:58,920 --> 00:01:00,390 insert stuff in. 14 00:01:00,420 --> 00:01:02,160 We're not doing what we've done. 15 00:01:02,190 --> 00:01:07,870 A lot of the times which is just take a whole clump of each team now an entire template. 16 00:01:08,010 --> 00:01:16,020 So basically all of this and then insert it into one placeholder Instead we have different basically 17 00:01:16,140 --> 00:01:20,860 different little components that we're going to insert stuff into. 18 00:01:21,180 --> 00:01:26,170 Ok so I mean it's up to you how you want to do it I'm just trying to give you different options. 19 00:01:26,310 --> 00:01:34,680 So we'll have for instance the location and we'll set that to document daunts will use get element by 20 00:01:34,680 --> 00:01:35,380 D. 21 00:01:35,730 --> 00:01:39,190 And that has an idea of W location. 22 00:01:39,270 --> 00:01:46,150 So we're going to need quite a few of these are going to just go ahead and make a bunch of these. 23 00:01:46,380 --> 00:01:51,950 So we have a location we have the description which is DSC 24 00:01:54,230 --> 00:01:59,690 changed that this will be the string This is the temperature string 25 00:02:05,290 --> 00:02:07,240 and think about what way you like better. 26 00:02:07,240 --> 00:02:15,130 Do you like inserting everything from the javascript to do you like to do put little pieces into elements 27 00:02:15,130 --> 00:02:17,650 that are already defined in each team now. 28 00:02:17,800 --> 00:02:22,140 It's completely up to you on how you want to do that. 29 00:02:23,410 --> 00:02:29,200 Or of course you could use a template engine which is beyond the scope of this course. 30 00:02:29,660 --> 00:02:32,760 Say icon we have w icon 31 00:02:35,220 --> 00:02:44,130 and humidity. 32 00:02:44,780 --> 00:02:46,680 See also feels like 33 00:02:55,780 --> 00:02:56,990 and dewpoint 34 00:03:05,100 --> 00:03:07,250 and heat index. 35 00:03:07,340 --> 00:03:13,710 Actually I don't think we did the heat index like I was going to do that but it turned out to be anyway. 36 00:03:14,540 --> 00:03:16,100 So let's not do that. 37 00:03:16,100 --> 00:03:18,580 Let's do I think we just have wind 38 00:03:22,510 --> 00:03:26,560 that should be it so we can get rid of these. 39 00:03:26,800 --> 00:03:29,010 Now that's the constructor. 40 00:03:29,110 --> 00:03:36,220 The only other method we're going to have is the paint method which will paint the UI with the results. 41 00:03:36,370 --> 00:03:39,340 So the results I'm going to call it weather. 42 00:03:40,090 --> 00:03:52,660 And then for instance we'll say this location Daut text content equals weather Daut display underscore 43 00:03:52,900 --> 00:03:55,850 location Daut fall. 44 00:03:56,020 --> 00:03:57,970 Now where I'm getting this from 45 00:04:00,500 --> 00:04:03,890 is let's see if we go and we look at this response here. 46 00:04:04,070 --> 00:04:09,320 You can see that we have inside the current observation object which is what we're returning. 47 00:04:09,320 --> 00:04:12,780 We have display location which is another object. 48 00:04:12,800 --> 00:04:16,220 And we're getting the fall which is going to give us the city and state. 49 00:04:16,220 --> 00:04:22,760 Now you can get just the city the state either long or short name the country the zip code you can get 50 00:04:22,760 --> 00:04:23,830 all that stuff. 51 00:04:23,870 --> 00:04:27,940 We're just going to get the city and state and put it into the location element. 52 00:04:28,350 --> 00:04:28,850 OK. 53 00:04:28,850 --> 00:04:33,670 And then let's do this dot the sea. 54 00:04:35,370 --> 00:04:44,300 And we want the text content and that's going to be whether Daut weather and if we look at the response 55 00:04:44,300 --> 00:04:52,980 here you can see for weather and see down here. 56 00:04:53,070 --> 00:04:59,930 So where is it right here weather so would be like partly cloudy or sunny or something like that. 57 00:05:00,400 --> 00:05:09,270 And then we have the string the temperature string so this stot string Daut Daltex content equals weather 58 00:05:09,270 --> 00:05:15,220 Daut temperature string. 59 00:05:15,420 --> 00:05:23,340 Then we want the Eikon now the Eikon we're setting in the source of the image element to this. 60 00:05:23,400 --> 00:05:29,240 So we're going to say this dog icon doth set attribute. 61 00:05:29,940 --> 00:05:30,390 OK. 62 00:05:30,400 --> 00:05:40,770 And the attribute that we want to set is the source and we're going to set it to weather Daut icon underscore 63 00:05:40,770 --> 00:05:48,840 you r l which as you can see is somewhere around here. 64 00:05:54,000 --> 00:05:55,950 Where you hear icon you are L.. 65 00:05:56,000 --> 00:06:01,760 So it's going to be a gift for a jiff and we're going to set that to the source of the image. 66 00:06:02,100 --> 00:06:12,850 OK so the rest of the stuff here we have humidity so humidity text content equals. 67 00:06:12,860 --> 00:06:19,850 I'm going to put this as a template string and I'm going to say relative humidity so the rest of these 68 00:06:19,850 --> 00:06:28,580 will have like these labels in them and put the dynamic content which will be whether Daut relative 69 00:06:28,580 --> 00:06:34,520 humidity. 70 00:06:37,580 --> 00:06:41,310 So it's let's see after that we have fields like 71 00:06:52,690 --> 00:06:57,650 this is actually fields like underscore string. 72 00:06:58,410 --> 00:07:06,070 And if you want to change this around I mean this stuff that I'm not including like for instance pressure 73 00:07:06,790 --> 00:07:14,410 wind chill visibility if you want to add this stuff you can easily do that by just using these these 74 00:07:14,410 --> 00:07:18,260 values so see we did. 75 00:07:18,420 --> 00:07:20,590 Like string. 76 00:07:20,610 --> 00:07:27,270 Now we want to do point. 77 00:07:27,340 --> 00:07:34,000 So for that it's going to be dewpoint underscore string. 78 00:07:35,230 --> 00:07:44,100 And then we want the wind going to change this to do a and then wind 79 00:07:51,000 --> 00:08:02,000 currents will be set to when the string OK so that should do let's save that and now we get UI is not 80 00:08:02,000 --> 00:08:08,490 defined because if we go back to Apogee Yes it doesn't know what UI is we have to initialize that. 81 00:08:08,870 --> 00:08:21,350 So let's say you I would say Konst UI equals new UI and save and now there we go. 82 00:08:21,380 --> 00:08:27,630 So we've painted our UI with the results pretty cool. 83 00:08:28,340 --> 00:08:32,120 So in the next video we're going to start to work on the change location. 84 00:08:32,120 --> 00:08:38,510 We need an event for when we submit this we want this to go to local storage and we want to get saved 85 00:08:38,840 --> 00:08:44,600 and then we also want this to load whatever's in local storage when you visit the application. 86 00:08:44,600 --> 00:08:44,870 All right. 87 00:08:44,870 --> 00:08:46,530 So I will see you in the next video.