1
00:00:01,110 --> 00:00:07,170
OK, so now that we have captured the soldier keyword or the search value, we can add the functionality

2
00:00:07,170 --> 00:00:10,430
to like search the term.

3
00:00:10,950 --> 00:00:13,620
And what we added.

4
00:00:14,310 --> 00:00:20,880
So before that, let's just go ahead and create a UI for the site like below the search component.

5
00:00:21,540 --> 00:00:25,980
There will be a component which will be containing all information about the way that it will be containing

6
00:00:25,980 --> 00:00:28,500
the icons and temperature and everything.

7
00:00:28,950 --> 00:00:31,050
So let's create that first.

8
00:00:31,230 --> 00:00:34,260
So for that, I will create another component in the components folder.

9
00:00:34,810 --> 00:00:38,670
So I will name it like the.

10
00:00:40,330 --> 00:00:43,240
Further details or just details will call it.

11
00:00:45,500 --> 00:00:48,560
That he deals on.

12
00:00:48,820 --> 00:00:49,250
Yes.

13
00:00:51,690 --> 00:00:57,870
OK, now we lose our trick is out of sea.

14
00:00:58,890 --> 00:01:01,630
OK, weather details to us.

15
00:01:02,630 --> 00:01:03,100
So.

16
00:01:04,150 --> 00:01:09,310
And one more thing I really like to tell you that had that is that they will get inside the written

17
00:01:09,310 --> 00:01:15,790
statement there should be active and inside that you need to write all your GSX so you can also put

18
00:01:15,790 --> 00:01:20,080
like you can remove the T word from it and you can just leave it like this also.

19
00:01:20,410 --> 00:01:25,750
So it will also look like all this can also work.

20
00:01:26,140 --> 00:01:26,440
OK.

21
00:01:28,780 --> 00:01:32,560
The scholars inducted syntactic sugar from of the company.

22
00:01:33,430 --> 00:01:38,680
And now let's go ahead and create this components inside this, I can create a.

23
00:01:40,150 --> 00:01:47,390
Active for what I considered an article probably depends on me, but I have created article when I was

24
00:01:47,410 --> 00:01:48,320
designing this.

25
00:01:48,440 --> 00:01:51,430
So inside the article, let me provide the class name.

26
00:01:53,380 --> 00:01:56,700
And the class name for this article will be Richard.

27
00:02:00,520 --> 00:02:05,350
And inside this, there will be a Dave and.

28
00:02:07,430 --> 00:02:14,240
Its last name would be whether I can, because we are going to provide the icon first at the top, there

29
00:02:14,240 --> 00:02:15,320
will be an icon.

30
00:02:15,770 --> 00:02:17,780
So that's what we're going to create like.

31
00:02:18,320 --> 00:02:18,890
But the.

32
00:02:21,340 --> 00:02:21,670
All right.

33
00:02:22,420 --> 00:02:22,990
All right.

34
00:02:23,440 --> 00:02:27,790
So now we will like to import the icon.

35
00:02:28,300 --> 00:02:30,730
So for that, we need to go to the website.

36
00:02:33,070 --> 00:02:39,300
We are using the icons from this website, is it closed or get no deal?

37
00:02:39,940 --> 00:02:47,820
So we are using the Sudan from this website and these are likened to this is the index.

38
00:02:48,300 --> 00:02:54,000
How you should like the the icon or you can like, include it in your project?

39
00:02:54,450 --> 00:02:59,770
Well, first of all, you need to import the students or Sudan have already imported in my child or

40
00:02:59,790 --> 00:03:00,720
to use this folder.

41
00:03:00,720 --> 00:03:02,940
So in started only to import the Sudan.

42
00:03:03,300 --> 00:03:09,060
Now you need to select which I continue to view, and according to that, you know, between the value

43
00:03:09,060 --> 00:03:18,000
here and need, you can provide this by this day, sunny, day, sunny and anything like that.

44
00:03:18,480 --> 00:03:20,880
So I'll just copy this from here.

45
00:03:22,940 --> 00:03:23,660
And.

46
00:03:25,740 --> 00:03:31,020
Basically headed this class because they are showing us what it's doing, so will not provide class,

47
00:03:31,020 --> 00:03:33,000
will provide class name.

48
00:03:33,690 --> 00:03:34,030
All right.

49
00:03:34,650 --> 00:03:39,240
So let's just go to the talk of your school and how we provide this.

50
00:03:40,230 --> 00:03:45,660
So this will be class name, not just to class or to the class name.

51
00:03:46,470 --> 00:03:49,410
And we can provide.

52
00:03:50,660 --> 00:03:52,250
Maybe I can provide some.

53
00:03:53,800 --> 00:03:56,590
Or very soon, based on the.

54
00:04:00,290 --> 00:04:00,910
And some.

55
00:04:02,650 --> 00:04:06,370
So this will be their signing, all right.

56
00:04:07,540 --> 00:04:13,870
All right, so we have given this and we can just go ahead and check it once.

57
00:04:13,960 --> 00:04:17,740
Let me just save it and let me take you to the browser.

58
00:04:20,280 --> 00:04:21,540
It could do the brother.

59
00:04:23,940 --> 00:04:24,240
Bush.

60
00:04:25,210 --> 00:04:26,600
Right now, we can't see it.

61
00:04:26,630 --> 00:04:33,830
So the reason is obvious because we have not included in our gorgeous files, so I'm going to include

62
00:04:33,830 --> 00:04:41,450
in the search warrant component here because after all, this component is already important or just

63
00:04:41,450 --> 00:04:46,790
file, you know, like components under the component, but the root component should be included in

64
00:04:46,790 --> 00:04:48,050
the app or just right.

65
00:04:48,380 --> 00:04:51,720
So I've already included search meaning after this.

66
00:04:51,720 --> 00:04:53,210
So in this, I haven't included.

67
00:04:53,240 --> 00:04:53,600
OK.

68
00:04:54,230 --> 00:04:58,580
So maybe instead of rap or.

69
00:05:00,450 --> 00:05:09,960
That is a crap glass, and those are called wrap to provide an idea like this and that sugar form of

70
00:05:09,960 --> 00:05:14,790
the rich don't need their class or anything class name.

71
00:05:15,810 --> 00:05:17,370
So here I will import.

72
00:05:18,610 --> 00:05:21,550
But I will in cold weather details.

73
00:05:24,560 --> 00:05:28,540
But reading, maybe it will allow me to import.

74
00:05:29,670 --> 00:05:30,780
Or not?

75
00:05:33,640 --> 00:05:40,750
OK, so two, it's not allowing me actually when this happens, and I think everybody is if you drive

76
00:05:41,350 --> 00:05:43,450
in the middle only shows us the.

77
00:05:44,660 --> 00:05:45,110
Like.

78
00:05:46,580 --> 00:05:50,450
Option two, Autumn Protect from.

79
00:05:52,000 --> 00:05:54,670
You can just provide the details.

80
00:05:54,910 --> 00:05:58,000
No need to provide the audience automatically understand you.

81
00:05:58,810 --> 00:06:01,120
OK, so now if I go back to the browser.

82
00:06:02,750 --> 00:06:07,010
And see, you can see the icon right here and there's a beautiful widget.

83
00:06:07,940 --> 00:06:11,630
So this all is happening from the class name.

84
00:06:12,820 --> 00:06:13,120
Would you?

85
00:06:13,780 --> 00:06:13,990
Yes.

86
00:06:14,170 --> 00:06:15,730
And this is that I can.

87
00:06:15,970 --> 00:06:17,560
This is the day for icon and this icon.

88
00:06:17,860 --> 00:06:18,190
All right.

89
00:06:18,820 --> 00:06:23,350
So next, moving on to the next spot below the icon.

90
00:06:24,340 --> 00:06:29,530
There is something else which we call as weather info.

91
00:06:29,860 --> 00:06:30,230
All right.

92
00:06:30,260 --> 00:06:35,410
Let me create another day with the class name of weather info.

93
00:06:38,780 --> 00:06:39,740
They're in for.

94
00:06:39,770 --> 00:06:40,190
All right.

95
00:06:40,520 --> 00:06:45,830
And then we'll provide another day for basically.

96
00:06:47,450 --> 00:06:52,850
So it will be named the class will be named as temperature.

97
00:06:54,130 --> 00:07:02,770
All right, inside the temperature, there will be a span so which will be showing us our temperature,

98
00:07:02,770 --> 00:07:08,280
for example, now we put twenty three point nine and four degrees Celsius.

99
00:07:08,290 --> 00:07:16,330
We use this and sign and the key and this is the degrees aren't OK for copywriters.

100
00:07:16,720 --> 00:07:19,770
Discern and copy and there's a semicolon, right?

101
00:07:20,650 --> 00:07:21,490
So this is it.

102
00:07:21,670 --> 00:07:24,790
This is our span, and the span doesn't need any.

103
00:07:25,930 --> 00:07:29,020
So let me just say it and let me just go back to the browser.

104
00:07:30,750 --> 00:07:31,850
Let me just show you.

105
00:07:31,890 --> 00:07:36,330
So this is how it looks when the temperature and the degrees sign.

106
00:07:37,120 --> 00:07:39,870
So let us just go back to your score.

107
00:07:40,960 --> 00:07:45,680
Let us try to wait another day for the next.

108
00:07:46,810 --> 00:07:47,650
Next things.

109
00:07:47,890 --> 00:07:51,270
All right, so next will be the description on the road.

110
00:07:51,270 --> 00:07:51,800
That's right.

111
00:07:52,200 --> 00:07:54,490
Now we have provided the temperature.

112
00:07:55,060 --> 00:07:56,470
Next would be for the.

113
00:07:58,060 --> 00:07:58,740
The details.

114
00:07:59,980 --> 00:08:04,210
Or description, we will provide the name as.

115
00:08:05,200 --> 00:08:08,740
But it's description are right inside the description.

116
00:08:09,100 --> 00:08:11,080
There would be another.

117
00:08:12,300 --> 00:08:19,950
In which will be telling us about the weather condition, their conditions simply means like sunny,

118
00:08:19,950 --> 00:08:25,350
cloudy and all that information, so weather condition inside this school.

119
00:08:26,790 --> 00:08:28,500
For now, we'll ride sunny.

120
00:08:29,650 --> 00:08:35,920
And next, we will have another event, so this will be showing us the location, right?

121
00:08:36,220 --> 00:08:42,880
The city, which was so complete location for that before, so this will have a class name of place

122
00:08:43,600 --> 00:08:45,670
and head it will show like.

123
00:08:47,820 --> 00:08:50,260
Bombay's in.

124
00:08:51,570 --> 00:08:53,940
So right now, we are hard getting all of this right.

125
00:08:54,300 --> 00:08:58,290
We are writing all we are providing all our news from our side.

126
00:08:58,920 --> 00:09:05,310
But we will not be doing this forever, so we will be calling the API and all information will be fetching

127
00:09:05,310 --> 00:09:07,020
from that third place.

128
00:09:07,050 --> 00:09:08,930
So right now, we're just creating the UI.

129
00:09:08,940 --> 00:09:14,940
First of all, let me take you to the browser and let's just see how this looks beautiful.

130
00:09:15,390 --> 00:09:18,620
So this is the temperature and this is the weather condition.

131
00:09:18,630 --> 00:09:20,790
This is the location so far.

132
00:09:20,790 --> 00:09:21,270
So good.

133
00:09:21,420 --> 00:09:25,110
Let's go back and give you some other things.

134
00:09:26,180 --> 00:09:31,010
All right, so now we will create some more sections.

135
00:09:31,040 --> 00:09:35,330
All right, so that will create in the next video.