1 00:00:00,840 --> 00:00:08,910 OK, and once we can handle the errors now let's work with our list, the one that we're getting back 2 00:00:09,330 --> 00:00:10,930 from the new values. 3 00:00:11,700 --> 00:00:16,260 So right after the colors, I'm going to go with set list function. 4 00:00:16,530 --> 00:00:21,690 And of course, I'm going to update my state value list to the colors. 5 00:00:22,230 --> 00:00:24,230 Now, of course, it's not going to be an empty array. 6 00:00:24,540 --> 00:00:26,900 It is going to be an array of colors. 7 00:00:27,180 --> 00:00:29,430 And if you still need to cancel, like, please do so. 8 00:00:29,760 --> 00:00:32,720 But I already did that in the last video. 9 00:00:33,090 --> 00:00:40,260 So now of course, we will scroll down and where we have the section of colors, I would want to iterate 10 00:00:40,260 --> 00:00:41,610 over those colors. 11 00:00:42,000 --> 00:00:43,410 So I'm going to go with my list. 12 00:00:43,410 --> 00:00:47,370 So my state value and mapping over our look for two things. 13 00:00:47,700 --> 00:00:49,680 I would want to get the color. 14 00:00:49,990 --> 00:00:55,170 That's the name that I'm giving for every item that I have in my list. 15 00:00:55,180 --> 00:00:57,920 And also we will need a index. 16 00:00:58,410 --> 00:01:05,480 Now, as far as the return, I'm going to go with a single color component or single color component. 17 00:01:05,730 --> 00:01:09,050 And then since there is a list, I still need to have my key. 18 00:01:09,360 --> 00:01:16,290 So I'm going to go with that and remember how we passed in all the property from the item we used objects 19 00:01:16,290 --> 00:01:21,090 proper where we go with DataDot and then whatever here in the item. 20 00:01:21,330 --> 00:01:24,130 And lastly, I also would want to pass in the index. 21 00:01:24,540 --> 00:01:29,280 That's why I'm going to set up index prop and I will be equal to my index. 22 00:01:29,280 --> 00:01:35,340 And you'll see in a second why we're doing that now, just because I would want us to be on the same 23 00:01:35,340 --> 00:01:35,760 page. 24 00:01:36,030 --> 00:01:43,020 I'll also council log the color because that would want you to understand what values are we're looking 25 00:01:43,020 --> 00:01:45,320 for as far as the single color. 26 00:01:45,690 --> 00:01:52,790 So that should do it for now in the objets and remaining of the work we'll do in our single color. 27 00:01:53,070 --> 00:01:54,920 So let's navigate there. 28 00:01:55,020 --> 00:02:00,360 We have our single color component and there's three things that we're looking for. 29 00:02:00,660 --> 00:02:02,370 We're looking for our RGV. 30 00:02:02,710 --> 00:02:05,130 We're looking for the weight. 31 00:02:06,760 --> 00:02:14,920 I'm on the index, so these two are coming from that item are coming from that color, and then, of 32 00:02:14,920 --> 00:02:17,590 course, index is the one that I set up. 33 00:02:17,890 --> 00:02:19,080 So let me save. 34 00:02:19,500 --> 00:02:23,710 And we're now getting to a bigger no online go with hashtag. 35 00:02:23,710 --> 00:02:28,440 And then again, the fastest one will be two to two and then notice in my console. 36 00:02:29,170 --> 00:02:32,050 So this represents that item. 37 00:02:32,410 --> 00:02:40,720 And like I said, what we're looking for in a single color is this RGV, which is the Narey orders. 38 00:02:41,080 --> 00:02:44,490 It is the color values here and then also the wait. 39 00:02:44,860 --> 00:02:45,670 So wait. 40 00:02:46,580 --> 00:02:51,320 I'm just going to display, well, what is the actual percentage and again, we'll talk about these 41 00:02:51,320 --> 00:02:55,600 percentages at the very end because I'll show you with different values. 42 00:02:55,850 --> 00:02:58,340 So this is going to be displayed the weight. 43 00:02:58,730 --> 00:03:06,760 And as far as the RGV, well, I also would need it because I would need to set it up as my background. 44 00:03:07,070 --> 00:03:07,550 So in order. 45 00:03:07,610 --> 00:03:08,650 This is the actual color. 46 00:03:09,290 --> 00:03:16,340 So the reason why I'm looking for this RGV be prop that was passed in from the color well, because 47 00:03:16,370 --> 00:03:21,760 I would want to set my background to my single color component. 48 00:03:22,190 --> 00:03:26,120 And of course, index is an index which will use a little bit later. 49 00:03:26,390 --> 00:03:27,620 So hopefully that makes sense. 50 00:03:27,630 --> 00:03:30,200 We have an object with these properties. 51 00:03:30,230 --> 00:03:36,350 We're only interested in RGV, which is an array, and then the weight, which is just a value. 52 00:03:36,590 --> 00:03:43,190 And once we have that in place, of course we can navigate back to a single color and start working 53 00:03:43,190 --> 00:03:44,270 on our return. 54 00:03:44,660 --> 00:03:51,440 Now, I'm going to start by setting up right now my state value, which is going to be alert, which 55 00:03:51,440 --> 00:03:54,390 is going to be displayed once we copy something to the clipboard. 56 00:03:54,650 --> 00:03:57,080 So at the moment, again, it's not going to do much. 57 00:03:57,440 --> 00:04:00,710 There's just going to be a state value for alert and set alert. 58 00:04:00,710 --> 00:04:05,310 And we're going to go use state and by default alert will be false. 59 00:04:05,750 --> 00:04:07,040 So that's the way it is. 60 00:04:07,400 --> 00:04:16,490 And then since I would want to set up my background color, I will have to somehow turn that RGV the 61 00:04:16,490 --> 00:04:25,130 array into a string because we all use inline CFS to set it up as a color, because like I said, what 62 00:04:25,130 --> 00:04:32,060 I would want is for all of these little squares, I would want the color mãe to match whatever I have 63 00:04:32,300 --> 00:04:34,030 in the RGV. 64 00:04:34,430 --> 00:04:38,810 So in here when we could do is Konstantine BCG. 65 00:04:38,870 --> 00:04:41,350 So some kind of value and then RGV. 66 00:04:41,390 --> 00:04:42,400 That is my right. 67 00:04:42,410 --> 00:04:49,310 I would want to join it into the string and I would want to join it with Comus so every item will be 68 00:04:49,310 --> 00:04:51,080 separated by the comma. 69 00:04:51,350 --> 00:04:56,600 So of course if you want to log BCG, you will see that. 70 00:04:56,800 --> 00:04:59,330 And by the way, of course we need to have some kind of value here. 71 00:04:59,600 --> 00:05:04,610 You'll see that we have these RGV values and this is exactly what we're looking for. 72 00:05:04,940 --> 00:05:08,570 So now, of course, let's work on our actual return. 73 00:05:09,710 --> 00:05:17,750 So instead of console logging, I'm going to go here with an article I would want to add a class name 74 00:05:17,750 --> 00:05:23,490 of color, but later there's going to be one more functionality that I'll add here. 75 00:05:23,750 --> 00:05:29,970 That's why right away, when I'm setting up the class name, I'll set it up here as the template strand. 76 00:05:30,140 --> 00:05:36,140 Again, the moment doesn't make sense, but it will make sense in a second when we start checking our 77 00:05:36,140 --> 00:05:36,480 index. 78 00:05:36,800 --> 00:05:38,930 So let me just add here a color. 79 00:05:39,320 --> 00:05:45,470 And then like I said, I would want to add also the inline style because I would want to have that background 80 00:05:45,470 --> 00:05:45,790 color. 81 00:05:46,100 --> 00:05:51,980 So in here I go with style and I remember we needed to go back to the JavaScript. 82 00:05:52,190 --> 00:05:53,610 So we have double Cali's. 83 00:05:53,930 --> 00:06:02,750 And on the property that I'm looking for is background and color, and that is equal again to my template 84 00:06:02,750 --> 00:06:03,450 string. 85 00:06:03,740 --> 00:06:10,410 So let's go with Plectrum here and let's say that I would want to access the BCG, so I'll start with 86 00:06:10,470 --> 00:06:11,050 RGB. 87 00:06:11,270 --> 00:06:17,150 So of course that is the CSF property or I guess volume more correctly. 88 00:06:17,340 --> 00:06:25,040 So RGV function, um, inside of this AGIP function I would want to pass in the BCG value. 89 00:06:25,430 --> 00:06:29,240 So that string that I got from my right. 90 00:06:29,510 --> 00:06:34,910 And once you say, of course you will have an error because it should be here, a colon, because of 91 00:06:34,910 --> 00:06:36,470 course it is a JavaScript value. 92 00:06:36,800 --> 00:06:45,110 So now of course, if I add my favorite color, the orange one notice you'll get these squares again. 93 00:06:45,530 --> 00:06:48,380 Each and every object has the RGV in the RGV. 94 00:06:48,380 --> 00:06:50,030 I have those RGV values. 95 00:06:50,450 --> 00:06:54,740 And then what I could do is set up inline style. 96 00:06:55,100 --> 00:06:58,910 So the class name for color is just going to give general styles. 97 00:06:59,180 --> 00:07:06,000 But then that inline standard background color will make sure that each square has that unique color. 98 00:07:06,530 --> 00:07:13,310 Notice how I'm going with background color and I invoke the RGV function and then I pass in the value 99 00:07:13,550 --> 00:07:16,220 that I'm getting from the R.G. be. 100 00:07:16,370 --> 00:07:16,790 All right. 101 00:07:17,180 --> 00:07:22,970 OK, now with this in place, what we could do is set up the weight. 102 00:07:23,300 --> 00:07:26,270 So I would want to showcase what is the percentage here. 103 00:07:26,570 --> 00:07:32,480 And that's why instead of the article we go with, paragraph will add here a class because it has a 104 00:07:32,480 --> 00:07:37,100 little bit of styling where we're going to say percent and then value. 105 00:07:37,550 --> 00:07:41,600 And instead of the paragraph, let's go with wait, wait. 106 00:07:41,600 --> 00:07:44,420 And that will be equal to zero percent. 107 00:07:44,720 --> 00:07:48,650 So essentially I'll just add here percent as well, let's say it. 108 00:07:48,950 --> 00:07:53,450 And yep, it's going to be a little bit annoying where we have to keep on adding the values. 109 00:07:53,930 --> 00:07:58,460 I mean, probably I could have set it up as default, but I'll just live with that. 110 00:07:58,490 --> 00:08:03,620 So now this year now of course I have all these percent values as well. 111 00:08:04,130 --> 00:08:10,970 And then it's interesting, I would want to display the hex color so I wouldn't want to display the 112 00:08:10,970 --> 00:08:18,950 RGV and I'm getting instead I would want to display Hex and I'm going to go with class name and color 113 00:08:19,370 --> 00:08:20,030 value. 114 00:08:20,420 --> 00:08:24,610 And prior to that I use this RGV to hex. 115 00:08:25,100 --> 00:08:31,700 So if you navigate to utils, you'll find a function that I got from Stack Overflow. 116 00:08:31,940 --> 00:08:36,950 And as I said, this is one of those cases where I'm not going to go over the function because I would 117 00:08:36,980 --> 00:08:42,260 want you to feel comfortable using it without fully understanding what is happening. 118 00:08:42,710 --> 00:08:47,870 Just understand that this is a function that I just Googled How to convert RGB to Hex. 119 00:08:48,370 --> 00:08:54,680 And this is what I've got from this stack overflow where we pass in the values and at the end it spits 120 00:08:54,680 --> 00:09:03,020 back the R B to hex, meaning I pass in RGV values and I get back the hex and of course an important 121 00:09:03,020 --> 00:09:04,590 function in the utils. 122 00:09:04,920 --> 00:09:11,390 Now however, as I'm recording, I also notice something that I missed while I was building where if 123 00:09:11,390 --> 00:09:16,160 I open up my object, there's also a property of X.. 124 00:09:16,350 --> 00:09:17,620 So let me try this one out. 125 00:09:17,750 --> 00:09:19,850 If it doesn't work, it doesn't work fine. 126 00:09:20,070 --> 00:09:22,150 Then of course we can use our RGV tracks. 127 00:09:22,190 --> 00:09:25,310 If it doesn't work beautiful, then we'll just speed this up. 128 00:09:25,700 --> 00:09:29,930 So I'm going to try to access my hex on the inside of the paragraph. 129 00:09:29,930 --> 00:09:34,630 I'll just display the hex color, so let's see whether it works again. 130 00:09:34,640 --> 00:09:42,380 I'm going to go with my F one five zero five and unfortunately I'm not able to display this way. 131 00:09:42,710 --> 00:09:46,940 So let's try two things first and try to use this function. 132 00:09:47,300 --> 00:09:53,540 And the way this function works is we need to pass in the separate values. 133 00:09:53,780 --> 00:10:00,380 So I cannot just grab the RGV, which is my right, and then pass it into my RGV tracks. 134 00:10:00,780 --> 00:10:01,270 That's why. 135 00:10:01,280 --> 00:10:02,180 Let's try this way. 136 00:10:02,390 --> 00:10:06,680 So we're going to go with Hex and we're going to go with our RGB tracks. 137 00:10:07,370 --> 00:10:08,570 That's our function. 138 00:10:08,960 --> 00:10:12,720 And then I need to use this proper word instead of passing in the hall. 139 00:10:12,740 --> 00:10:17,940 All right, I'm going to go with that and then remember that R.G. be all right. 140 00:10:18,260 --> 00:10:18,690 Correct. 141 00:10:18,860 --> 00:10:20,240 That's what I'm passing in. 142 00:10:20,510 --> 00:10:22,100 So now let's see whether that works. 143 00:10:22,100 --> 00:10:26,120 And of course, I have a big, fat complaint because I use the same name. 144 00:10:26,270 --> 00:10:31,570 So let me call this hex color because I'll still try to do it one more way. 145 00:10:31,970 --> 00:10:34,030 So hopefully this works. 146 00:10:34,040 --> 00:10:35,690 So hopefully this function works. 147 00:10:35,900 --> 00:10:36,910 I mean, it should work. 148 00:10:37,310 --> 00:10:42,230 So we're going to go with F one five zero two five and there it is. 149 00:10:42,320 --> 00:10:44,540 Now I'm displaying that X color. 150 00:10:44,870 --> 00:10:45,970 So that's good. 151 00:10:46,470 --> 00:10:49,610 That means that this way for sure will work. 152 00:10:49,910 --> 00:10:55,430 So now let me try to set it up a little bit differently in the app just where we are essentially using 153 00:10:55,430 --> 00:10:58,010 the hex color that the library provides. 154 00:10:58,370 --> 00:11:04,970 So this is going to be a nice fallback if something goes bananas, if I'm not able to access that color. 155 00:11:05,150 --> 00:11:11,330 But I would want to try it one more way where at the moment I'm logging the color, but I'll change 156 00:11:11,330 --> 00:11:17,390 this around where I'm going to say that there's going to be some kind of color and that is equal to 157 00:11:17,390 --> 00:11:18,140 a color. 158 00:11:18,350 --> 00:11:22,630 And then Hex and I set up my variable right now. 159 00:11:22,850 --> 00:11:24,500 And of course, I can pass it in. 160 00:11:24,770 --> 00:11:25,420 And you know what? 161 00:11:25,730 --> 00:11:27,150 I'm just going to skip this part. 162 00:11:27,530 --> 00:11:29,330 Sorry, a little bit of detour. 163 00:11:29,600 --> 00:11:31,280 I'm going to say hex color. 164 00:11:31,280 --> 00:11:32,380 So that is my problem. 165 00:11:32,750 --> 00:11:38,780 And the reason for that is because I'm already looking for it and my single color and I'll set it equal 166 00:11:38,780 --> 00:11:41,840 to a color and an X. 167 00:11:42,240 --> 00:11:52,360 And now let's try to come to a log in a single color whether we have access to a X and line color and 168 00:11:52,360 --> 00:11:53,890 let's see whether it works again. 169 00:11:53,900 --> 00:12:01,160 I'm going to go back to the same color and I can access to this one, which is really cool. 170 00:12:01,460 --> 00:12:04,730 So now, of course, we have two ways how we can access that. 171 00:12:05,330 --> 00:12:07,040 You can either use the function. 172 00:12:08,180 --> 00:12:12,270 Or we can get the value that the library provides. 173 00:12:12,560 --> 00:12:17,100 So instead of looking for hacks, we're going to go for X color. 174 00:12:17,400 --> 00:12:20,220 Now, I'll leave this for your reference, just in case you need. 175 00:12:20,600 --> 00:12:28,280 Just keep in mind that once we have this set, of course, we can still display the hex color and narrative's. 176 00:12:28,610 --> 00:12:30,920 Now, let's keep on going. 177 00:12:31,190 --> 00:12:38,810 And one thing that I would want before we start working on the alert and before we start copy the value 178 00:12:38,810 --> 00:12:39,710 to the clipboard. 179 00:12:40,100 --> 00:12:48,140 I would also want to change the color value depending on the tent audition, because notice in here 180 00:12:48,140 --> 00:12:50,300 I can clearly see my color value. 181 00:12:50,600 --> 00:12:55,850 But once I get to a darker shades, of course it is harder and harder to see. 182 00:12:56,210 --> 00:13:03,470 So it wouldn't be nice if at the base color we would switch where in the beginning we have the dark 183 00:13:03,510 --> 00:13:10,940 values and then starting from the base will have the lighter values for the percentages as well as the 184 00:13:10,940 --> 00:13:11,500 hex color. 185 00:13:11,840 --> 00:13:14,900 And the only thing we need to do is check that index. 186 00:13:14,930 --> 00:13:22,190 That's the reason why in The Objets, I also passed in the index and in the single color. 187 00:13:22,430 --> 00:13:28,130 I'm just going to say, hey, listen, if the index has the value bigger than 10, because that's where 188 00:13:28,130 --> 00:13:32,920 I know is my base, then just add a different class. 189 00:13:33,200 --> 00:13:40,100 So that's why in here we were setting up everything in the template string where now I can simply say 190 00:13:40,340 --> 00:13:43,670 check the index if the index is bigger than 10. 191 00:13:44,090 --> 00:13:49,220 Then also I would want to add one more class and that class is color light. 192 00:13:50,390 --> 00:13:56,930 What just make sure that the paragraphs that I have are just going to be in lighter color. 193 00:13:57,500 --> 00:14:02,870 I'm going to navigate here and then I'll try with my color. 194 00:14:03,940 --> 00:14:13,870 And you should see that the first ones have the darker color and the moment index gets bigger, and 195 00:14:13,870 --> 00:14:19,660 then then of course, we have lighter colors because that way, of course, we can see it a bit better. 196 00:14:19,940 --> 00:14:21,250 And also, you know what? 197 00:14:21,250 --> 00:14:29,170 I think what we could do is add here a hashtag thing that is going to make a little bit more sense or 198 00:14:29,200 --> 00:14:29,630 you know what? 199 00:14:29,650 --> 00:14:36,820 We can construct a string over here that will have that hashtag because we'll have to copy and paste 200 00:14:36,830 --> 00:14:37,600 that value. 201 00:14:37,900 --> 00:14:39,640 So let me double check quickly something. 202 00:14:40,360 --> 00:14:42,610 Let me see what I'm getting back from the function. 203 00:14:42,910 --> 00:14:48,850 I think from the function, the RGV function I was getting right away, the color. 204 00:14:49,060 --> 00:14:52,300 And of course, in here they are so submit and yet notice. 205 00:14:52,510 --> 00:14:59,120 So if I'm using that stack overflow function, I right away have the hash tag a front. 206 00:14:59,530 --> 00:15:02,180 Now, if I'm using that hex color, then I don't. 207 00:15:02,590 --> 00:15:10,430 So it would be an awesome time to construct a new string over here because I will need to use that volume. 208 00:15:10,720 --> 00:15:16,420 So let me go here with CONSED and then I'm going to come up with a variable name, which is going to 209 00:15:16,420 --> 00:15:20,410 be hex value and that is equal to a template string. 210 00:15:20,980 --> 00:15:27,880 And in here we're going to go with interpellation and I'm going to add a hash tag and then we'll just 211 00:15:27,880 --> 00:15:29,640 place a hex color. 212 00:15:29,980 --> 00:15:35,180 And of course, instead of hex color, we're just going to go for hex value. 213 00:15:35,560 --> 00:15:41,080 So once we save, we should see the hashtag, of course, where we have the hex color. 214 00:15:41,320 --> 00:15:46,170 And also what's really cool is that we'll copy this back to the clipboard. 215 00:15:46,390 --> 00:15:49,590 So right away, have that hash tag as well. 216 00:15:49,630 --> 00:15:54,900 Again, if you want with Hex, if you want with the function, you're right away, the hash tag. 217 00:15:54,910 --> 00:16:01,630 But since I went the library route where I was getting the hex color from the library, that's why we 218 00:16:01,630 --> 00:16:02,980 had to do it manually. 219 00:16:03,250 --> 00:16:06,490 So in here, let's try it out one last time. 220 00:16:07,000 --> 00:16:08,520 And there it is. 221 00:16:08,530 --> 00:16:10,810 Now, of course, we have the hex color. 222 00:16:11,060 --> 00:16:18,880 So last thing that I want is functionality where we can copy the values to the clipboard. 223 00:16:19,210 --> 00:16:26,680 And once we click on the square, we also have this little alert which has copied clipboard and after 224 00:16:26,680 --> 00:16:28,870 three seconds it disappears.