OK, so now that we have captured the soldier keyword or the search value, we can add the functionality
to like search the term.
And what we added.
So before that, let's just go ahead and create a UI for the site like below the search component.
There will be a component which will be containing all information about the way that it will be containing
the icons and temperature and everything.
So let's create that first.
So for that, I will create another component in the components folder.
So I will name it like the.
Further details or just details will call it.
That he deals on.
Yes.
OK, now we lose our trick is out of sea.
OK, weather details to us.
So.
And one more thing I really like to tell you that had that is that they will get inside the written
statement there should be active and inside that you need to write all your GSX so you can also put
like you can remove the T word from it and you can just leave it like this also.
So it will also look like all this can also work.
OK.
The scholars inducted syntactic sugar from of the company.
And now let's go ahead and create this components inside this, I can create a.
Active for what I considered an article probably depends on me, but I have created article when I was
designing this.
So inside the article, let me provide the class name.
And the class name for this article will be Richard.
And inside this, there will be a Dave and.
Its last name would be whether I can, because we are going to provide the icon first at the top, there
will be an icon.
So that's what we're going to create like.
But the.
All right.
So now we will like to import the icon.
So for that, we need to go to the website.
We are using the icons from this website, is it closed or get no deal?
So we are using the Sudan from this website and these are likened to this is the index.
How you should like the the icon or you can like, include it in your project?
Well, first of all, you need to import the students or Sudan have already imported in my child or
to use this folder.
So in started only to import the Sudan.
Now you need to select which I continue to view, and according to that, you know, between the value
here and need, you can provide this by this day, sunny, day, sunny and anything like that.
So I'll just copy this from here.
And.
Basically headed this class because they are showing us what it's doing, so will not provide class,
will provide class name.
All right.
So let's just go to the talk of your school and how we provide this.
So this will be class name, not just to class or to the class name.
And we can provide.
Maybe I can provide some.
Or very soon, based on the.
And some.
So this will be their signing, all right.
All right, so we have given this and we can just go ahead and check it once.
Let me just save it and let me take you to the browser.
It could do the brother.
Bush.
Right now, we can't see it.
So the reason is obvious because we have not included in our gorgeous files, so I'm going to include
in the search warrant component here because after all, this component is already important or just
file, you know, like components under the component, but the root component should be included in
the app or just right.
So I've already included search meaning after this.
So in this, I haven't included.
OK.
So maybe instead of rap or.
That is a crap glass, and those are called wrap to provide an idea like this and that sugar form of
the rich don't need their class or anything class name.
So here I will import.
But I will in cold weather details.
But reading, maybe it will allow me to import.
Or not?
OK, so two, it's not allowing me actually when this happens, and I think everybody is if you drive
in the middle only shows us the.
Like.
Option two, Autumn Protect from.
You can just provide the details.
No need to provide the audience automatically understand you.
OK, so now if I go back to the browser.
And see, you can see the icon right here and there's a beautiful widget.
So this all is happening from the class name.
Would you?
Yes.
And this is that I can.
This is the day for icon and this icon.
All right.
So next, moving on to the next spot below the icon.
There is something else which we call as weather info.
All right.
Let me create another day with the class name of weather info.
They're in for.
All right.
And then we'll provide another day for basically.
So it will be named the class will be named as temperature.
All right, inside the temperature, there will be a span so which will be showing us our temperature,
for example, now we put twenty three point nine and four degrees Celsius.
We use this and sign and the key and this is the degrees aren't OK for copywriters.
Discern and copy and there's a semicolon, right?
So this is it.
This is our span, and the span doesn't need any.
So let me just say it and let me just go back to the browser.
Let me just show you.
So this is how it looks when the temperature and the degrees sign.
So let us just go back to your score.
Let us try to wait another day for the next.
Next things.
All right, so next will be the description on the road.
That's right.
Now we have provided the temperature.
Next would be for the.
The details.
Or description, we will provide the name as.
But it's description are right inside the description.
There would be another.
In which will be telling us about the weather condition, their conditions simply means like sunny,
cloudy and all that information, so weather condition inside this school.
For now, we'll ride sunny.
And next, we will have another event, so this will be showing us the location, right?
The city, which was so complete location for that before, so this will have a class name of place
and head it will show like.
Bombay's in.
So right now, we are hard getting all of this right.
We are writing all we are providing all our news from our side.
But we will not be doing this forever, so we will be calling the API and all information will be fetching
from that third place.
So right now, we're just creating the UI.
First of all, let me take you to the browser and let's just see how this looks beautiful.
So this is the temperature and this is the weather condition.
This is the location so far.
So good.
Let's go back and give you some other things.
All right, so now we will create some more sections.
All right, so that will create in the next video.