1
00:00:00,380 --> 00:00:07,100
All right, and once we've got the structure now, let's work on our handle, Samat, where essentially

2
00:00:07,130 --> 00:00:16,170
what I would want is first check whether the value that the user is providing actually is a color line.

3
00:00:16,280 --> 00:00:19,610
If it is a color beautiful, then I would want to do my magic.

4
00:00:19,890 --> 00:00:25,850
If not, then I'll spit back the error, which, of course, in our case, it is just going to be this

5
00:00:26,150 --> 00:00:29,440
red border around the input.

6
00:00:29,810 --> 00:00:35,090
So start with an estimate and this is where I'll start working with our library.

7
00:00:35,130 --> 00:00:44,060
Again, if you're interested in different features, what the library offers, then go ahead and explore

8
00:00:44,060 --> 00:00:44,610
the API.

9
00:00:45,080 --> 00:00:49,480
In my case, I'm just going to be looking for this all method.

10
00:00:49,760 --> 00:00:56,960
So the way we work with a library, we go with new values, which of course is important from the value

11
00:00:56,960 --> 00:01:01,490
SJS and then we assign it to some kind of variable.

12
00:01:01,760 --> 00:01:07,910
And in here we pass in some kind of color, which of course, in our case is going to be Hek color.

13
00:01:07,920 --> 00:01:12,140
But as you can see, you can have different formats as well.

14
00:01:12,560 --> 00:01:17,690
And then once you do that, you have all these methods available to you.

15
00:01:18,020 --> 00:01:24,630
Now, the one that I'm looking for is this all which is just going to generate shades and things.

16
00:01:25,160 --> 00:01:27,540
So the lighter values and darker values.

17
00:01:27,920 --> 00:01:33,820
And as far as the argument, I passant well, how many now?

18
00:01:33,830 --> 00:01:41,180
I think it's going to be easier if I showcase that with a working app, meaning for now, just pass

19
00:01:41,180 --> 00:01:47,120
in 10 and then once we're done with an app, I'll show you with examples how it's going to look like

20
00:01:47,420 --> 00:01:54,080
if you pass in different powers, because in my opinion, it is just easier to explain it that way.

21
00:01:54,330 --> 00:02:00,590
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

22
00:02:00,770 --> 00:02:05,990
how the array that you're getting back, because essentially what you're getting back is an array,

23
00:02:06,230 --> 00:02:14,150
how that array changes as you pass in different values and the all method for now just pass.

24
00:02:14,150 --> 00:02:17,900
And then so we have our handle submit for the time being.

25
00:02:17,900 --> 00:02:19,010
We just have the hello.

26
00:02:19,220 --> 00:02:25,880
But of course we'll change that round where I'm going to say a lot and then class is equal to my new

27
00:02:25,880 --> 00:02:31,940
values and then I'll pass in the color that I'm getting back from the state.

28
00:02:32,210 --> 00:02:34,820
So of course that is coming from my input.

29
00:02:35,030 --> 00:02:36,320
So pass in the color.

30
00:02:36,500 --> 00:02:42,320
And then like I said, I'll use right away my own method, which will generate both and shades and I'll

31
00:02:42,320 --> 00:02:44,920
hardcourt the number then.

32
00:02:45,290 --> 00:02:48,920
Now of course, we can take a look what is happening with the colors.

33
00:02:49,070 --> 00:02:49,970
So once I save.

34
00:02:51,070 --> 00:02:58,690
And if I try on a bigger browser window, I'm going to go here with hashtag and then two or three to

35
00:02:58,960 --> 00:03:04,950
once we submit notice here we get an array with twenty one values.

36
00:03:05,320 --> 00:03:07,450
So there's going to be that base one.

37
00:03:07,690 --> 00:03:09,790
So that's the value that you're putting in.

38
00:03:10,000 --> 00:03:16,260
And then you're getting tense as well as the shades on some.

39
00:03:16,660 --> 00:03:24,100
Now the problem is that of course, you also have an option of providing a value add color value.

40
00:03:24,100 --> 00:03:25,090
That doesn't make sense.

41
00:03:25,420 --> 00:03:31,930
For example, if I just go with a relative value and the way the library works, it throws this big,

42
00:03:31,930 --> 00:03:33,070
massive error.

43
00:03:33,460 --> 00:03:38,050
And I just thought that it is nicer if we handle it on our end.

44
00:03:38,260 --> 00:03:44,850
That's why we'll wrap the values when we're setting up the colors and try and catch.

45
00:03:45,130 --> 00:03:46,650
So try to do something.

46
00:03:47,050 --> 00:03:51,920
If there's some kind of error, then we'll just silently pass it here and a console.

47
00:03:52,360 --> 00:03:56,380
Now, of course, you can set up some kind of functionality where you let the user know.

48
00:03:56,530 --> 00:04:01,450
But in our case, it is just going to be that red border around the input.

49
00:04:01,600 --> 00:04:08,830
And hopefully the user understands that, of course, the value that he or she provided does not make

50
00:04:08,830 --> 00:04:09,190
sense.

51
00:04:09,490 --> 00:04:15,160
So I'm trying to set up the color values if it doesn't work that I'm going to go with log here.

52
00:04:16,300 --> 00:04:22,870
And I'm going to go with error and also, of course, I would want to have my set error function, so

53
00:04:22,870 --> 00:04:27,680
I'm going to go with set error and of course, we'll set it equal to true.

54
00:04:27,970 --> 00:04:34,510
So let's try one more time and I'm going to navigate the bigger screen and we're going to go with some

55
00:04:34,510 --> 00:04:35,280
kind of value.

56
00:04:35,290 --> 00:04:38,530
And again, I think I'm going to go with two to two because that is the faster one.

57
00:04:38,870 --> 00:04:42,270
So notice how we nicely generate those colors.

58
00:04:42,580 --> 00:04:47,560
So that is going to be our list that we're going to iterate over.

59
00:04:47,950 --> 00:04:48,910
OK, awesome.

60
00:04:49,400 --> 00:04:52,940
And if I try to submit just a hashtag.

61
00:04:53,260 --> 00:04:55,420
Notice how I don't get this massive error.

62
00:04:55,690 --> 00:05:01,420
I just have it in a console log where it tells me unable to pass color from the string.

63
00:05:01,750 --> 00:05:05,220
Not what's really cool is that we have this set error.

64
00:05:05,530 --> 00:05:14,150
So what we could do is where we have the input, I could add conditionally the class of error.

65
00:05:14,500 --> 00:05:19,150
So if the error is there, then yes, I would want to add that word more.

66
00:05:19,900 --> 00:05:24,130
And then if the error is not there, well, then of course the ball won't be there.

67
00:05:24,420 --> 00:05:25,990
So here we go with time.

68
00:05:26,170 --> 00:05:31,660
And then again, since we're setting this up conditionally, I would want to go with Template String

69
00:05:31,990 --> 00:05:36,150
where I'm going to say check the state value for the error.

70
00:05:36,610 --> 00:05:40,380
If it is there, beautiful, then add a class of error.

71
00:05:40,570 --> 00:05:45,220
That's why we'll use ternary operator again where we go with error class.

72
00:05:45,230 --> 00:05:46,200
That's what we are adding.

73
00:05:46,420 --> 00:05:52,170
However, if the value for error is false, well then don't have the class.

74
00:05:52,360 --> 00:05:54,200
So just pass in and out.

75
00:05:54,460 --> 00:05:57,670
And of course, by default, you see there is no why.

76
00:05:58,120 --> 00:06:01,000
Because state value of course is false.

77
00:06:01,270 --> 00:06:01,690
Correct.

78
00:06:01,990 --> 00:06:10,020
But if I try to submit a value that doesn't make sense, notice right away how the borrower of my input

79
00:06:10,030 --> 00:06:10,600
turns red.

80
00:06:10,600 --> 00:06:10,930
Why?

81
00:06:11,410 --> 00:06:13,540
Because in here I said the error.

82
00:06:13,540 --> 00:06:23,020
Tatro and in the input I'm looking for that value and not if it is true, then I'm adding some error.

83
00:06:23,230 --> 00:06:26,950
And then if it is not true then well I don't add the class.

84
00:06:27,280 --> 00:06:35,020
If you want to check out the class USS Good here and then look for the error and errors that the excess

85
00:06:35,200 --> 00:06:36,610
that we are adding.

86
00:06:36,970 --> 00:06:46,240
So that should do it for our basic input where we either get the array of values or of course we're

87
00:06:46,240 --> 00:06:51,370
getting back the error and then we display to the user that, hey, listen, there's something wrong

88
00:06:51,370 --> 00:06:53,650
with the value that you provided.