All right, and once we've got the structure now, let's work on our handle, Samat, where essentially
what I would want is first check whether the value that the user is providing actually is a color line.
If it is a color beautiful, then I would want to do my magic.
If not, then I'll spit back the error, which, of course, in our case, it is just going to be this
red border around the input.
So start with an estimate and this is where I'll start working with our library.
Again, if you're interested in different features, what the library offers, then go ahead and explore
the API.
In my case, I'm just going to be looking for this all method.
So the way we work with a library, we go with new values, which of course is important from the value
SJS and then we assign it to some kind of variable.
And in here we pass in some kind of color, which of course, in our case is going to be Hek color.
But as you can see, you can have different formats as well.
And then once you do that, you have all these methods available to you.
Now, the one that I'm looking for is this all which is just going to generate shades and things.
So the lighter values and darker values.
And as far as the argument, I passant well, how many now?
I think it's going to be easier if I showcase that with a working app, meaning for now, just pass
in 10 and then once we're done with an app, I'll show you with examples how it's going to look like
if you pass in different powers, because in my opinion, it is just easier to explain it that way.
OK, so for now I'll just pass in 10 and then at the end, once we're done with an app, you'll see
how the array that you're getting back, because essentially what you're getting back is an array,
how that array changes as you pass in different values and the all method for now just pass.
And then so we have our handle submit for the time being.
We just have the hello.
But of course we'll change that round where I'm going to say a lot and then class is equal to my new
values and then I'll pass in the color that I'm getting back from the state.
So of course that is coming from my input.
So pass in the color.
And then like I said, I'll use right away my own method, which will generate both and shades and I'll
hardcourt the number then.
Now of course, we can take a look what is happening with the colors.
So once I save.
And if I try on a bigger browser window, I'm going to go here with hashtag and then two or three to
once we submit notice here we get an array with twenty one values.
So there's going to be that base one.
So that's the value that you're putting in.
And then you're getting tense as well as the shades on some.
Now the problem is that of course, you also have an option of providing a value add color value.
That doesn't make sense.
For example, if I just go with a relative value and the way the library works, it throws this big,
massive error.
And I just thought that it is nicer if we handle it on our end.
That's why we'll wrap the values when we're setting up the colors and try and catch.
So try to do something.
If there's some kind of error, then we'll just silently pass it here and a console.
Now, of course, you can set up some kind of functionality where you let the user know.
But in our case, it is just going to be that red border around the input.
And hopefully the user understands that, of course, the value that he or she provided does not make
sense.
So I'm trying to set up the color values if it doesn't work that I'm going to go with log here.
And I'm going to go with error and also, of course, I would want to have my set error function, so
I'm going to go with set error and of course, we'll set it equal to true.
So let's try one more time and I'm going to navigate the bigger screen and we're going to go with some
kind of value.
And again, I think I'm going to go with two to two because that is the faster one.
So notice how we nicely generate those colors.
So that is going to be our list that we're going to iterate over.
OK, awesome.
And if I try to submit just a hashtag.
Notice how I don't get this massive error.
I just have it in a console log where it tells me unable to pass color from the string.
Not what's really cool is that we have this set error.
So what we could do is where we have the input, I could add conditionally the class of error.
So if the error is there, then yes, I would want to add that word more.
And then if the error is not there, well, then of course the ball won't be there.
So here we go with time.
And then again, since we're setting this up conditionally, I would want to go with Template String
where I'm going to say check the state value for the error.
If it is there, beautiful, then add a class of error.
That's why we'll use ternary operator again where we go with error class.
That's what we are adding.
However, if the value for error is false, well then don't have the class.
So just pass in and out.
And of course, by default, you see there is no why.
Because state value of course is false.
Correct.
But if I try to submit a value that doesn't make sense, notice right away how the borrower of my input
turns red.
Why?
Because in here I said the error.
Tatro and in the input I'm looking for that value and not if it is true, then I'm adding some error.
And then if it is not true then well I don't add the class.
If you want to check out the class USS Good here and then look for the error and errors that the excess
that we are adding.
So that should do it for our basic input where we either get the array of values or of course we're
getting back the error and then we display to the user that, hey, listen, there's something wrong
with the value that you provided.