Beautiful.
Now, the last thing that I would want is to add functionality to copy my hex value to the clipboard,
and since I also want to display to the user that the value has been copied to the clipboard, I'll
start by setting up the alert so I have my alert set value.
And right after the paragraph, I'm going to set up my conditional rendering where I'm going to say
if alert is true, then I would want to display a paragraph and then I'll add a class name here of alert
and line.
Inside of this paragraph.
I'm just going to say copied to reboard.
That's it.
OK, beautiful.
Now of course, it's going to be hidden because alert is false, but as always, we can still test that
out.
So maybe let's set this up as true just so we know for sure that we can see that.
Let's go hashtag AF1 from zero to five and there is not all of them.
Have this copy to the clipboard because, of course, alert is true.
So let me set this up to a false and now I would want to set up on click on the article.
Please keep in mind one thing where technically you can set up some kind of button or something like
that.
But in my case I just went with the whole square.
So once you click on a square, then you'll copy to the clipboard.
If you want, you can set up a button that, for example, appears as you're hovering or sky is the
limit.
You can really do whatever you want.
I just went with the whole square where I once I click on a square notice, I have copied the clipboard
and then of course I have that value in the clipboard as well, so I can just use this rather beautiful.
So now let's navigate back.
And of course, we would want to set up on click on the whole article.
So we're going to go here with UNCLICK and this is just the show that you can add those limitlessness.
Wherever you want or in this case, I'm looking on the article and now I would want to run my function
now, if you want, you can set it up as a reference.
In my case, however, I'm just going to go here and drop everything in line.
So first I'll set my alert to be true.
So that way it will display that, yeah, we copy this value to the clipboard.
So of course our alert will show up and by default it is false.
And second, if you're wondering how you can copy this value, should the clipboard.
Well, we just need to go back to jouster planned.
We go with navigator object, then we look for Clybourn property and there is a method by the name of
Wright and you just need to decide what you would want to passion.
So in my case, I'm looking for either hex value or hex.
That's up to you, since I'm already using hex value in here in a paragraph, I'm just going to pass
in my hex value, the one that I was struggling to find from the library.
So now of course, we can just start I have color generator setup and then again, I know it might be
a little bit boring, but it is the fastest color that I can generate and I go with my color.
So now what is going to happen that once we click noticed we have copied to the clipboard.
So if we navigate here, there is our color, so now we can use it.
So the last thing that I would want is to somehow hide it after three seconds because I think it is
just a better look.
If we can go here and then all of them have this copy that the clipboard would be nice, that essentially
after three seconds, it goes away.
So what we could do is set up a use of.
Where I say each and every time we value for a lot changes, more than I'm going to do something more
is going to be not something that is just going to be setting up the timeout to clear the value formula.
Some say once the alert changes, then I would want to run my set timeline so that time out is going
to be looking for two things for the callback function, as well as in how long it needs to run.
Now, remember one thing, though, I would want to clear out as well.
And since I have covered that already in plenty of projects as well as the Turrill, I'm not going to
go into details.
All right.
Or just set up my cleanup function.
So the set time out will return a value.
So time out here.
And that is equal to my set time out and on my callback function, of course, first.
And then in how long?
I don't know, three seconds, one second.
Whatever you want.
And then let's set all art back to false so of passing the false and then every time I click.
I also would want to clean it up.
So I'm going to say, you know what, before I set up another timeout, let me clear out the first one.
So I go with clear timeout, clear timeout, and then I pass.
And the value that I got back from the initial set final.
So now, of course, what happens and I think I can do it this time on a small screen as well.
So again, yes, we're going back in the same color.
There it is.
Now I have my colors.
So once I click copy to the clipboard and after three seconds it disappears.
So I'm here, here, here, here and everywhere you click.
Now, the last thing what I would want is to go back to the ABAJO.
Yes.
And set up some kind of default value, because like I said, in my opinion, this is not the best look
where basically we have colored generator, but we're not suggesting to the user what actually is happening.
So I'm going to go back to my state for my list and I'm going to say new values when I remember we needed
to pass in some kind of value.
So in my case, I'm going to go with hard coded value of my orange color.
So I know that you're probably sick of this color already, but I'm going to go with strength and hashtag
EF one five zero to five and then all right away, invoke my all and I'll pass in the ten, so I'll
save it.
So by default, I'll have this placeholder in my input and I'll also have these squares not let me finally
talk about this thing.
So the number that we're passing in.
So if you'll notice, we have the base color and then if we pass in the time, what that means is that
we will set up the tent as well as the shades.
Hundred percent divided by ten.
So we have this all method that generates that generate tense and shades.
And then since I passed in the turn, it generated tense, divided one hundred percent by ten.
So that's why I have tense changing by 10 percent because I know that hundred divided by ten essentially
is ten.
That's why I have these ten tense and the same works with shades.
So if you'll start changing these behaviors around what is going to happen, your array is also going
to change.
So now what I'm saying here, if I pass in twenty, that means that I would want to divide those hundred
percent by twenty.
So essentially I have less values.
Why?
Well, because I have my best color and then I divide hundred by twenty.
Correct.
So I get back my ten but I only have five points because I move from value to value by twenty percent.
So if for example, I'm going to go with one, that just means that I'm going to have hundred values
for the tenth because we're dividing hundred by one and then also watershed's.
Now if you want you can set up a application where of course the user can change this value as well.
That is definitely option.
In my case, I just went with a hardcoded value where I said then and then or here.
So this is my default value.
And also when I'm checking for the form submission, I also hardcoded that then.
But you can definitely set up some kind of select or something that controls the amount of colors as
well.
That is our application.
Hopefully you enjoyed it.
I mean, I know you probably got sick of me typing the orange color.
I think that is the fastest car for me to type.
That's why I was using as far as generating some nice colors, because otherwise I would have went with
hashtag Datatel and I hope to see your next project.