OK, so now we're going to make our icons dynamic, like the type of the weather.
So right now, they are not dynamic, if I show you.
This is just this one I under the Sun, which we have used in the UI.
So it's a static icon.
It's not dynamic, so it is not changing.
According to this being, it's showing rain, but they can is not rain.
OK, so that icon, it's not changing so that we need to change.
So you need to just visit that website, which I told you on that website.
There are a lot of.
I can you can just go and read the icons for.
That is so absurd, is this at a closed door deal?
So you have to just come here and accordingly, you can just use it.
So I've already created this project when I was designing it, so I know which one is to use or I'll
just demonstrated that to you.
So let's just go to the core.
OK, now remember, I created this wearable inside, used it.
So which is the weather state?
So this is responsible for the changing of the weather, for this to do just the name of that, that
type of weather that is the rain cloud has missed something like that.
Alright, so how will?
We will define will right to use effect.
Now you will ask what gives you the facts?
So asked this question to yourself because I've already explained it readily to this committee.
So this is what we are doing.
So use effect will be responsible for the change of the functionality according to the type of debate
that so use effect as you know, expect some functions.
So that's a fair on function we will be providing and it also have our dependency edit.
No, I told you and I was explaining use a fact that this dependency a variable in this dependency that
is responsible for the number of times the function inside to use effect which will be executing.
So if it's empty only once the function inside the effect will be executed.
There it is on the renewables.
Next, if we provide available here and the way the world changes, so when the variable changes that
time, the function will execute, the number of times the variable changes, the number of times the
function executes.
As simple as that.
So here will provide a variable that is the one that stood out whenever the weather stayed or the type
of weather changes.
Then the function here will execute and know what is the function that we want to discuss here.
All right now, we are going to use switch cases, switch statements and we will be switching across.
The icons are provided.
So first of all, we'll see that if the weather.
But the detail is provided on not a weather type, is not the weather type.
When type, if this is provided, if this data returns, then only we are going to do this.
All right.
So if weather type is not null, then we'll use a switch.
Now, so it is it is very interesting the hair will switch among the weather type, the type and next
will provide this godly basis.
All right now, suitcase switch statement consist of cases and break, so like that as a case of gloves.
So this is what we're going to get from the FBI cloud the cloud clouds.
So then we will set the weather status.
For the state, so something like this.
This thing I am getting from the website of the icons, so you can just go and check out, that's why
I'm using this, you will figure it out because this is the name of the icon is simply the name of the
icon.
It is the class which is powers and Typekit.
I hate for him to together.
Now, if we get this, we need to break break.
That's just full now.
Again, a different case.
All right, guys.
Why it's.
The current case to that case is his.
So the he's known for his side with the status to.
Fog, you just copy this line here and.
It be secure, and that will be.
Well, he is it's fog, mist, fog, not before, it's not called by Typekit.
Next after that, also, we'll have a break between worse.
Next, we have another case.
And that is.
Clear.
I like this weather a lot earlier, weather is the most beautiful and pleasant weather, and for that
we'll be using sunny day.
Sunny.
OK.
The next case is missed.
For that, we'll right.
I don't know, I just came up with this, I can you can use a different one.
Also, I just took.
Part that is dust on looks similar to the mist, Mr just a little fog foggy type of can now, then the
next case is.
I think we're done with the cases, but there's no need for it.
But we will not use that rain, OK for rain.
I will have to fight for the rain, I confessed.
Let me just go to the website and search for rain.
Okay, reason for being there are so many.
I'm looking for rain without the sun, but I don't see any.
Without the Sun, by admitting, OK, I can do this, I did rain.
All right, so if it's rain?
If it's three and then we lose Wired magazine.
Then and then we'll we are done with this.
And now before.
Now, because any apart from this, any of the situations we tackle or will have will have a default
or or default, so then the state took.
Why he suddenly this will be our default icon, and after that, you can just put a.
All right.
So this is it for this news effect now, we want to render it.
But as of now, we are not rendering it anywhere.
So how do we do that?
So instead of this, so will you.
The template literals for what will do is will not provide a spring.
Instead, we use JavaScript and how do we use template literals?
So this will be there and next.
This so this will be what is.
Variable name that is Featherston, but that could it be that better stick?
Fair enough.
OK, now let us just see it.
Let me just take it for sir, what is running?
No, it's not.
It on the side of war.
And we feel this Oh, let me just do a quick check if everything is good, OK, we have done this great
with type, everything has done.
And we just see.
Everything looks fine.
Everything looks fine so far, so what is the starting this started and it's short.
OK, OK, OK, OK, OK, I'm really sorry.
I think you was.
You were not.
You were not able to see the screen.
So I.
What changes I made here is that I'll repeat it once again because you were able to see the browser.
That was my bad.
So what I did is here it was.
Let me just can we just undo everything and show it back to you?
So this was this static before the static spring, which you provided for the icon.
And this is the class name which was static.
This was done by default.
But what we did is we provided JavaScript here and I will provide JavaScript and the icon class name
would change, according to the title of the weather.
So that will do like this.
Like this?
I just did this part, OK?
This part was done, which you missed.
So this was the part and nothing else.
Don't worry this.
This is just one line note.
And just just to save already, see?
So our browser is running and it shows you the effect is not defined.
So we use effect.
There's no defined letters to find the use effect.
OK.
Let me say it again.
So I hope there's no Iraq.
Okay, let me go to the browser, no.
OK, let me refresh not needed, but still.
OK, Icon is not visible.
Maybe we can go to Ali and we can search.
Something change maybe two or.
OK.
Things are changing, but we are not able to see the icon.
So what's the matter with the icon?
Can disclosed this terminal here and that's.
Something's wrong with the icon, so maybe we have done something wrong here.
I blew a fender steed.
I think with a steering is fine.
OK, so what we did here is we parsed this variable, which is weather stick, but unfortunately we
forgot that weather state is the variable which we are going to like change after setting all of this.
So this will all be changing instead, which like before we change it.
So the thing which will change is the is the weather like weather type, weather type will be changing,
so here will provide weather type.
Force in the see would then go to the browser, I'm not sure if it works, yeah, it works.
So it's raining in Mumbai, so we see the icon of rain.
Now let me go to maybe Bangalore.
Let me search clouds and Delhi clouds in Bangalore.
We see clouds.
We go to air.
OK, Erin and Tony, we go to War City, we go to Mumbai.
The thing I want something funny man to be able to ignore.
In the clouds, maybe we go too far.
I want to see sunny read, sunny weather should be something, maybe Chip, what it can be something,
but I forgot that, OK, it's his.
So basically the idea of the whole thing is that the icons are changing, right?
So that is what we wanted to do, actually.
So now one thing I notice that this is not looking exactly right, the search component.
Let me fix it.
And so its component, I think there are some issues here.
So maybe this search graph, this should be inside.
This button should be inside that maybe you'll think, OK, OK, OK, now it looks beautiful, it looks
beautiful now.
I think we are done with almost everything.
We got the icon.
We got the temperature in Mumbai, India.
This is the date and time are local in time, not the date and time of the city, the member, because
we are grabbing it from our own system using JavaScript, not from the EPA.
So this is not the part of the API.
Next, we have the sunset sunset both fact humidity perfect.
But actually it is perfect.
And then the speed is also off the wind speed search component working perfectly fine.
Let me go to like another maybe Los Angeles.
OK.
Los Angeles has this maybe you can go to Las Vegas, maybe let's see the weather in Vegas speak, it's
smoke and we have not defined the smoke, so that's why issuing the default icon, which is the sunny.
No problem with that.
So as you can see that we can check the weather of any city in the world, just you look so beautiful.
The data fighting is very fast.
There's no delay in getting the data.
So all of that we have discussed in this project, and I hope you've learned a lot about API's use of
fact promises.
Async await Ryan Cage and the Switch statement and so on.
So I hope you learn a lot and I tried my best during the concert.
So that's it for this project, and I hope this is clear.
And thank you so much for giving your valuable time.
Thanks a lot.