1
00:00:00,640 --> 00:00:03,960
OK, so now let's go ahead and map everything.

2
00:00:03,970 --> 00:00:06,850
No map every like whatever the data we had.

3
00:00:07,280 --> 00:00:15,160
So let's go to the abductees file and let's map the data and let's bring out everything and let's import.

4
00:00:15,160 --> 00:00:18,760
First of all, let's import the single color component.

5
00:00:19,450 --> 00:00:20,800
We have not yet important it.

6
00:00:20,800 --> 00:00:23,800
So import and single color.

7
00:00:25,800 --> 00:00:28,120
Single colour from single color.

8
00:00:28,270 --> 00:00:29,320
Cool, cool, cool, cool.

9
00:00:30,100 --> 00:00:35,500
So now what we'll do is we'll go here, this section right here.

10
00:00:36,220 --> 00:00:41,970
So this we already created how this we have created just for the single color, like we advanced, like

11
00:00:41,980 --> 00:00:43,960
created this so.

12
00:00:45,240 --> 00:00:51,060
First of all, let me give it a class name or last name would be Carlos.

13
00:00:52,260 --> 00:00:54,540
Because this these are the colors.

14
00:00:55,410 --> 00:01:01,110
So inside this will return our single component.

15
00:01:01,560 --> 00:01:08,850
So before that, we will use the map function because we are going to map the data one by one, each

16
00:01:08,850 --> 00:01:09,690
by each.

17
00:01:10,080 --> 00:01:12,090
So for that, we'll be using JavaScript.

18
00:01:12,090 --> 00:01:15,030
So that's why I'm using this curly braces.

19
00:01:15,390 --> 00:01:18,180
Inside this, I will map the data one by one.

20
00:01:18,660 --> 00:01:20,220
Before that, we use the map function.

21
00:01:20,220 --> 00:01:21,900
Now, what are we going to map?

22
00:01:22,170 --> 00:01:23,610
We are going to map this.

23
00:01:24,730 --> 00:01:25,480
This list.

24
00:01:26,340 --> 00:01:32,130
You see this list right here, because this is the list which will give us all the data, all the colors

25
00:01:32,130 --> 00:01:35,700
related to our search keyword will be stored in this list.

26
00:01:36,150 --> 00:01:38,550
So that is what we are going to map.

27
00:01:38,760 --> 00:01:41,250
So let us go and map the data.

28
00:01:42,870 --> 00:01:43,810
Inside this.

29
00:01:45,900 --> 00:01:49,670
Curly braces will write list dark map.

30
00:01:50,130 --> 00:01:53,730
We are mapping this, so it expects a function.

31
00:01:54,210 --> 00:01:56,700
So what is the argument which we are passing?

32
00:01:56,700 --> 00:01:59,960
Is the color not colored?

33
00:02:00,600 --> 00:02:09,010
And we are also passing the Index Index Value Index and what this will return.

34
00:02:09,030 --> 00:02:13,590
Is this inside the skull says what are we going to let on?

35
00:02:14,490 --> 00:02:17,040
So then we'll write the written statement.

36
00:02:17,040 --> 00:02:25,350
So that will be written and we will return a component of GSX.

37
00:02:25,710 --> 00:02:29,820
So that's why we will use this parenthesis and inside to spell it.

38
00:02:29,820 --> 00:02:32,670
This is we will return a single color component.

39
00:02:32,760 --> 00:02:36,360
All right now, we will write the single conduct.

40
00:02:38,680 --> 00:02:42,280
Single color component.

41
00:02:42,880 --> 00:02:47,680
And that's all this is our single color component doses that are done.

42
00:02:48,040 --> 00:02:51,580
But now we can't rely on it just like that.

43
00:02:51,610 --> 00:02:54,920
We have created that component and you all know to be a part.

44
00:02:54,950 --> 00:03:01,540
Some of the props here, do you see that are for profit, that are to be weight index and X color?

45
00:03:01,870 --> 00:03:04,400
So that needs to be given some value.

46
00:03:04,420 --> 00:03:04,810
OK.

47
00:03:05,350 --> 00:03:07,990
So the the props needs to be parsed.

48
00:03:07,990 --> 00:03:11,830
OK, inside this component, the protein needs to be passed.

49
00:03:12,260 --> 00:03:14,980
So let's just go ahead and pass props.

50
00:03:16,720 --> 00:03:22,030
First of all, let me just give the key, because in this key is required without the key, it will

51
00:03:22,030 --> 00:03:26,710
not be able to differentiate or undermine what is and which Canada.

52
00:03:26,710 --> 00:03:30,710
So Index will be the key index value.

53
00:03:30,760 --> 00:03:31,760
Generally, the key?

54
00:03:31,790 --> 00:03:34,420
OK, now we will use the color.

55
00:03:34,640 --> 00:03:38,410
Now what color is, is the written word.

56
00:03:38,530 --> 00:03:44,380
What are the colors which are daunting so that we need to like this structure, the colored object?

57
00:03:44,890 --> 00:03:49,330
So for that, I'll use the calibrated and then I will do these structures.

58
00:03:49,810 --> 00:03:56,260
So we will use the spread operator to a operator is starts one, two and three three dot and after that,

59
00:03:56,260 --> 00:03:57,340
the name of the object.

60
00:03:59,250 --> 00:03:59,640
Color.

61
00:04:00,600 --> 00:04:04,360
And next, we will ride the index.

62
00:04:04,380 --> 00:04:12,570
Now what is the index so we can also ride index by in the spirit operator that like this index, but

63
00:04:12,960 --> 00:04:13,980
we can ride like this.

64
00:04:13,980 --> 00:04:23,760
Also, we'll make the index equal to and inside this that is like GSX or JavaScript, but they're going

65
00:04:23,760 --> 00:04:25,590
to be index.

66
00:04:26,850 --> 00:04:27,240
OK.

67
00:04:28,620 --> 00:04:29,190
Fair enough.

68
00:04:29,430 --> 00:04:35,640
So far, so we're now what we'll do is we'll return the hex color now, hex color and really, really

69
00:04:35,640 --> 00:04:40,680
important because that is what that is, what we'll be copying and we'll be displaying.

70
00:04:41,100 --> 00:04:43,350
So now we'll do Hex.

71
00:04:45,430 --> 00:04:48,460
Color is equal to.

72
00:04:50,110 --> 00:04:52,490
Coloured Dark X.

73
00:04:53,380 --> 00:04:58,110
Now, let me just say it, so it will beautify my component.

74
00:04:58,490 --> 00:05:05,200
So yeah, one more thing if you want to like format your code automatically so you can just download

75
00:05:05,200 --> 00:05:06,220
this extension.

76
00:05:06,250 --> 00:05:12,590
You can just install this extension, which is let me assure you, that extension is prettier.

77
00:05:14,610 --> 00:05:15,780
I use that on only.

78
00:05:18,320 --> 00:05:20,100
This one word format.

79
00:05:20,210 --> 00:05:23,270
This is a really, really beautiful extension.

80
00:05:23,450 --> 00:05:30,700
What it does is every time when you see will fail, so it automatically formats and like effectors,

81
00:05:30,710 --> 00:05:33,570
the code and it looks so beautiful and oranges.

82
00:05:34,300 --> 00:05:35,450
Is let me go back.

83
00:05:36,360 --> 00:05:43,070
So that's why when I say before saying it was sky go and when I saved it, so it came back to it like

84
00:05:43,070 --> 00:05:46,020
it and garden and all that and then got all these in order.

85
00:05:46,560 --> 00:05:48,980
So that is what we have done on save.

86
00:05:50,330 --> 00:05:56,120
Now, let us go and give some styling to this, this entire section that is the colored section.

87
00:05:56,960 --> 00:06:00,750
So let me go to the next door to the CSIS file.

88
00:06:03,600 --> 00:06:08,370
And here I will write some cases for the close.

89
00:06:09,810 --> 00:06:10,350
So.

90
00:06:12,520 --> 00:06:22,510
For the collards, I invite t o scholars and I'll give some styling to the scholars plus.

91
00:06:24,280 --> 00:06:28,180
First of all, we are giving our height, so there will be.

92
00:06:28,840 --> 00:06:30,510
Let me just first of all, run.

93
00:06:31,740 --> 00:06:34,530
And see how things are going.

94
00:06:36,000 --> 00:06:36,360
And.

95
00:06:39,160 --> 00:06:40,690
You see, for what is running.

96
00:06:42,200 --> 00:06:43,130
It's stunning.

97
00:06:44,570 --> 00:06:50,120
OK, in ordering you to import UI inside where?

98
00:06:52,370 --> 00:06:52,820
This.

99
00:06:54,430 --> 00:06:57,640
Oh, my God, why are you important dates?

100
00:06:58,420 --> 00:07:01,060
You don't need to be to have sex.

101
00:07:02,550 --> 00:07:03,560
On on, on on.

102
00:07:12,830 --> 00:07:18,470
I admit the House is not going to find a way to hacks should be.

103
00:07:22,020 --> 00:07:24,990
And you too had already imported from the.

104
00:07:27,160 --> 00:07:30,010
OK, I've used this opportunity.

105
00:07:30,700 --> 00:07:34,690
OK, so this capital t should be used and also.

106
00:07:37,890 --> 00:07:38,820
They're not saying it.

107
00:07:42,230 --> 00:07:46,250
Now, let me just go back to the mine.

108
00:07:47,150 --> 00:07:47,830
Uh.

109
00:07:50,260 --> 00:07:50,740
The.

110
00:07:53,520 --> 00:07:56,300
Oh, things are going OK.

111
00:07:56,330 --> 00:08:01,980
You can see we are getting the colors and we are also getting this hex code and we are getting the percentage,

112
00:08:02,520 --> 00:08:04,370
but it's not showing the percentage sign.

113
00:08:04,380 --> 00:08:10,170
Maybe just we missed out the percentage sign of can we'll pull back and you can see that our key is

114
00:08:10,170 --> 00:08:12,750
to every color and when and when we.

115
00:08:14,030 --> 00:08:17,090
Like any of it, it's not throwing us.

116
00:08:18,190 --> 00:08:18,540
Thank.

117
00:08:19,670 --> 00:08:23,120
It's not forcing us to copy him right now.

118
00:08:25,060 --> 00:08:28,600
OK, and maybe maybe we need to work on it, to work on it.

119
00:08:29,140 --> 00:08:31,180
OK, so now we'll do it.

120
00:08:31,540 --> 00:08:33,430
Let me throw it for.

121
00:08:36,200 --> 00:08:37,120
Well, OK, I got.

122
00:08:38,800 --> 00:08:41,230
Right now, the we close this.

123
00:08:42,890 --> 00:08:44,090
Competing, OK.

124
00:08:45,130 --> 00:08:47,350
We'll work on it next.

125
00:08:47,570 --> 00:08:50,770
We'll go ahead and provide some styling to.

126
00:08:52,820 --> 00:08:53,390
Who this?

127
00:08:56,450 --> 00:09:04,700
Components like this section, close scrutiny next door to free access, and it will provide some styling.

128
00:09:06,360 --> 00:09:08,970
So that will be colored glass.

129
00:09:11,460 --> 00:09:11,910
No.

130
00:09:14,860 --> 00:09:20,560
Let's provide the class here, and the class would be colors.

131
00:09:21,070 --> 00:09:24,340
Oh, I'm thinking, what color should we give?

132
00:09:26,280 --> 00:09:27,630
That's called.

133
00:09:28,950 --> 00:09:29,730
And.

134
00:09:31,480 --> 00:09:34,630
What should we give, most of all, let me give the heart.

135
00:09:36,120 --> 00:09:37,170
And the minimum.

136
00:09:39,670 --> 00:09:49,170
Height should be calculated according to the width of the screen that should be.

137
00:09:50,650 --> 00:09:54,010
But it would be if you hide and.

138
00:09:56,290 --> 00:09:57,640
Maybe 100 pixels.

139
00:09:58,710 --> 00:09:59,250
Oh, 100.

140
00:10:00,250 --> 00:10:08,740
Next, we'll be displaying and because right now, if you go to the browser and see they are, they

141
00:10:08,740 --> 00:10:10,360
are not in the grid.

142
00:10:10,540 --> 00:10:11,970
They are in the roadways.

143
00:10:12,290 --> 00:10:13,660
I don't want to, not always.

144
00:10:13,660 --> 00:10:16,000
I want in the column by the grid format.

145
00:10:16,480 --> 00:10:19,180
So that is what I wondered in the grid format.

146
00:10:19,240 --> 00:10:21,010
So that is what I want.

147
00:10:22,620 --> 00:10:31,650
So right now, what I'll do is I'll provide grid for display and grid.

148
00:10:33,060 --> 00:10:37,410
So now I'm going to see you and I go back here.

149
00:10:43,260 --> 00:10:44,910
That some.

150
00:10:46,530 --> 00:10:46,860
Long.

151
00:10:47,930 --> 00:10:53,080
Because I have not given the great template yet, so that is my story.

152
00:10:53,330 --> 00:10:54,890
If I knew we had arrived.

153
00:11:00,560 --> 00:11:09,270
OK, it's working, but let me give the great light template, so inside after this cleared out will

154
00:11:09,270 --> 00:11:12,750
do is that we'll give the grade.

155
00:11:13,830 --> 00:11:14,760
Template.

156
00:11:17,320 --> 00:11:21,730
Two columns and that will be repeated.

157
00:11:22,240 --> 00:11:24,820
And inside this repeat, that will be part of it.

158
00:11:30,450 --> 00:11:41,670
But next, there will be a maximum and minimum value to Minimax Min Max, and it will have like I've

159
00:11:41,670 --> 00:11:47,250
already decided that have already like checked how much how would look for that time next to twenty

160
00:11:47,250 --> 00:11:48,870
three point thirty three pixels?

161
00:11:50,110 --> 00:11:51,640
And that is one.

162
00:11:53,040 --> 00:11:53,490
Thank you, ma'am.

163
00:11:54,970 --> 00:12:02,500
Next, we'll do the same for the great template rules this we have done for the great template columns

164
00:12:02,560 --> 00:12:08,440
and all we'll do for the great template rules or we'll type coded.

165
00:12:09,720 --> 00:12:13,350
Template, not for long to me, roars.

166
00:12:14,290 --> 00:12:17,770
And here it will be repeat.

167
00:12:17,890 --> 00:12:20,320
And inside this, it will be part of it.

168
00:12:21,450 --> 00:12:22,200
And.

169
00:12:25,210 --> 00:12:29,800
They may ask this, but there will be some things different, so there will be minimax.

170
00:12:30,460 --> 00:12:39,640
And inside this will pass some of the things, so that will be 96 pixels and 96 pixels.

171
00:12:40,220 --> 00:12:41,920
And one of.

172
00:12:43,750 --> 00:12:44,980
That is what it is.

173
00:12:46,430 --> 00:12:51,150
And I save it, and I go back to my project.

174
00:12:53,140 --> 00:12:55,330
Spin things are not working.

175
00:12:58,730 --> 00:13:01,820
OK, why this is not working CSIS.

176
00:13:07,020 --> 00:13:08,610
Maybe we have given.

177
00:13:11,760 --> 00:13:19,960
Let me give some noble thesis here, who and the do or I can give it some more time.

178
00:13:19,980 --> 00:13:21,150
There's no need for it.

179
00:13:21,720 --> 00:13:23,040
So we'll right here.

180
00:13:24,780 --> 00:13:26,550
Global sea assets.

181
00:13:29,300 --> 00:13:30,760
Oh, yeah.

182
00:13:31,150 --> 00:13:37,340
Commenting, Prince, yes, is a different global CSIS.

183
00:13:38,480 --> 00:13:44,210
And I've come commented that line, and now I'll give the normal CSIS so that we are giving for the

184
00:13:44,210 --> 00:13:54,710
section, OK, for the sections that is over, there is a weight of 90, if you will, with nine TV

185
00:13:54,710 --> 00:13:55,760
over and.

186
00:13:56,860 --> 00:14:05,080
There's a margin so top and bottom, the margin is zero and left and right, the margin is auto.

187
00:14:06,890 --> 00:14:07,700
That means equal.

188
00:14:08,650 --> 00:14:17,020
Next, we we are having a maximum Brent or Max with inside this, we have that.

189
00:14:18,950 --> 00:14:20,930
And the max is Max.

190
00:14:23,280 --> 00:14:23,670
Event.

191
00:14:24,610 --> 00:14:25,660
I want to see it.

192
00:14:26,820 --> 00:14:32,160
No, and I go to the browser, Bill.

193
00:14:32,400 --> 00:14:35,760
We don't see any reflection on who we.

194
00:14:36,720 --> 00:14:38,130
Importing this.

195
00:14:45,640 --> 00:14:47,890
Ryan Gosling follows.

196
00:14:53,050 --> 00:14:55,630
OK, there needs to be more CSIS.

197
00:14:57,000 --> 00:14:59,310
We need to provide some more serious, sincere.

198
00:15:00,580 --> 00:15:02,500
So for that.

199
00:15:02,740 --> 00:15:05,290
Let me see now.

200
00:15:05,530 --> 00:15:12,070
OK, so I added some extra courses here, but I do not want to deal with that because that's a normal

201
00:15:12,070 --> 00:15:14,920
course, so I will just review it once, whatever I did.

202
00:15:15,520 --> 00:15:20,980
But I did some form families and all that is OK, but here I did.

203
00:15:20,980 --> 00:15:27,340
Some like this letter spacing next to information and the line at the line height and the font size,

204
00:15:27,340 --> 00:15:28,540
which is really, really important.

205
00:15:28,540 --> 00:15:31,240
So that was also affecting our product.

206
00:15:31,240 --> 00:15:37,910
So I have like declared the font size here to the 81, the tools and the bags.

207
00:15:38,350 --> 00:15:42,260
And this is the media screen is the minimum with four 800 pixels.

208
00:15:42,310 --> 00:15:43,630
This is the font size.

209
00:15:44,200 --> 00:15:45,850
So that means.

210
00:15:47,800 --> 00:15:54,430
For the laptop, so that is what I do, and this global CEO says we have already seen and this all we

211
00:15:54,430 --> 00:15:55,270
have already done.

212
00:15:55,980 --> 00:15:59,320
For now, let us go to our browser.

213
00:16:00,870 --> 00:16:01,830
And check.

214
00:16:04,120 --> 00:16:09,520
Now looks good, but still, we are not getting the copy to pay for functionality.

215
00:16:10,240 --> 00:16:13,180
So why is that happening?

216
00:16:16,010 --> 00:16:18,450
Oh, Blue, OK.

217
00:16:18,550 --> 00:16:24,850
Everything is working, so we are left out with two things that this person did sign is not here and

218
00:16:24,850 --> 00:16:29,260
we are not able to like copy to clipboard, but that will do in the next video.