1
00:00:00,460 --> 00:00:08,680
OK, so now what we'll do is we'll import are a package which we have just to be installed at the beginning

2
00:00:08,680 --> 00:00:16,300
of the project, so that was valued or guess or we'll import like values from.

3
00:00:20,990 --> 00:00:21,520
Values?

4
00:00:21,850 --> 00:00:22,970
Yes, right.

5
00:00:24,470 --> 00:00:24,960
Both.

6
00:00:28,560 --> 00:00:29,340
That said.

7
00:00:30,300 --> 00:00:30,740
David.

8
00:00:31,410 --> 00:00:35,970
And now what we are going to do is I'm going to create a list.

9
00:00:36,450 --> 00:00:42,510
Now this will grab the colors from the lake package, you know.

10
00:00:42,810 --> 00:00:44,740
So for that, I'm creating a list.

11
00:00:44,800 --> 00:00:46,270
Now this will be the list of colors.

12
00:00:46,290 --> 00:00:46,560
OK.

13
00:00:46,920 --> 00:00:52,200
So later on, we'll do like map this, how to map this list and all will do that.

14
00:00:52,530 --> 00:00:57,030
But right now we'll just to create a list so that can be list.

15
00:00:57,660 --> 00:00:59,550
Of course, I'm using you to create the list.

16
00:01:01,610 --> 00:01:04,130
List and set list.

17
00:01:06,460 --> 00:01:09,150
Will be set list, and they used to.

18
00:01:10,980 --> 00:01:17,640
The you state and inside this, there will be like, first of all, there will be a default value.

19
00:01:18,650 --> 00:01:28,320
On a default value is that whenever we all the paid, so we should see some of the things like by default,

20
00:01:28,320 --> 00:01:34,350
like I explained, you let me just show you in the browser or like when I go to the website, there

21
00:01:34,350 --> 00:01:37,920
should be some default value and which will show me some colors.

22
00:01:38,670 --> 00:01:44,540
If I don't provide that to my page will look empty and I don't want that to happen.

23
00:01:44,550 --> 00:01:48,570
I want my page to look like little faded up with colors or not.

24
00:01:49,020 --> 00:01:50,360
So that's why I on.

25
00:01:51,740 --> 00:02:01,370
I'm giving that thing also inside I used it, what I do is I create a new and a new and of values values

26
00:02:01,370 --> 00:02:03,800
which me important in writing this thing.

27
00:02:04,460 --> 00:02:06,170
So values inside this.

28
00:02:08,180 --> 00:02:12,860
What I do is I'll provide a default color value.

29
00:02:14,510 --> 00:02:21,710
Who maybe I put a lower value in the moment that should be in the Hex before Hector should have a hashtag

30
00:02:23,030 --> 00:02:23,590
starting.

31
00:02:23,990 --> 00:02:26,210
OK, so this is what I am going to provide.

32
00:02:26,600 --> 00:02:32,870
And next, what I'll do is I'll explain like can we take you to the documentation of this?

33
00:02:36,730 --> 00:02:40,230
So when I go to work, it's just.

34
00:02:42,260 --> 00:02:47,570
See, this is where we are going into this lot color dot org and inside this, there is an argument

35
00:02:47,570 --> 00:02:49,580
we can pass 10, 20, 30, whatever.

36
00:02:50,280 --> 00:02:52,460
According to that, we'll will be getting the values and change.

37
00:02:52,910 --> 00:02:55,640
OK, so we are not looking at this right now.

38
00:02:55,940 --> 00:02:59,270
We are just looking at this function, this matter right now.

39
00:02:59,510 --> 00:03:02,360
Of course, we can go ahead and explore this package.

40
00:03:03,230 --> 00:03:11,090
So when you go to this occasion, there are a lot of methods, a lot of colors, shades, shades and

41
00:03:11,090 --> 00:03:12,130
whatever you want.

42
00:03:12,140 --> 00:03:14,630
Like however you want to implement that in your project.

43
00:03:15,170 --> 00:03:20,450
This is like wide, wide package, and you can see there are so many downloads to look like.

44
00:03:20,450 --> 00:03:21,830
It's a widely used package.

45
00:03:22,250 --> 00:03:26,150
So what I'm trying to say is that you can make use of it.

46
00:03:26,150 --> 00:03:30,980
But in this photo, Tony, we're just going to use this this one.

47
00:03:31,340 --> 00:03:36,460
OK, so color on that is what I'm going to do here or inside the values.

48
00:03:36,470 --> 00:03:37,790
No, well, it was dark.

49
00:03:38,090 --> 00:03:39,470
All OK.

50
00:03:40,720 --> 00:03:47,390
And be passing in here as I've never been, but we may change it in the coming time when we progress

51
00:03:47,440 --> 00:03:48,280
with the project.

52
00:03:48,330 --> 00:03:53,710
Okay, now here I can provide a parenthesis to my old man.

53
00:03:55,300 --> 00:03:57,070
Sorry, bad with my talk.

54
00:03:57,280 --> 00:04:07,900
OK, now what we want to do is that we want to set the list and we want to like as soon as we type.

55
00:04:08,230 --> 00:04:11,380
So we want the close right, we want the colors.

56
00:04:11,960 --> 00:04:15,000
So that is what we are going to do here.

57
00:04:15,430 --> 00:04:21,130
So after the event or prevent default, what I do is I'll implement the try and the blocks.

58
00:04:22,940 --> 00:04:27,770
So maybe I'm having a little cold, that's why my daughters is in bed with me.

59
00:04:27,980 --> 00:04:35,060
OK, so we'll add a try and catch so inside the eye, what we want to do is we want to request the color

60
00:04:35,390 --> 00:04:36,770
so light colored.

61
00:04:37,070 --> 00:04:46,880
No, I'm assigning a variable here because light so light colors is equal to new and inside the values

62
00:04:47,420 --> 00:04:50,720
and news values.

63
00:04:51,050 --> 00:04:53,210
And inside this, we'll pass that color.

64
00:04:53,390 --> 00:04:55,400
Now which color is that we are passing?

65
00:04:55,400 --> 00:04:56,510
This is this color.

66
00:04:56,510 --> 00:05:00,890
Whatever we Typekit inside that input, it will take that color.

67
00:05:01,190 --> 00:05:07,280
It will take that key word from here in this available and we will pass this inside those values, which

68
00:05:07,280 --> 00:05:10,640
is the package or edible or package function.

69
00:05:10,850 --> 00:05:16,000
So after passing this, we want all as of now, we'll give 10.

70
00:05:16,440 --> 00:05:24,200
And now what we did here is that we requested the colors for this particular color.

71
00:05:24,620 --> 00:05:26,390
Well, you know, this is hard coded.

72
00:05:26,540 --> 00:05:28,370
And now I explained why we did this.

73
00:05:28,370 --> 00:05:34,250
We did this just to show it on the home page when when we cannot search for any color by default, there

74
00:05:34,250 --> 00:05:36,500
will be shades related to this color.

75
00:05:37,010 --> 00:05:46,100
So I hope you understand next to what we'll do is we'll start the list, said the list.

76
00:05:47,000 --> 00:05:49,040
And what the list will be said to.

77
00:05:49,370 --> 00:05:51,890
That will be list will be set two colors.

78
00:05:52,370 --> 00:05:56,150
And now after this, we'll add up catalog.

79
00:05:56,390 --> 00:05:58,650
Now if, for example, if there is an error.

80
00:05:58,670 --> 00:06:01,280
So for that, we as the go to block.

81
00:06:01,650 --> 00:06:03,190
So it's not all.

82
00:06:03,230 --> 00:06:07,690
I did a mistake expert to not have be so bad.

83
00:06:07,690 --> 00:06:14,780
It will be error or you can you can rent it or whatever people are.

84
00:06:14,870 --> 00:06:18,050
Also, so I'll write error and we'll set the error.

85
00:06:20,060 --> 00:06:21,140
There that are to do.

86
00:06:21,630 --> 00:06:26,350
Now here is what we are making, the use of that used it.

87
00:06:27,030 --> 00:06:28,590
We created this, this.

88
00:06:29,900 --> 00:06:35,720
This hope is now being utilized whenever that is an error, it will set it to true and it will come

89
00:06:35,720 --> 00:06:42,380
here and the last name for the input will be start to erode and binder of the input will be changed

90
00:06:42,380 --> 00:06:46,910
to data collected, which indicates that that is an error and the entry is not valid.

91
00:06:48,220 --> 00:06:50,140
So that is the use of this catch block.

92
00:06:50,650 --> 00:06:59,740
And of course, we want to know what the are, so we will console log in or console or log inside this

93
00:06:59,740 --> 00:07:05,170
we log what does that error console log error and only just save it?

94
00:07:06,560 --> 00:07:09,870
And let me see if that is something else remaining here.

95
00:07:10,460 --> 00:07:18,680
We've implemented the handle some and on general Tommy Adams and but now we have hit the button.

96
00:07:19,130 --> 00:07:21,740
So now everything else is done.

97
00:07:23,450 --> 00:07:29,840
But we want to get the callers, so we will controlled our blog and we'll see if you are getting the

98
00:07:29,840 --> 00:07:30,650
calls or not.

99
00:07:31,270 --> 00:07:33,100
So let us go to our.

100
00:07:34,280 --> 00:07:34,990
But I also.

101
00:07:36,260 --> 00:07:38,270
All right, OK, I will open my console.

102
00:07:39,730 --> 00:07:44,850
And the fire type start typing here, nothing really happened, and no.

103
00:07:46,820 --> 00:07:51,760
There was something that it was not all, and I took it out when attempting to proprietary resource.

104
00:07:52,670 --> 00:07:55,220
Maybe it's because we are internet.

105
00:07:57,340 --> 00:07:58,600
If I just truly loaded.

106
00:08:00,730 --> 00:08:04,900
No, no, no, no, no, actually, our throat is not running.

107
00:08:05,740 --> 00:08:07,600
And PM Dr.

108
00:08:08,570 --> 00:08:09,240
Okay.

109
00:08:10,070 --> 00:08:14,180
If this happens, if you don't get on your cell phone, well, whatever changes you make, that will

110
00:08:14,180 --> 00:08:16,280
not be reflected on the browser.

111
00:08:16,880 --> 00:08:24,050
So that is really important that you check that your server is running whatever component you have created.

112
00:08:24,050 --> 00:08:28,220
That component is important in the app drawer or not.

113
00:08:28,680 --> 00:08:30,500
So that is really, really important.

114
00:08:31,160 --> 00:08:36,260
It's the starting us out of what that does to give it just you a couple of seconds.

115
00:08:37,790 --> 00:08:42,710
Once her chores they're done for will move to the port on which the server is running.

116
00:08:44,880 --> 00:08:45,280
Okay.

117
00:08:45,990 --> 00:08:47,490
Okay, now it's running.

118
00:08:49,620 --> 00:08:50,160
It's running.

119
00:08:52,420 --> 00:08:53,920
OK, we are here.

120
00:08:55,120 --> 00:08:55,720
Let me talk.

121
00:08:58,490 --> 00:09:00,380
Just now when I type something.

122
00:09:02,140 --> 00:09:06,160
Or do we get something not to let us go to this?

123
00:09:07,600 --> 00:09:08,380
Components.

124
00:09:09,470 --> 00:09:10,750
And app component.

125
00:09:11,820 --> 00:09:13,110
You can see that is.

126
00:09:13,840 --> 00:09:14,190
Yeah.

127
00:09:15,750 --> 00:09:16,860
We are getting data.

128
00:09:17,430 --> 00:09:19,200
We are getting data, so.

129
00:09:21,410 --> 00:09:24,770
That means this type of column that will be read.

130
00:09:26,270 --> 00:09:31,610
And when I look at coloured people that are acting like, you see.

131
00:09:35,950 --> 00:09:42,910
The state did start to read and the state this a state is fired at a state of world because red is a

132
00:09:42,910 --> 00:09:49,750
valid name and we get all the data, we get all the data like according to the colors, we get all the

133
00:09:49,750 --> 00:09:53,320
areas and objects regarding the colors we get.

134
00:09:53,740 --> 00:09:55,720
That means our app is working fine.

135
00:09:56,020 --> 00:09:59,140
It's me type another like, invalid name.

136
00:10:01,090 --> 00:10:09,190
So it will show that the state to fall through, but it's not doing that.

137
00:10:09,660 --> 00:10:09,880
No.

138
00:10:09,880 --> 00:10:10,230
Why?

139
00:10:11,020 --> 00:10:11,860
And if pressure?

140
00:10:14,390 --> 00:10:18,200
It did start to fall and maybe some British.

141
00:10:19,080 --> 00:10:19,720
But right.

142
00:10:22,210 --> 00:10:23,530
I'm not getting any callers.

143
00:10:27,330 --> 00:10:28,170
He'll do that.

144
00:10:28,610 --> 00:10:30,660
I will take a look in the way it will be.

145
00:10:31,200 --> 00:10:34,230
It will be good if we check it in the UAE.

146
00:10:34,590 --> 00:10:41,670
So next we'll be creating the color component for what is what is that?

147
00:10:41,670 --> 00:10:44,580
Is that, first of all, let me create a section down here.

148
00:10:46,310 --> 00:10:55,070
So inside, like after this, we'll create another section, so section and this section would be for

149
00:10:55,070 --> 00:11:01,130
the poor showing the colors, OK, so I'll give it like right now it will be empty.

150
00:11:01,130 --> 00:11:05,600
We will create another component, which will mean more than a single color, and we'll import that

151
00:11:05,600 --> 00:11:06,440
component here.

152
00:11:06,770 --> 00:11:13,850
And with the help of that component, we'll be able to display all the colors related to the key word

153
00:11:13,850 --> 00:11:15,650
which you have searched for.

154
00:11:15,770 --> 00:11:17,780
That is what we are going to do next.

155
00:11:18,910 --> 00:11:23,110
So next, we are going to create another component, which will be known as single color.

156
00:11:23,410 --> 00:11:24,970
And we will work on it.