1
00:00:01,070 --> 00:00:09,350
OK, we come here in the bar dogs and in the left hand side, we need to provide some like the new links

2
00:00:09,350 --> 00:00:11,630
for the screen, for the small screen size.

3
00:00:12,810 --> 00:00:19,350
We'll will create another two for the links for the smaller screen size, so we'll call that we'll give

4
00:00:19,350 --> 00:00:20,610
the class name to that.

5
00:00:20,610 --> 00:00:22,260
They've been call it.

6
00:00:25,270 --> 00:00:27,500
Done the hair done.

7
00:00:28,750 --> 00:00:29,320
Links.

8
00:00:30,930 --> 00:00:35,900
Okay, now we'll copy all of this on the links in this copy.

9
00:00:37,050 --> 00:00:38,270
Yesterday inside this tent.

10
00:00:39,540 --> 00:00:41,310
David, for.

11
00:00:42,570 --> 00:00:47,880
This is done, and now let me just go ahead and check your browser if things are well.

12
00:00:48,610 --> 00:00:49,050
Can we just.

13
00:00:50,190 --> 00:00:57,270
Increase the size I can see now the links are not going and all the links are not going, and if we

14
00:00:57,270 --> 00:01:02,430
decrease the size, they are there and if we increase the size, they are there, but we don't want

15
00:01:02,430 --> 00:01:04,520
these links to like, always show up.

16
00:01:04,530 --> 00:01:06,860
We need a battle like like this.

17
00:01:06,870 --> 00:01:09,540
You can see this this button hand robot icon.

18
00:01:09,840 --> 00:01:11,610
We need this kind of icon, right?

19
00:01:11,940 --> 00:01:18,150
So that when you click that, I can only then these links and these links should show up.

20
00:01:18,540 --> 00:01:23,580
So to get that button, we will have to import that icon from material way.

21
00:01:23,590 --> 00:01:29,790
So I've already told you that we have installed material way and we'll be using material icons in our

22
00:01:29,790 --> 00:01:30,240
project.

23
00:01:30,540 --> 00:01:35,850
So we'll use a button and use an icon, which is called.

24
00:01:41,450 --> 00:01:44,660
In side of scientists digging, there's a time to look.

25
00:01:46,080 --> 00:01:49,170
OK, so here we will write the order.

26
00:01:50,100 --> 00:01:51,490
And let me just take you.

27
00:01:52,080 --> 00:01:53,160
We want this icon.

28
00:01:54,050 --> 00:02:01,610
The letter just copied this import code here, and they just copied it, and let's just go back to the

29
00:02:03,020 --> 00:02:05,750
Vasco editor and we'll import that.

30
00:02:06,650 --> 00:02:15,350
I can hear, OK, we've imported that item, so we'll be placing this icon here below the tags, like

31
00:02:15,380 --> 00:02:19,640
after the link tags that should appear.

32
00:02:19,970 --> 00:02:20,450
So.

33
00:02:21,770 --> 00:02:25,700
Surrender, this icon really just tried the name of this one here.

34
00:02:28,350 --> 00:02:32,910
And copy just basic and, of course, will provide a self-closing tag.

35
00:02:33,810 --> 00:02:35,010
And if.

36
00:02:36,200 --> 00:02:40,530
And this icon will be inside of the button, right?

37
00:02:40,550 --> 00:02:41,150
It's a button.

38
00:02:41,780 --> 00:02:43,250
It will provide a button.

39
00:02:45,700 --> 00:02:52,930
Work done, and, of course, but is putting does need are closing back.

40
00:02:54,130 --> 00:02:57,850
So let me just wrap this item.

41
00:02:59,370 --> 00:03:07,350
Around this icon, me, Milosevic, then we when we go to the browser and then we check our website.

42
00:03:08,340 --> 00:03:09,930
So there is some error.

43
00:03:12,970 --> 00:03:13,390
OK.

44
00:03:13,600 --> 00:03:18,730
Is error there node modules that it does not install?

45
00:03:19,090 --> 00:03:21,010
Let me just take a look at it.

46
00:03:22,590 --> 00:03:25,140
OK, so when we try to Google this error.

47
00:03:27,060 --> 00:03:35,430
The open Stack Overflow, so, you know, in developing in developing websites or in programming Googling

48
00:03:35,430 --> 00:03:40,770
that the most important skill you need to have, the skill you need to know what to Google any and only

49
00:03:40,770 --> 00:03:42,180
if you you just need to google it.

50
00:03:42,540 --> 00:03:48,090
So I googled the error and on the star go through, there's a solution that I need to install this package.

51
00:03:48,210 --> 00:03:52,560
So I just copy this command and just go back to my.

52
00:03:54,960 --> 00:03:57,570
He is called upon Mike Dominante again.

53
00:03:58,170 --> 00:04:05,160
Let me just close the store, just install what it's saying, so let's see if this works out.

54
00:04:05,400 --> 00:04:11,100
It's not compulsory that this will work out like you need to do her dental and you need to, like,

55
00:04:11,130 --> 00:04:15,780
keep doing things and something like something or the other works out.

56
00:04:16,140 --> 00:04:18,510
So this will be installed.

57
00:04:18,510 --> 00:04:26,100
And let's see if if this is this solution works or not, but once installed, we'll run that out again,

58
00:04:26,620 --> 00:04:30,570
then we'll check it again if the solution works out or not.

59
00:04:32,510 --> 00:04:33,800
OK, so that is install.

60
00:04:34,110 --> 00:04:37,760
Let me not run again and be in stock.

61
00:04:38,510 --> 00:04:39,950
Let me just first clear this mess.

62
00:04:40,670 --> 00:04:42,500
You know, we learn and be start.

63
00:04:43,260 --> 00:04:45,030
Then the server will be started again.

64
00:04:45,810 --> 00:04:49,590
And have we done anything wrong in the importing?

65
00:04:49,920 --> 00:04:50,580
I guess no.

66
00:04:51,310 --> 00:04:53,970
We've imported it correctly and.

67
00:04:55,370 --> 00:04:57,380
I hope this works and.

68
00:05:01,840 --> 00:05:07,690
And then we come back to the browser and it's loading for.

69
00:05:08,670 --> 00:05:11,970
I think the developments are what is starting and.

70
00:05:14,820 --> 00:05:16,260
Well, the solution which you tried.

71
00:05:25,990 --> 00:05:31,740
We are getting an again, so if I google this error on StackOverflow, there's a solution that you need

72
00:05:31,740 --> 00:05:38,280
to install this and the material was has updated its website like a few days back.

73
00:05:38,280 --> 00:05:42,360
So that is why we are getting all these letters and we are not the only ones who are getting this.

74
00:05:42,840 --> 00:05:48,060
These are, like many people, have been getting news that are so if you get it us while developing

75
00:05:48,060 --> 00:05:49,320
your project.

76
00:05:49,530 --> 00:05:51,030
So don't worry at all.

77
00:05:52,670 --> 00:05:57,230
Errors are the building blocks of your coding career, so don't worry about it.

78
00:05:57,240 --> 00:06:02,700
Let me just write whatever is shown in the solution on Stack Overflow, and you need to just keep on

79
00:06:02,700 --> 00:06:06,900
trying like this and it all just get resolved at the point.

80
00:06:07,380 --> 00:06:11,190
And if it doesn't, you need to check one more time, like what is wrong with the code or something

81
00:06:11,190 --> 00:06:11,580
like that?

82
00:06:12,710 --> 00:06:23,240
So once this is done, let me let me just run the server again and to see if this if this works this

83
00:06:23,240 --> 00:06:23,570
time.

84
00:06:24,840 --> 00:06:27,360
So this is just to create a pattern and.

85
00:06:29,660 --> 00:06:35,630
OK, this this hour is up and running, let us just go back to the browser and check if it's working

86
00:06:35,640 --> 00:06:41,660
now, OK, so it works and it's running and we can't see the button because it's also in black colour

87
00:06:41,660 --> 00:06:43,640
and it got mixed with the color of the nav.

88
00:06:43,640 --> 00:06:48,580
But if you just minimise minimize the whole.

89
00:06:50,400 --> 00:06:55,770
You can see it in the between, but its color is black, so that's why it's not showing up.

90
00:06:55,990 --> 00:06:58,050
That will change the color of it, don't worry.

91
00:06:58,470 --> 00:07:00,600
And now we go back to the.

92
00:07:02,280 --> 00:07:02,850
Browser.

93
00:07:03,600 --> 00:07:04,050
And.

94
00:07:05,670 --> 00:07:12,290
And to the escort, and then we'll take a look at the success that it's showing, the color of the button

95
00:07:12,300 --> 00:07:15,900
is black or will you call them that CSIS and.

96
00:07:17,480 --> 00:07:21,770
Coloring on the pattern or color should be.

97
00:07:25,410 --> 00:07:32,550
OK, so what I noticed here is that in the seasons I did the number go to the button that the button

98
00:07:32,550 --> 00:07:33,330
will not show.

99
00:07:33,330 --> 00:07:38,280
If the screen sizes more than 600 pixels, it will only be less than 600 pixels.

100
00:07:38,730 --> 00:07:42,660
So it's also not needed in the next few weeks, only in the mobile room.

101
00:07:43,200 --> 00:07:46,590
So let me just show you how it looks now.

102
00:07:48,300 --> 00:07:54,390
So this is how it will look, and if I increase the size, it will disappear into five degrees or so

103
00:07:54,390 --> 00:07:54,930
it will come.

104
00:07:55,320 --> 00:08:02,340
So we need to add a functionality to it so that when we click this link should show up and they will

105
00:08:02,340 --> 00:08:04,110
disappear again.

106
00:08:04,770 --> 00:08:07,950
So let me just go back to school and.

107
00:08:09,790 --> 00:08:19,480
So now let's add to to our project status and then component now states will be responsible for the

108
00:08:19,480 --> 00:08:22,720
shooting and hiring of the baton, so to use it.

109
00:08:22,960 --> 00:08:29,250
You need to imported from the act that is import use the.

110
00:08:31,290 --> 00:08:31,670
Bomb.

111
00:08:32,930 --> 00:08:33,270
Yeah.

112
00:08:33,890 --> 00:08:39,740
Or you can just ride above also, if you don't need to write another line, you can just give a comma

113
00:08:39,740 --> 00:08:40,070
here.

114
00:08:40,700 --> 00:08:41,990
It's early braces.

115
00:08:42,490 --> 00:08:44,260
It was stick, right?

116
00:08:44,900 --> 00:08:48,170
Now let me show you what is your state and what it can do.

117
00:08:48,750 --> 00:08:51,470
So let me just write first.

118
00:08:55,350 --> 00:08:56,520
So links.

119
00:08:59,630 --> 00:09:00,830
Maybe start.

120
00:09:02,230 --> 00:09:03,860
That so.

121
00:09:05,000 --> 00:09:05,560
Links.

122
00:09:07,600 --> 00:09:10,780
And equal to sign and provided a value.

123
00:09:12,270 --> 00:09:13,680
Maybe once.

124
00:09:13,870 --> 00:09:18,510
Oh, let me explain this weird thing to you if you don't know this, so.

125
00:09:19,700 --> 00:09:21,950
This is the syntax of defining a state.

126
00:09:22,980 --> 00:09:23,390
Now.

127
00:09:24,400 --> 00:09:26,740
These two things here are very, very important.

128
00:09:26,950 --> 00:09:32,830
The first thing will define the state as a constant and this is an array, and this will contain two

129
00:09:32,830 --> 00:09:37,540
things, which is the first thing is the variable which will store the value of the state.

130
00:09:37,930 --> 00:09:44,500
And the second one is the function which will execute whenever we want to like change or give another

131
00:09:44,500 --> 00:09:46,150
value to the variable.

132
00:09:46,210 --> 00:09:49,480
So we need to call this function and balance that value to this function.

133
00:09:49,720 --> 00:09:53,440
And this is the initial value of this short links variable.

134
00:09:54,010 --> 00:09:55,180
Initially, it is false.

135
00:09:56,230 --> 00:10:03,580
Now we need to change this when we click the button, right when we click the button, the links should

136
00:10:03,760 --> 00:10:06,670
show up or disappear like that.

137
00:10:07,240 --> 00:10:13,450
So in the left hand side of that, do we need to provide an ID, right?

138
00:10:14,050 --> 00:10:14,350
ID?

139
00:10:15,740 --> 00:10:19,670
And he'll be will right, GSX like JavaScript, obviously.

140
00:10:20,150 --> 00:10:26,330
So for that, we need we'll write a final statement in line if I made a statement.

141
00:10:26,600 --> 00:10:30,380
So I'll explain you why I'm writing this and how that works.

142
00:10:30,470 --> 00:10:34,910
So first of all, let me make sure links links.

143
00:10:37,410 --> 00:10:41,490
Then the question mark and now, if so, length is true.

144
00:10:42,900 --> 00:10:43,290
Then.

145
00:10:44,150 --> 00:10:52,300
And you will right the condition, what needs to be the value of this idea, what needs to like Kate

146
00:10:52,310 --> 00:10:55,070
return from this all, so we will return.

147
00:10:56,600 --> 00:10:56,990
Open.

148
00:10:57,890 --> 00:11:07,760
And if it is false, this column means if it returns a false value, then we will return clues as simple

149
00:11:07,760 --> 00:11:08,120
as that.

150
00:11:08,450 --> 00:11:14,630
And now we'll create on click function in this and like whenever we click the button, some function,

151
00:11:14,870 --> 00:11:15,830
shall they go right?

152
00:11:16,040 --> 00:11:19,400
So in this button will create an on click.

153
00:11:22,420 --> 00:11:22,950
On Click.

154
00:11:23,970 --> 00:11:30,590
And inside this, we will write function, maybe we can we can write above also.

155
00:11:30,870 --> 00:11:37,200
There's no compulsion and there's no compulsion at all that we have right above or below function can

156
00:11:37,200 --> 00:11:39,750
be in line also like the federal function.

157
00:11:40,650 --> 00:11:43,050
And you can write it above.

158
00:11:43,050 --> 00:11:48,100
Also, like we can define a function here and type function.

159
00:11:48,510 --> 00:11:51,540
The name of the function may be so.

160
00:11:53,500 --> 00:11:54,880
Click click function.

161
00:11:55,670 --> 00:11:57,630
Then we provide the value to it.

162
00:11:57,940 --> 00:12:04,900
So when this function gets called, so that means when the button gets clicked, so we trigger this

163
00:12:04,900 --> 00:12:05,410
function, right?

164
00:12:05,710 --> 00:12:13,570
So when this function gets called, we need to set the value off like we need to post this thing at

165
00:12:13,570 --> 00:12:21,160
our side, show links and we need to pass the value of the reverse of whatever it is currently look

166
00:12:21,400 --> 00:12:22,270
like, for example.

167
00:12:22,600 --> 00:12:26,920
Now I click the button, so it should show up the links.

168
00:12:27,340 --> 00:12:33,160
Now, even hour, if just imagine the links are already show like we have already click the button.

169
00:12:33,170 --> 00:12:35,740
Now we need the links to disappear, right?

170
00:12:36,010 --> 00:12:40,000
So it should make reverse of the value which was there previously.

171
00:12:40,240 --> 00:12:42,700
For that, we will use a nought operator.

172
00:12:42,790 --> 00:12:44,260
This is a logical nought operator.

173
00:12:45,100 --> 00:12:48,030
Now it will reverse the value like what was the previous value?

174
00:12:48,140 --> 00:12:50,650
Previous, when it was show links.

175
00:12:51,370 --> 00:12:52,210
That's it for this.

176
00:12:54,550 --> 00:12:59,050
So this is it, and now we'll call this function on Click.

177
00:13:00,660 --> 00:13:04,410
One click will create will call this function click.

178
00:13:04,980 --> 00:13:05,910
Let me just say it.

179
00:13:07,510 --> 00:13:08,080
And.

180
00:13:10,070 --> 00:13:12,080
When we go back to our browser.

181
00:13:18,730 --> 00:13:19,990
Let me just refresh.

182
00:13:23,510 --> 00:13:25,310
Falls does not yet incredible.

183
00:13:25,610 --> 00:13:27,740
So what is the weather here?

184
00:13:28,430 --> 00:13:30,320
OK, OK, OK, I made a mistake.

185
00:13:30,320 --> 00:13:31,190
I made a mistake.

186
00:13:31,370 --> 00:13:31,970
I admit it.

187
00:13:32,030 --> 00:13:35,660
Let me just go here and here we need to provide an A..

188
00:13:36,610 --> 00:13:39,080
OK, let me just say it again.

189
00:13:43,900 --> 00:13:47,380
Again, we are having the same issue.

190
00:13:52,150 --> 00:13:57,070
OK, I forgot something, I got a phone call, tried to use two to lose.

191
00:13:58,550 --> 00:14:01,450
And then we provide the spending.

192
00:14:02,630 --> 00:14:03,670
So that was my bag.

193
00:14:04,000 --> 00:14:04,840
Let me just save it.

194
00:14:06,000 --> 00:14:07,800
And then we go back again.

195
00:14:08,720 --> 00:14:09,890
And then we'll refresh it.

196
00:14:12,780 --> 00:14:15,150
And now when I try to decide that this.

197
00:14:16,740 --> 00:14:22,770
OK, now we are in the mobile view, and when I click it, you'll see this links are visible.

198
00:14:23,370 --> 00:14:25,230
And when I click it again, they will disappear.

199
00:14:25,620 --> 00:14:30,060
This is all the work of the youth state and on click function, which we created.

200
00:14:30,630 --> 00:14:33,990
So this is all for the know what we are done.

201
00:14:34,390 --> 00:14:37,360
We are, I guess you would not be seeing.

202
00:14:37,380 --> 00:14:38,440
Oh, let me just show it again.

203
00:14:38,670 --> 00:14:45,960
So when I decrease sides to see when I click the link show up and when I click it again, the links

204
00:14:45,960 --> 00:14:46,470
disappear.

205
00:14:46,800 --> 00:14:49,110
So this was the use of the youth to tide.

206
00:14:49,350 --> 00:14:56,760
This was the all use of the youth state we created and the on click function, which we have attached

207
00:14:56,760 --> 00:14:57,630
with the button.

208
00:14:58,380 --> 00:15:01,160
So this was this was it for the never.