1
00:00:00,330 --> 00:00:04,380
OK, so now let's start styling our search component.

2
00:00:04,770 --> 00:00:10,440
So like right now, we have just given the functionality and the JavaScript and the Hawks and all.

3
00:00:10,730 --> 00:00:13,830
But now let's start building it.

4
00:00:14,330 --> 00:00:18,900
So how it will look and everything like that, so let me just start rolling it.

5
00:00:18,900 --> 00:00:22,710
So we will give the class name first to this particular device and.

6
00:00:23,880 --> 00:00:32,130
That will be relative coalition will be relative basically and small, and this is the.

7
00:00:33,000 --> 00:00:40,890
Margin left, basically, no, the 48, these are the predefined values you can go ahead and check on

8
00:00:40,890 --> 00:00:42,540
the official recommendation.

9
00:00:43,320 --> 00:00:48,420
And that is what actually I'm doing, so I'm trying to explain as much as possible.

10
00:00:48,930 --> 00:00:51,240
So and inside of here.

11
00:00:51,720 --> 00:00:57,180
So after the media on one, there is a small and that would be empty.

12
00:00:58,250 --> 00:00:58,940
And.

13
00:00:59,970 --> 00:01:00,650
Of the 10.

14
00:01:01,560 --> 00:01:06,930
Learned tactics is often and another one for three.

15
00:01:07,500 --> 00:01:16,110
So next, we will give the input field inside of this particular due to input and type would be taxed.

16
00:01:16,620 --> 00:01:22,530
And that would be of value, and that is obviously a class name to make it look a little bit better.

17
00:01:23,220 --> 00:01:27,930
So there's the class name, and here we will give the class name so small.

18
00:01:29,390 --> 00:01:30,080
And.

19
00:01:31,610 --> 00:01:35,180
This is coming from the daily wouldn't us as basically

20
00:01:37,980 --> 00:01:39,260
ninety six.

21
00:01:40,380 --> 00:01:48,890
So this is how you are going to create this now this this model and with its 96 and again, there is

22
00:01:48,890 --> 00:02:00,370
the 80 with so rich of often and there is an underdog they've grown, which which is of great color.

23
00:02:00,840 --> 00:02:03,290
They're dark and big.

24
00:02:03,350 --> 00:02:07,700
That means the background gray and of 200.

25
00:02:08,600 --> 00:02:09,860
So something like this.

26
00:02:10,400 --> 00:02:11,900
Next, we have our border.

27
00:02:13,590 --> 00:02:25,680
Border, and that is is, of course, sound good and full, and there will be a shadow shadow wall and

28
00:02:25,680 --> 00:02:29,250
an outline will be no outline would be in.

29
00:02:30,910 --> 00:02:31,130
Yeah.

30
00:02:32,070 --> 00:02:33,930
There will be six.

31
00:02:35,370 --> 00:02:38,310
I think basically putting next black.

32
00:02:40,970 --> 00:02:49,040
And whenever I hover over the component, the search input component, so that it will be a shadow.

33
00:02:50,120 --> 00:02:50,870
So shadow.

34
00:02:52,100 --> 00:02:52,670
Large.

35
00:02:54,340 --> 00:02:55,020
So this is it.

36
00:02:55,560 --> 00:03:04,320
Next, we will have a placeholder after this, so please hold it, and this should be equal to search

37
00:03:05,070 --> 00:03:08,070
Google or Typekit or.

38
00:03:09,060 --> 00:03:09,740
Sir.

39
00:03:14,760 --> 00:03:17,930
Google or type you are?

40
00:03:18,950 --> 00:03:22,520
So I can even give the magnifying glass.

41
00:03:24,350 --> 00:03:32,210
Emoji here that would look even more cool, and then we'll have a button.

42
00:03:32,780 --> 00:03:34,940
And so what are we going here?

43
00:03:35,860 --> 00:03:45,100
Like, before the button, we will have an on change here, so let me give an on change also to this

44
00:03:45,310 --> 00:03:45,670
thing.

45
00:03:46,330 --> 00:03:55,210
Well known gene function like whenever there is a change on change and this is equal to basically this

46
00:03:55,210 --> 00:04:01,450
will be JavaScript and inside of this, there would be I don't think there were two curly braces.

47
00:04:01,450 --> 00:04:02,350
There is only one.

48
00:04:05,140 --> 00:04:06,880
And this is the event.

49
00:04:11,220 --> 00:04:22,180
This will be said text and start of this, there would be dark or event start targeted toward value.

50
00:04:23,010 --> 00:04:24,270
So this is it.

51
00:04:25,730 --> 00:04:28,640
So after this, we will have the.

52
00:04:29,670 --> 00:04:37,440
Barton, so but there will be a JavaScript, so how you want that button to be displayed, so if text

53
00:04:37,980 --> 00:04:48,000
actually cool to this and and person is inside of this, that would be the condition.

54
00:04:48,450 --> 00:04:54,200
So let's give it this and here there would be the item.

55
00:04:54,750 --> 00:04:57,090
So the button would be here.

56
00:04:58,500 --> 00:05:04,980
OK, so button needs including tech, of course, and there is the access inside this.

57
00:05:06,350 --> 00:05:07,550
Because we're not close it.

58
00:05:08,830 --> 00:05:10,390
Basically, you want to empty it?

59
00:05:11,530 --> 00:05:14,980
OK, so next to nothing, nothing else.

60
00:05:15,310 --> 00:05:16,510
OK, next.

61
00:05:16,510 --> 00:05:21,980
There will be the type of Thebarton, so type is bottom.

62
00:05:22,390 --> 00:05:31,200
Next, we'll have the class name wars and the class name would be the tailwind success tank.

63
00:05:31,540 --> 00:05:32,620
So absolute.

64
00:05:32,620 --> 00:05:35,500
And that is a top of 1.5.

65
00:05:36,490 --> 00:05:41,080
And then we'll write a hyphen 1.5 next.

66
00:05:41,080 --> 00:05:44,680
That is a write off for write off four.

67
00:05:45,340 --> 00:05:53,410
And there's a text of two excel to excel and text.

68
00:05:53,530 --> 00:05:54,610
Color should be green.

69
00:05:55,210 --> 00:05:59,350
Text and green five hundred.

70
00:05:59,830 --> 00:06:01,810
And that is an on click after this.

71
00:06:02,200 --> 00:06:06,160
So on, like whenever we click this button, what should happen?

72
00:06:07,760 --> 00:06:14,000
So on clicking the button, we will score or we will like, set next to nothing.

73
00:06:14,720 --> 00:06:21,710
So this is a very narrow function and in line for our total function to set next.

74
00:06:22,280 --> 00:06:25,040
And there should be equal to an empty string.

75
00:06:25,580 --> 00:06:27,690
So that is so good.

76
00:06:27,710 --> 00:06:30,020
Next, let me import links also.

77
00:06:31,060 --> 00:06:33,730
So that we can give links to.

78
00:06:35,960 --> 00:06:38,240
Not this link.

79
00:06:40,290 --> 00:06:47,670
But right now, we are not willing or not important the links will do that, but not no later on.

80
00:06:48,180 --> 00:06:53,430
So that is it for the basic structure of this particular search component.

81
00:06:53,790 --> 00:06:57,450
Next, we'll move on to creating some more components, like for better known.

82
00:06:57,910 --> 00:07:01,800
So we'll see it, which is the one which we want to create.

83
00:07:02,390 --> 00:07:06,150
So I think we should go for links.

84
00:07:07,500 --> 00:07:12,960
Yeah, we should go for links, basically, because after the search, there comes the links, so we

85
00:07:12,960 --> 00:07:15,490
will create the links now.

86
00:07:15,990 --> 00:07:21,000
So let me just create a component inside this.

87
00:07:21,630 --> 00:07:22,560
We see what first.

88
00:07:23,760 --> 00:07:25,350
And inside of this.

89
00:07:26,900 --> 00:07:27,650
That would be.

90
00:07:28,890 --> 00:07:31,320
Inside the components that will be a file.

91
00:07:32,880 --> 00:07:33,420
As.

92
00:07:34,810 --> 00:07:36,090
Oh, OK.

93
00:07:38,620 --> 00:07:39,610
All those links.

94
00:07:42,140 --> 00:07:44,650
My system is a little bit lagging.

95
00:07:45,890 --> 00:07:47,390
And Link starts.

96
00:07:51,900 --> 00:07:53,820
And after the link.

97
00:07:55,170 --> 00:08:01,020
Oh, I don't know why my system is a bit lagging, but when you got to it, OK?

98
00:08:01,050 --> 00:08:01,650
So.

99
00:08:04,230 --> 00:08:05,140
Is it working?

100
00:08:07,380 --> 00:08:08,580
Became a little bit time.

101
00:08:09,620 --> 00:08:19,100
So here will make the basic imports or we use the extension to the east of the acrylic snippets while

102
00:08:19,100 --> 00:08:24,410
press control shift B and then I put certain I'll do the AH AFC.

103
00:08:25,250 --> 00:08:36,350
And after doing this, after doing this, we will import the nav link from the the outer dome and start

104
00:08:36,350 --> 00:08:40,510
of this, that it will be a nav and link.

105
00:08:41,240 --> 00:08:45,710
Basically, we're importing this from the EU to act now grooved on.

106
00:08:46,250 --> 00:08:54,800
OK, so next what we'll do is we'll define our links or we have imported the links and now we will define

107
00:08:54,800 --> 00:09:07,370
the links and there's content and links is equal to an array, basically an area inside this that will

108
00:09:07,370 --> 00:09:08,240
be the you ordered.

109
00:09:09,050 --> 00:09:13,550
And this, you are told, is basically the search.

110
00:09:14,410 --> 00:09:20,620
So did you and then we'll have a coma and then we'll be having a text go inside this.

111
00:09:20,860 --> 00:09:24,790
There would be a more for magnifying glass again.

112
00:09:25,270 --> 00:09:27,070
We are making use of the same emoji.

113
00:09:28,720 --> 00:09:33,790
So this and there would be for all like when we want to search for.

114
00:09:33,820 --> 00:09:35,020
All right.

115
00:09:35,590 --> 00:09:37,720
So this is an object.

116
00:09:38,350 --> 00:09:40,230
Next, we will have another one.

117
00:09:40,280 --> 00:09:41,170
Same as this.

118
00:09:41,670 --> 00:09:43,270
Oh, that will be the new order.

119
00:09:44,020 --> 00:09:55,030
And there will be the news and there will be a comma and text, what should be the text and there should

120
00:09:55,030 --> 00:09:55,600
be news.

121
00:09:55,600 --> 00:09:58,330
So let me find if I have the news emoji.

122
00:09:59,880 --> 00:10:00,510
News.

123
00:10:01,660 --> 00:10:02,470
Do I have.

124
00:10:04,520 --> 00:10:05,620
And working with.

125
00:10:06,910 --> 00:10:08,010
Great working.

126
00:10:16,510 --> 00:10:19,750
OK, let me search news.

127
00:10:21,730 --> 00:10:23,170
OK, I got that day right.

128
00:10:23,530 --> 00:10:25,690
Yeah, I got the emoji.

129
00:10:26,440 --> 00:10:31,640
And that should be in the calibers is actually not clearly better than the Coalition's.

130
00:10:31,660 --> 00:10:31,900
Yeah.

131
00:10:32,710 --> 00:10:34,390
So this is the news.

132
00:10:34,870 --> 00:10:39,280
And next, we will have for the images.

133
00:10:39,430 --> 00:10:41,980
So let us do it also quickly.

134
00:10:43,040 --> 00:10:51,620
And images, and we'll have that text and there will be for the images now, for the images, I will

135
00:10:51,620 --> 00:10:52,700
use the camera.

136
00:10:54,780 --> 00:10:57,060
Images and we just can't find.

137
00:10:58,520 --> 00:10:59,330
A camera?

138
00:10:59,960 --> 00:11:01,370
OK, I got the camera.

139
00:11:02,360 --> 00:11:04,370
And now this would be it.

140
00:11:04,730 --> 00:11:06,830
Now there will be images.

141
00:11:07,400 --> 00:11:11,990
Next, we will have the very same thing for the videos.

142
00:11:12,620 --> 00:11:15,620
And that is for the.

143
00:11:17,780 --> 00:11:24,090
Videos and I will give a comma and the text, which I want to display.

144
00:11:24,290 --> 00:11:29,120
And let me first grab the emoji, and that will be the video.

145
00:11:29,720 --> 00:11:34,820
And for that, I will use maybe this would be good.

146
00:11:35,030 --> 00:11:35,270
Yeah.

147
00:11:35,780 --> 00:11:37,250
So that will be.

148
00:11:38,260 --> 00:11:39,070
Videos.

149
00:11:39,370 --> 00:11:47,040
OK, now let us give some functionality to it, and OK, so there are links and that there, Dave.

150
00:11:47,340 --> 00:11:50,460
Let us quickly give a class name for it.

151
00:11:50,470 --> 00:11:59,360
So class name and the class name would be a flex and that is in small justify around.

152
00:12:00,110 --> 00:12:05,380
And so basically the supply around and then we'll have the justify between.

153
00:12:06,220 --> 00:12:12,330
So this is the space between basically mystify and between.

154
00:12:12,340 --> 00:12:21,070
And then we'll have the items to the center and then we'll have the top as the margin drop, as default.

155
00:12:21,400 --> 00:12:24,700
So next, we'll be having the map mapping function.

156
00:12:24,700 --> 00:12:28,330
We'll be mapping the links or links, dot the map.

157
00:12:28,660 --> 00:12:32,380
And inside of this, there is a function.

158
00:12:32,380 --> 00:12:35,270
And inside of that, there are some arguments.

159
00:12:35,270 --> 00:12:38,380
So you are that we are passing and we are passing the text.

160
00:12:39,340 --> 00:12:40,030
Cool, cool, cool.

161
00:12:40,390 --> 00:12:43,480
So do outside of this, there is.

162
00:12:45,620 --> 00:12:51,020
Federal function and instead of this that are basically the rate on which you want to give.

163
00:12:51,020 --> 00:12:59,510
So inside this, we will give the enabling nav link and to basically where we want to redirect it.

164
00:12:59,720 --> 00:13:00,770
So that's the other.

165
00:13:01,100 --> 00:13:08,990
Next, we'll have the active occurred, the last name and that is basically equal to the text should

166
00:13:08,990 --> 00:13:17,690
be blue and that that's of seven and the intensity and next level with the border and border basically

167
00:13:17,690 --> 00:13:18,680
be two.

168
00:13:19,730 --> 00:13:31,310
So next, we have the dark text or text, and that is deep blue, so blue and three hundred and density.

169
00:13:31,790 --> 00:13:34,130
And the border also would be blue.

170
00:13:34,130 --> 00:13:36,560
Border should be blue.

171
00:13:36,560 --> 00:13:39,770
And that is also that is of basically 700.

172
00:13:39,770 --> 00:13:43,220
And there's the ring bottom of two.

173
00:13:43,490 --> 00:13:44,630
So that is it.

174
00:13:44,690 --> 00:13:53,420
I think the naval ink needs to be, uh, everything needs to be closed, so I wouldn't close it here.

175
00:13:53,420 --> 00:13:58,220
And yeah, and there will be the text or direct text.

176
00:13:58,460 --> 00:14:00,380
And I think we are done for this.

177
00:14:00,380 --> 00:14:01,160
We will save it.

178
00:14:01,700 --> 00:14:02,980
And that's it.

179
00:14:02,990 --> 00:14:05,840
We will create some other functionalities in the next video.

180
00:14:06,230 --> 00:14:09,470
So some other components that will be good in the next video.