1 00:00:00,590 --> 00:00:06,350 OK, so now we're going to make our icons dynamic, like the type of the weather. 2 00:00:06,990 --> 00:00:10,220 So right now, they are not dynamic, if I show you. 3 00:00:10,490 --> 00:00:14,630 This is just this one I under the Sun, which we have used in the UI. 4 00:00:15,200 --> 00:00:16,580 So it's a static icon. 5 00:00:16,820 --> 00:00:19,010 It's not dynamic, so it is not changing. 6 00:00:19,010 --> 00:00:23,000 According to this being, it's showing rain, but they can is not rain. 7 00:00:23,000 --> 00:00:28,700 OK, so that icon, it's not changing so that we need to change. 8 00:00:29,330 --> 00:00:34,910 So you need to just visit that website, which I told you on that website. 9 00:00:35,300 --> 00:00:36,550 There are a lot of. 10 00:00:37,700 --> 00:00:43,400 I can you can just go and read the icons for. 11 00:00:45,100 --> 00:00:49,690 That is so absurd, is this at a closed door deal? 12 00:00:51,360 --> 00:00:55,350 So you have to just come here and accordingly, you can just use it. 13 00:00:55,800 --> 00:01:01,290 So I've already created this project when I was designing it, so I know which one is to use or I'll 14 00:01:01,290 --> 00:01:02,700 just demonstrated that to you. 15 00:01:03,300 --> 00:01:04,800 So let's just go to the core. 16 00:01:04,990 --> 00:01:09,860 OK, now remember, I created this wearable inside, used it. 17 00:01:09,870 --> 00:01:11,970 So which is the weather state? 18 00:01:11,980 --> 00:01:18,290 So this is responsible for the changing of the weather, for this to do just the name of that, that 19 00:01:18,630 --> 00:01:22,770 type of weather that is the rain cloud has missed something like that. 20 00:01:24,120 --> 00:01:25,440 Alright, so how will? 21 00:01:27,420 --> 00:01:30,060 We will define will right to use effect. 22 00:01:30,720 --> 00:01:33,460 Now you will ask what gives you the facts? 23 00:01:33,460 --> 00:01:39,330 So asked this question to yourself because I've already explained it readily to this committee. 24 00:01:39,690 --> 00:01:41,670 So this is what we are doing. 25 00:01:41,670 --> 00:01:48,880 So use effect will be responsible for the change of the functionality according to the type of debate 26 00:01:48,900 --> 00:01:52,730 that so use effect as you know, expect some functions. 27 00:01:54,010 --> 00:02:00,780 So that's a fair on function we will be providing and it also have our dependency edit. 28 00:02:01,320 --> 00:02:09,870 No, I told you and I was explaining use a fact that this dependency a variable in this dependency that 29 00:02:09,870 --> 00:02:16,410 is responsible for the number of times the function inside to use effect which will be executing. 30 00:02:16,830 --> 00:02:21,600 So if it's empty only once the function inside the effect will be executed. 31 00:02:21,930 --> 00:02:23,100 There it is on the renewables. 32 00:02:24,180 --> 00:02:31,660 Next, if we provide available here and the way the world changes, so when the variable changes that 33 00:02:31,660 --> 00:02:36,180 time, the function will execute, the number of times the variable changes, the number of times the 34 00:02:36,180 --> 00:02:37,080 function executes. 35 00:02:37,560 --> 00:02:38,460 As simple as that. 36 00:02:38,700 --> 00:02:46,980 So here will provide a variable that is the one that stood out whenever the weather stayed or the type 37 00:02:46,980 --> 00:02:48,030 of weather changes. 38 00:02:49,670 --> 00:02:54,890 Then the function here will execute and know what is the function that we want to discuss here. 39 00:02:55,490 --> 00:03:05,120 All right now, we are going to use switch cases, switch statements and we will be switching across. 40 00:03:05,120 --> 00:03:07,370 The icons are provided. 41 00:03:07,700 --> 00:03:11,150 So first of all, we'll see that if the weather. 42 00:03:12,400 --> 00:03:19,000 But the detail is provided on not a weather type, is not the weather type. 43 00:03:25,110 --> 00:03:31,420 When type, if this is provided, if this data returns, then only we are going to do this. 44 00:03:31,440 --> 00:03:31,830 All right. 45 00:03:32,070 --> 00:03:36,840 So if weather type is not null, then we'll use a switch. 46 00:03:37,880 --> 00:03:49,460 Now, so it is it is very interesting the hair will switch among the weather type, the type and next 47 00:03:49,460 --> 00:03:52,010 will provide this godly basis. 48 00:03:52,250 --> 00:04:03,470 All right now, suitcase switch statement consist of cases and break, so like that as a case of gloves. 49 00:04:04,610 --> 00:04:09,350 So this is what we're going to get from the FBI cloud the cloud clouds. 50 00:04:10,220 --> 00:04:13,970 So then we will set the weather status. 51 00:04:15,200 --> 00:04:18,470 For the state, so something like this. 52 00:04:20,200 --> 00:04:28,930 This thing I am getting from the website of the icons, so you can just go and check out, that's why 53 00:04:28,930 --> 00:04:33,220 I'm using this, you will figure it out because this is the name of the icon is simply the name of the 54 00:04:33,220 --> 00:04:33,550 icon. 55 00:04:33,550 --> 00:04:35,740 It is the class which is powers and Typekit. 56 00:04:35,740 --> 00:04:37,630 I hate for him to together. 57 00:04:37,870 --> 00:04:42,200 Now, if we get this, we need to break break. 58 00:04:42,880 --> 00:04:44,080 That's just full now. 59 00:04:44,650 --> 00:04:46,540 Again, a different case. 60 00:04:47,880 --> 00:04:48,900 All right, guys. 61 00:04:50,550 --> 00:04:51,240 Why it's. 62 00:04:54,420 --> 00:04:56,960 The current case to that case is his. 63 00:04:57,900 --> 00:05:04,830 So the he's known for his side with the status to. 64 00:05:06,950 --> 00:05:10,730 Fog, you just copy this line here and. 65 00:05:14,540 --> 00:05:16,520 It be secure, and that will be. 66 00:05:19,160 --> 00:05:26,560 Well, he is it's fog, mist, fog, not before, it's not called by Typekit. 67 00:05:28,180 --> 00:05:33,120 Next after that, also, we'll have a break between worse. 68 00:05:34,270 --> 00:05:36,490 Next, we have another case. 69 00:05:38,570 --> 00:05:39,440 And that is. 70 00:05:41,180 --> 00:05:41,590 Clear. 71 00:05:43,080 --> 00:05:49,650 I like this weather a lot earlier, weather is the most beautiful and pleasant weather, and for that 72 00:05:49,650 --> 00:05:52,850 we'll be using sunny day. 73 00:05:53,820 --> 00:05:54,270 Sunny. 74 00:05:58,770 --> 00:05:59,190 OK. 75 00:05:59,970 --> 00:06:03,600 The next case is missed. 76 00:06:06,760 --> 00:06:08,470 For that, we'll right. 77 00:06:09,540 --> 00:06:12,900 I don't know, I just came up with this, I can you can use a different one. 78 00:06:12,970 --> 00:06:14,010 Also, I just took. 79 00:06:15,350 --> 00:06:24,410 Part that is dust on looks similar to the mist, Mr just a little fog foggy type of can now, then the 80 00:06:24,410 --> 00:06:25,640 next case is. 81 00:06:27,620 --> 00:06:31,160 I think we're done with the cases, but there's no need for it. 82 00:06:31,580 --> 00:06:34,410 But we will not use that rain, OK for rain. 83 00:06:34,430 --> 00:06:36,710 I will have to fight for the rain, I confessed. 84 00:06:37,370 --> 00:06:41,390 Let me just go to the website and search for rain. 85 00:06:43,260 --> 00:06:46,200 Okay, reason for being there are so many. 86 00:06:47,740 --> 00:06:53,400 I'm looking for rain without the sun, but I don't see any. 87 00:06:55,340 --> 00:06:59,140 Without the Sun, by admitting, OK, I can do this, I did rain. 88 00:06:59,330 --> 00:07:01,820 All right, so if it's rain? 89 00:07:03,790 --> 00:07:07,150 If it's three and then we lose Wired magazine. 90 00:07:11,910 --> 00:07:15,690 Then and then we'll we are done with this. 91 00:07:17,140 --> 00:07:18,830 And now before. 92 00:07:19,870 --> 00:07:27,050 Now, because any apart from this, any of the situations we tackle or will have will have a default 93 00:07:27,070 --> 00:07:32,560 or or default, so then the state took. 94 00:07:35,530 --> 00:07:43,230 Why he suddenly this will be our default icon, and after that, you can just put a. 95 00:07:45,190 --> 00:07:45,560 All right. 96 00:07:46,000 --> 00:07:49,870 So this is it for this news effect now, we want to render it. 97 00:07:50,710 --> 00:07:54,200 But as of now, we are not rendering it anywhere. 98 00:07:54,220 --> 00:07:55,600 So how do we do that? 99 00:07:56,270 --> 00:07:59,710 So instead of this, so will you. 100 00:08:00,900 --> 00:08:07,000 The template literals for what will do is will not provide a spring. 101 00:08:07,070 --> 00:08:11,010 Instead, we use JavaScript and how do we use template literals? 102 00:08:11,760 --> 00:08:15,690 So this will be there and next. 103 00:08:15,880 --> 00:08:20,250 This so this will be what is. 104 00:08:22,930 --> 00:08:28,630 Variable name that is Featherston, but that could it be that better stick? 105 00:08:29,690 --> 00:08:30,260 Fair enough. 106 00:08:30,530 --> 00:08:33,160 OK, now let us just see it. 107 00:08:33,800 --> 00:08:35,420 Let me just take it for sir, what is running? 108 00:08:35,420 --> 00:08:36,110 No, it's not. 109 00:08:38,320 --> 00:08:39,280 It on the side of war. 110 00:08:40,930 --> 00:08:48,970 And we feel this Oh, let me just do a quick check if everything is good, OK, we have done this great 111 00:08:48,970 --> 00:08:50,530 with type, everything has done. 112 00:08:52,340 --> 00:08:54,560 And we just see. 113 00:08:57,170 --> 00:08:58,190 Everything looks fine. 114 00:08:58,670 --> 00:09:05,960 Everything looks fine so far, so what is the starting this started and it's short. 115 00:09:06,500 --> 00:09:10,550 OK, OK, OK, OK, OK, I'm really sorry. 116 00:09:10,550 --> 00:09:11,480 I think you was. 117 00:09:11,480 --> 00:09:12,020 You were not. 118 00:09:12,410 --> 00:09:13,820 You were not able to see the screen. 119 00:09:14,420 --> 00:09:15,790 So I. 120 00:09:15,900 --> 00:09:21,200 What changes I made here is that I'll repeat it once again because you were able to see the browser. 121 00:09:21,290 --> 00:09:22,070 That was my bad. 122 00:09:22,430 --> 00:09:24,710 So what I did is here it was. 123 00:09:24,710 --> 00:09:28,220 Let me just can we just undo everything and show it back to you? 124 00:09:29,840 --> 00:09:34,940 So this was this static before the static spring, which you provided for the icon. 125 00:09:35,300 --> 00:09:37,250 And this is the class name which was static. 126 00:09:37,370 --> 00:09:38,780 This was done by default. 127 00:09:39,020 --> 00:09:45,860 But what we did is we provided JavaScript here and I will provide JavaScript and the icon class name 128 00:09:45,860 --> 00:09:48,350 would change, according to the title of the weather. 129 00:09:48,770 --> 00:09:51,410 So that will do like this. 130 00:09:51,680 --> 00:09:52,360 Like this? 131 00:09:52,370 --> 00:09:54,620 I just did this part, OK? 132 00:09:55,010 --> 00:09:57,020 This part was done, which you missed. 133 00:09:57,260 --> 00:09:58,840 So this was the part and nothing else. 134 00:09:58,850 --> 00:09:59,650 Don't worry this. 135 00:09:59,770 --> 00:10:01,160 This is just one line note. 136 00:10:01,640 --> 00:10:04,250 And just just to save already, see? 137 00:10:04,610 --> 00:10:07,820 So our browser is running and it shows you the effect is not defined. 138 00:10:07,820 --> 00:10:08,730 So we use effect. 139 00:10:08,730 --> 00:10:10,820 There's no defined letters to find the use effect. 140 00:10:10,860 --> 00:10:11,140 OK. 141 00:10:13,210 --> 00:10:14,170 Let me say it again. 142 00:10:16,120 --> 00:10:17,410 So I hope there's no Iraq. 143 00:10:17,450 --> 00:10:19,350 Okay, let me go to the browser, no. 144 00:10:21,100 --> 00:10:24,480 OK, let me refresh not needed, but still. 145 00:10:25,590 --> 00:10:27,390 OK, Icon is not visible. 146 00:10:27,780 --> 00:10:31,080 Maybe we can go to Ali and we can search. 147 00:10:33,560 --> 00:10:36,110 Something change maybe two or. 148 00:10:38,040 --> 00:10:38,200 OK. 149 00:10:38,310 --> 00:10:41,520 Things are changing, but we are not able to see the icon. 150 00:10:42,090 --> 00:10:44,370 So what's the matter with the icon? 151 00:10:44,570 --> 00:10:47,070 Can disclosed this terminal here and that's. 152 00:10:48,310 --> 00:10:51,890 Something's wrong with the icon, so maybe we have done something wrong here. 153 00:10:51,920 --> 00:10:55,440 I blew a fender steed. 154 00:10:55,840 --> 00:10:58,060 I think with a steering is fine. 155 00:11:00,350 --> 00:11:08,720 OK, so what we did here is we parsed this variable, which is weather stick, but unfortunately we 156 00:11:08,720 --> 00:11:15,710 forgot that weather state is the variable which we are going to like change after setting all of this. 157 00:11:15,720 --> 00:11:19,160 So this will all be changing instead, which like before we change it. 158 00:11:19,160 --> 00:11:28,040 So the thing which will change is the is the weather like weather type, weather type will be changing, 159 00:11:28,040 --> 00:11:29,840 so here will provide weather type. 160 00:11:34,590 --> 00:11:40,160 Force in the see would then go to the browser, I'm not sure if it works, yeah, it works. 161 00:11:42,120 --> 00:11:44,800 So it's raining in Mumbai, so we see the icon of rain. 162 00:11:44,820 --> 00:11:48,000 Now let me go to maybe Bangalore. 163 00:11:48,390 --> 00:11:52,490 Let me search clouds and Delhi clouds in Bangalore. 164 00:11:52,500 --> 00:11:53,760 We see clouds. 165 00:11:54,240 --> 00:11:55,910 We go to air. 166 00:11:57,240 --> 00:12:03,570 OK, Erin and Tony, we go to War City, we go to Mumbai. 167 00:12:05,910 --> 00:12:10,710 The thing I want something funny man to be able to ignore. 168 00:12:11,790 --> 00:12:16,170 In the clouds, maybe we go too far. 169 00:12:18,150 --> 00:12:22,920 I want to see sunny read, sunny weather should be something, maybe Chip, what it can be something, 170 00:12:25,140 --> 00:12:27,850 but I forgot that, OK, it's his. 171 00:12:28,110 --> 00:12:31,140 So basically the idea of the whole thing is that the icons are changing, right? 172 00:12:31,470 --> 00:12:33,420 So that is what we wanted to do, actually. 173 00:12:34,320 --> 00:12:39,330 So now one thing I notice that this is not looking exactly right, the search component. 174 00:12:39,960 --> 00:12:40,840 Let me fix it. 175 00:12:42,180 --> 00:12:45,150 And so its component, I think there are some issues here. 176 00:12:45,930 --> 00:12:50,700 So maybe this search graph, this should be inside. 177 00:12:51,970 --> 00:13:01,150 This button should be inside that maybe you'll think, OK, OK, OK, now it looks beautiful, it looks 178 00:13:01,150 --> 00:13:03,020 beautiful now. 179 00:13:03,190 --> 00:13:06,280 I think we are done with almost everything. 180 00:13:06,430 --> 00:13:07,690 We got the icon. 181 00:13:07,690 --> 00:13:10,200 We got the temperature in Mumbai, India. 182 00:13:10,210 --> 00:13:15,370 This is the date and time are local in time, not the date and time of the city, the member, because 183 00:13:15,370 --> 00:13:20,130 we are grabbing it from our own system using JavaScript, not from the EPA. 184 00:13:20,140 --> 00:13:21,610 So this is not the part of the API. 185 00:13:22,000 --> 00:13:25,450 Next, we have the sunset sunset both fact humidity perfect. 186 00:13:25,450 --> 00:13:26,560 But actually it is perfect. 187 00:13:26,560 --> 00:13:33,130 And then the speed is also off the wind speed search component working perfectly fine. 188 00:13:33,130 --> 00:13:39,610 Let me go to like another maybe Los Angeles. 189 00:13:41,790 --> 00:13:42,160 OK. 190 00:13:42,180 --> 00:13:52,230 Los Angeles has this maybe you can go to Las Vegas, maybe let's see the weather in Vegas speak, it's 191 00:13:52,230 --> 00:13:57,690 smoke and we have not defined the smoke, so that's why issuing the default icon, which is the sunny. 192 00:13:58,050 --> 00:13:58,920 No problem with that. 193 00:13:59,580 --> 00:14:08,060 So as you can see that we can check the weather of any city in the world, just you look so beautiful. 194 00:14:08,070 --> 00:14:10,440 The data fighting is very fast. 195 00:14:10,950 --> 00:14:13,020 There's no delay in getting the data. 196 00:14:13,500 --> 00:14:21,180 So all of that we have discussed in this project, and I hope you've learned a lot about API's use of 197 00:14:21,180 --> 00:14:22,530 fact promises. 198 00:14:22,530 --> 00:14:28,560 Async await Ryan Cage and the Switch statement and so on. 199 00:14:28,770 --> 00:14:33,390 So I hope you learn a lot and I tried my best during the concert. 200 00:14:33,810 --> 00:14:37,080 So that's it for this project, and I hope this is clear. 201 00:14:37,620 --> 00:14:40,350 And thank you so much for giving your valuable time. 202 00:14:40,530 --> 00:14:41,130 Thanks a lot.