1
00:00:00,750 --> 00:00:06,870
So now that we have configured our dashboard and utils, it's time to move it to a single color logistics

2
00:00:06,870 --> 00:00:08,550
and add code.

3
00:00:08,760 --> 00:00:14,090
But before we do that, just add hashtag before you do see Tweet 3B because that is not a colony.

4
00:00:14,550 --> 00:00:19,380
So just add the hashtag in here and let's see now just moving to a single color.

5
00:00:19,470 --> 00:00:25,400
The G6 and first step is to import you state because that would be using another component.

6
00:00:25,420 --> 00:00:26,640
So to you estate.

7
00:00:28,550 --> 00:00:31,570
And apart from your state, we'll also be needing you as effective.

8
00:00:34,000 --> 00:00:39,700
From the act now, we have imported these two components from a React module, and we'll also be importing

9
00:00:39,700 --> 00:00:41,170
at Origin B from our waters.

10
00:00:42,220 --> 00:00:47,560
My apologies, GBE 2x import Jimmy to Hex.

11
00:00:48,930 --> 00:00:49,800
But I Udall's.

12
00:00:50,040 --> 00:00:55,380
So these are two companies that will be needing in the area now, let's create a component that is going

13
00:00:55,380 --> 00:00:56,940
to be Konst single class.

14
00:00:58,170 --> 00:01:02,160
And since we are receiving data, we props in this from my dashboard.

15
00:01:05,220 --> 00:01:06,480
The structure that.

16
00:01:08,600 --> 00:01:13,700
So inside the parameters, let's structure the values that we're getting.

17
00:01:14,180 --> 00:01:15,830
First of them is the RGV.

18
00:01:17,030 --> 00:01:20,090
Apart from IGB, we are even getting odd weight.

19
00:01:22,010 --> 00:01:28,130
And we are even receiving index from our dashboard and index and then hex color.

20
00:01:31,460 --> 00:01:35,450
Now, add up Arrow and give it a written statement.

21
00:01:37,540 --> 00:01:38,960
Now we need to have.

22
00:01:39,220 --> 00:01:41,580
It should be exclusion or tax going on.

23
00:01:42,280 --> 00:01:50,230
Now we are going to use our state, so let's create a state of alert and a step function that is going

24
00:01:50,230 --> 00:01:53,920
to set our alert, which is going to be equal to your state.

25
00:01:54,160 --> 00:01:56,920
And the initial value is nothing but false.

26
00:01:57,580 --> 00:02:04,100
Because initially, there would be no alerts now that we have configured our first date in our use state

27
00:02:04,100 --> 00:02:07,550
took up that this certainly going to do inside a written statement.

28
00:02:07,570 --> 00:02:10,870
We are going to create an article of class name color.

29
00:02:11,230 --> 00:02:14,020
So let's just create an article.

30
00:02:16,850 --> 00:02:20,150
And give it the last name of.

31
00:02:25,720 --> 00:02:33,070
Well, just put up color, the color that we are getting now inside this color body going to do is that

32
00:02:33,070 --> 00:02:42,880
they give it a dollar and if index, and that should be always greater than 10 and percent and correlate.

33
00:02:47,130 --> 00:02:52,230
Not supposed to be in backpacks, so just select all of this and really putting a backpacks in it.

34
00:02:56,890 --> 00:03:01,090
OK, so we have added back take back techs and all error has vanished.

35
00:03:01,720 --> 00:03:02,830
Now they're here to stay.

36
00:03:06,710 --> 00:03:12,110
And it should be a background color, as you might remember, this is in line Sterling, so give a double

37
00:03:12,470 --> 00:03:18,890
set of curly braces and a background and will give it a background that is going to be equal to.

38
00:03:21,170 --> 00:03:22,730
Um, and in for went.

39
00:03:22,850 --> 00:03:26,090
But before we set up another piece of state in an application.

40
00:03:26,390 --> 00:03:28,110
So let it be like that.

41
00:03:28,460 --> 00:03:32,810
And let's close the article now for the background.

42
00:03:32,810 --> 00:03:37,820
Color will also be setting up another functionality into our app that is going to be equal to let's

43
00:03:38,450 --> 00:03:39,200
after.

44
00:03:41,230 --> 00:03:50,530
You said will be creating a contest and let's name in BCG, and it is going to be equal to the joint,

45
00:03:50,530 --> 00:03:53,740
so basically we are putting up commas in our area.

46
00:03:54,160 --> 00:03:57,190
So you withdraw during and after this.

47
00:03:57,190 --> 00:04:12,550
What I going to do is that we collect RGV, as you might recall, AGP 2x and passing it at X and G B.

48
00:04:13,330 --> 00:04:19,930
And after this, we will be adding another piece and that is going to be const x value.

49
00:04:20,950 --> 00:04:28,270
That is hexadecimal value, which is going to be equal to vertex and hashtag and a dollar sign.

50
00:04:28,990 --> 00:04:33,700
And instead, the dollar will actually basis, and this codebase is going to contain a hex color.

51
00:04:35,540 --> 00:04:41,570
So, no, just hit save and the name that they're going to give out background is this big.

52
00:04:42,050 --> 00:04:52,460
So remove these two and after this, very just give it a background color off again back six GB and.

53
00:04:54,210 --> 00:04:57,580
Then a dollar sign and inside the calibrated but a b c g.

54
00:04:58,360 --> 00:05:00,510
OK, so we have given it to our state.

55
00:05:01,050 --> 00:05:07,500
No, inside this article, we are going to set up two paragraph elements and an alert with a paragraph

56
00:05:07,500 --> 00:05:07,860
element.

57
00:05:07,870 --> 00:05:13,170
So the one of the paragraph element is going to state of the percentile of weight and the other is going

58
00:05:13,170 --> 00:05:14,880
to give it hex values.

59
00:05:15,510 --> 00:05:21,080
And this article is responsible for showing its style and the weight and taste.

60
00:05:21,090 --> 00:05:25,650
So inside this article, we are having two paragraph elements, so let's clear the paragraph element

61
00:05:25,650 --> 00:05:28,350
and give it a class name of present value.

62
00:05:32,670 --> 00:05:37,050
And then just close it, and this is going to hold up our weight.

63
00:05:40,040 --> 00:05:46,040
Text of how much rain that we have and a present sign, and after this paragraph 11, they're going

64
00:05:46,040 --> 00:05:52,200
to have another paragraph element and this is going to be a plus name value that is going to display

65
00:05:52,200 --> 00:05:53,620
our users the value of color.

66
00:05:57,520 --> 00:06:03,700
And just close it now it is going to hold up her value, so just put a color hex value.

67
00:06:07,530 --> 00:06:08,270
Now had save.

68
00:06:09,570 --> 00:06:15,060
Now, even have the property or the functionality not have to copy one particular name of color into

69
00:06:15,060 --> 00:06:15,870
a clipboard, right?

70
00:06:16,170 --> 00:06:22,710
So for that purpose, let's add on functionality into our article and we'll give it to Endlich.

71
00:06:23,880 --> 00:06:28,440
And then again, and our function now inside is out of function.

72
00:06:28,440 --> 00:06:34,800
What we're going to have is that whenever a user clicks on one particular article of color issue or

73
00:06:34,800 --> 00:06:37,380
he or sesion, he or she should be able to copy it.

74
00:06:37,800 --> 00:06:40,710
So just properly basis and we'll be setting alert.

75
00:06:41,760 --> 00:06:47,520
So what this alert is going to state is that OK, the color has been copied in the app, so alert equals

76
00:06:47,520 --> 00:06:48,000
to a true.

77
00:06:48,920 --> 00:06:56,060
And put up a semicolon and will be using the default properties of reactor, navigate to the clipboard

78
00:06:57,110 --> 00:06:59,750
and inside the clipboard to just write text.

79
00:07:01,350 --> 00:07:03,300
And I tax, which is going to be equal to.

80
00:07:05,680 --> 00:07:06,430
Hex value.

81
00:07:09,230 --> 00:07:12,620
Now we have said it about until, like functionality into Iraq now hit safe.

82
00:07:13,040 --> 00:07:18,890
Now, apart from this, what will do is that after the second paragraph element will be setting up a

83
00:07:18,890 --> 00:07:19,220
alert.

84
00:07:21,090 --> 00:07:24,570
So this is, again, a GSX expression and alert.

85
00:07:25,890 --> 00:07:26,910
It does a lot.

86
00:07:35,030 --> 00:07:43,880
Now, if alert and level present again, if alert is true, then what we want is that AP class name

87
00:07:44,930 --> 00:07:52,280
equals to alert should shout out at a user that OK, it has been copied into your application or in

88
00:07:52,280 --> 00:07:52,940
their clipboard.

89
00:07:53,980 --> 00:07:54,490
Alert.

90
00:07:55,370 --> 00:07:57,470
And it would give a shout out that.

91
00:07:59,410 --> 00:07:59,890
Copy.

92
00:08:01,320 --> 00:08:02,040
The clipboard.

93
00:08:06,620 --> 00:08:13,670
Now just hit save, and most of our app is done, except that we have and still used a use effect and

94
00:08:13,670 --> 00:08:15,740
we are yet to export a single color.

95
00:08:16,580 --> 00:08:18,620
So just export for nothing will go to.

96
00:08:28,870 --> 00:08:34,480
OK, so we have exported it now, it's time to use the fact, OK, so use of our talk should only be

97
00:08:34,480 --> 00:08:38,830
called up once when a component is being rendered.

98
00:08:40,090 --> 00:08:43,750
So let's just put up a use it or tuck into place.

99
00:08:44,680 --> 00:08:48,310
So, OK, we'll give it to use the fact.

100
00:08:49,900 --> 00:08:52,600
And it is going to take up, you know, values.

101
00:08:56,970 --> 00:09:03,390
Now, let's create a concert time, which is going to be equal to said time out.

102
00:09:04,660 --> 00:09:09,910
Which, then again, is going to take up a function and it is going to return.

103
00:09:11,180 --> 00:09:11,900
Set alert.

104
00:09:14,710 --> 00:09:16,150
Which is equal to false.

105
00:09:18,290 --> 00:09:20,120
And once it falls.

106
00:09:22,410 --> 00:09:25,560
OK, so right after this, we're just transferred another.

107
00:09:30,630 --> 00:09:32,530
So take them out, said Alert.

108
00:09:32,550 --> 00:09:35,630
It's true and said a lot should be called upon.

109
00:09:35,780 --> 00:09:39,900
Now after this, they will give it to Eddie and put up alert in it.

110
00:09:42,500 --> 00:09:46,280
So where are we making a mistake so that they're getting a landing?

111
00:09:46,700 --> 00:09:48,890
OK, so this should be a inside.

112
00:09:54,410 --> 00:09:54,950
So I'm not.

113
00:09:56,630 --> 00:10:01,430
So what it is going to do is that whenever they are going to call to use effect.

114
00:10:04,930 --> 00:10:10,000
So now we have added everything that I have needs, except the use effect, so that's what we'll do.

115
00:10:10,690 --> 00:10:14,740
So what we do is that we'll be adding you as a factor.

116
00:10:16,710 --> 00:10:25,140
And we wanted to recall every time there's a change in our alert, but before we do that, I just it

117
00:10:25,140 --> 00:10:29,250
should be square brackets, not curly brackets.

118
00:10:29,460 --> 00:10:36,690
So put up spare baguettes in it and let's say and I use it, I took it should be called up every time

119
00:10:38,250 --> 00:10:40,170
we are changing, but I note.

120
00:10:44,660 --> 00:10:49,280
Now what it is going to do, it is going to create a contest and it is going to be like time out.

121
00:10:51,640 --> 00:10:55,540
Which should be cool to set timeout.

122
00:11:00,160 --> 00:11:04,960
And what it should do is that it should change the value of a state.

123
00:11:06,480 --> 00:11:12,300
Offer alert components, so we'll just set alert to vehicle to fires because every time a user clicks

124
00:11:12,300 --> 00:11:14,820
on alert, it should be turned into two.

125
00:11:15,360 --> 00:11:16,530
So that's what we're doing.

126
00:11:16,530 --> 00:11:20,190
We are putting up our alert to be able to fold.

127
00:11:21,090 --> 00:11:24,930
So set alert is be is going to be turned into fold after this.

128
00:11:27,700 --> 00:11:28,720
Semicolon after it.

129
00:11:30,100 --> 00:11:34,660
Now what they're going to do is that, OK, we are getting a learning error and was that because we

130
00:11:34,660 --> 00:11:35,440
haven't put up a.

131
00:11:36,780 --> 00:11:42,900
Out in front of it now after this, what we'll do is there clear time out, so let's just clear timeout

132
00:11:43,050 --> 00:11:43,680
after this.

133
00:11:44,100 --> 00:11:52,080
So I read it on the chin and is going to take the function and this is going to be clearing our timeout.

134
00:11:53,750 --> 00:11:57,150
Clear timeout and what clear?

135
00:11:57,170 --> 00:11:58,160
It's a climate.

136
00:12:00,810 --> 00:12:04,290
So we have added code, OK, it is clear timeout.

137
00:12:05,250 --> 00:12:08,250
So what is missing, why are we getting this error?

138
00:12:08,850 --> 00:12:10,590
Let me just check one more time.

139
00:12:26,930 --> 00:12:28,950
OK, so we are finished with our application.

140
00:12:29,210 --> 00:12:30,770
Let's just take a look at that up.

141
00:12:33,620 --> 00:12:33,810
The.