1
00:00:00,330 --> 00:00:06,600
Good effort, and I would want to work on a set up for him and we're going to start that work in the

2
00:00:06,600 --> 00:00:13,860
context where we'll add one more state value and the reason why we're adding this value.

3
00:00:13,860 --> 00:00:18,360
If you take a look at the complete project, notice, I have a few inputs.

4
00:00:18,720 --> 00:00:21,960
So one is going to be number and then there's going to be to select.

5
00:00:22,440 --> 00:00:26,020
And of course, I would want them to be controlled the input.

6
00:00:26,460 --> 00:00:33,270
So first, I just need to set up some values in the state and then, yes, there's handle change coming

7
00:00:33,270 --> 00:00:36,120
up there, the cement and all that cool stuff.

8
00:00:36,420 --> 00:00:43,390
But for the time being, just understand that we are setting up some default values for the input.

9
00:00:43,800 --> 00:00:45,270
So that's why we'll will never get back.

10
00:00:45,300 --> 00:00:47,720
And in this case, I'll set this up as an object.

11
00:00:48,090 --> 00:00:54,930
So we're going to go here with CONSED and I'll call the squares and set with function.

12
00:00:55,290 --> 00:00:57,390
And that one is equal to a used state.

13
00:00:57,600 --> 00:01:00,090
And like I said, we'll set this up as an object.

14
00:01:00,450 --> 00:01:06,000
And as far as the properties, the names are very, very, very important because they will have to

15
00:01:06,000 --> 00:01:10,510
match exactly to the names that will add to our input.

16
00:01:10,830 --> 00:01:15,270
So in here I go with the amount and by default I would want to set it up as the.

17
00:01:16,350 --> 00:01:23,940
Then I'm going to go with category category and I want will be sports by default and then the last one

18
00:01:23,940 --> 00:01:24,930
is difficulty.

19
00:01:25,320 --> 00:01:28,240
Again, the name is very important because they need to match.

20
00:01:28,680 --> 00:01:31,530
So this one will be equal to easy.

21
00:01:31,920 --> 00:01:41,220
And you can kind of see already that we are using the same names, what we have in the euro, because

22
00:01:41,220 --> 00:01:48,390
like I have previously already mentioned, once we submit the form will construct our own YORO the moment.

23
00:01:48,390 --> 00:01:53,280
Of course, we're just hard coding and just getting the same 10 questions about the sports.

24
00:01:53,670 --> 00:02:02,880
But what we would want is to have one and one user can pick well, which questions he or she is going

25
00:02:02,880 --> 00:02:03,330
to answer.

26
00:02:03,720 --> 00:02:08,730
Now, like I said, we won't use the user factor anymore so we can just get rid of it.

27
00:02:09,150 --> 00:02:11,880
And instead we'll set up two placeholder functions.

28
00:02:12,270 --> 00:02:14,390
One is going to be handle change.

29
00:02:14,400 --> 00:02:19,530
And again, I'm just doing that so I don't have to hop back and forth in handle change.

30
00:02:19,530 --> 00:02:24,930
I will be looking for event object and I'll just cancel log here.

31
00:02:25,500 --> 00:02:33,480
And also I would want to go with const and let's say handle sub met again.

32
00:02:33,480 --> 00:02:39,090
This is going to be the case where we would want to get the event object and will right away prevent

33
00:02:39,810 --> 00:02:42,600
default like so we invoke it beautiful.

34
00:02:42,990 --> 00:02:45,870
And of course now we need to parse these things down.

35
00:02:46,260 --> 00:02:54,540
So where we have the provider, I would want to parse down the squares that handle change as well as

36
00:02:54,540 --> 00:02:55,540
handle it.

37
00:02:56,070 --> 00:03:01,370
And once we're done over here, course we navigate to the set up form component.

38
00:03:01,980 --> 00:03:05,040
So I think I can close the objets and model for now.

39
00:03:05,610 --> 00:03:07,380
And we're looking for the set up form.

40
00:03:07,860 --> 00:03:13,860
I already have used global context and then inside of this component, we just need to structure a few

41
00:03:13,860 --> 00:03:15,990
things out of our global context.

42
00:03:16,260 --> 00:03:17,580
I'm looking for my quiz.

43
00:03:17,840 --> 00:03:24,120
This is where I have all my values that I'm looking for a. change and handle submit.

44
00:03:24,390 --> 00:03:26,610
And lastly, I also would want to display the error.

45
00:03:27,060 --> 00:03:30,810
So I'm going to go with error and that is going to be equal to use global context.

46
00:03:31,020 --> 00:03:35,010
And then we invoke it now as far as the return would go with mine.

47
00:03:36,170 --> 00:03:47,420
And then inside of the mine, we'll have a question or I'm sorry, s. we a class of quiz and quiz small.

48
00:03:47,720 --> 00:03:49,670
So am I wrong here?

49
00:03:49,700 --> 00:03:54,980
Let's go with form with a class of set up hyphen and then form.

50
00:03:55,400 --> 00:03:58,010
Now, as far as the action, we can remove it.

51
00:03:58,490 --> 00:04:02,630
And instead of the form, I would want to set up my three inputs.

52
00:04:03,080 --> 00:04:04,820
And here I'm going to add a comment.

53
00:04:04,820 --> 00:04:12,050
I'll say amount and let's just go with this with a class of form and line control.

54
00:04:12,380 --> 00:04:19,730
And instead of this one control, let's add a label and the value will be amount because that is going

55
00:04:19,730 --> 00:04:20,390
to be mighty.

56
00:04:20,630 --> 00:04:23,480
And also a number of questions.

57
00:04:23,810 --> 00:04:29,510
And like I said, we're going to have the input and the type will be number, type is number.

58
00:04:29,840 --> 00:04:35,660
And then name again needs to match exactly what we have in the state.

59
00:04:36,040 --> 00:04:36,760
In to state.

60
00:04:36,770 --> 00:04:37,520
I have three values.

61
00:04:37,520 --> 00:04:39,500
I have mount category and difficulty.

62
00:04:39,800 --> 00:04:43,880
And when we're setting up this name, the value needs to match.

63
00:04:43,890 --> 00:04:46,290
Otherwise functionality won't work.

64
00:04:46,700 --> 00:04:51,350
So in here, let's say amount and I will also be a month.

65
00:04:51,650 --> 00:04:58,010
So and when it comes to the control, then of course we remember that we need two things we need to

66
00:04:58,010 --> 00:05:00,890
value and that one will be equal to Cui's.

67
00:05:01,220 --> 00:05:08,270
And that amount, which remember is then of course, as well as the Ondrej and in this case on change

68
00:05:08,270 --> 00:05:10,660
is going to be exactly the same for all of them.

69
00:05:11,420 --> 00:05:16,250
So that way, if we need to make some changes, we only need to do it in one place.

70
00:05:16,490 --> 00:05:19,270
And then I would want to add some success as well.

71
00:05:20,440 --> 00:05:26,470
So I don't know at the end or whatever you like, let's add a class name for input and that one will

72
00:05:26,470 --> 00:05:28,030
be form hyphen input.

73
00:05:28,420 --> 00:05:36,130
And, you know, since it is a no input, I will also add two attributes for Min and Max, something

74
00:05:36,140 --> 00:05:41,410
is going to be one and then Max will be 50, whatever.

75
00:05:41,410 --> 00:05:42,310
Something like this.

76
00:05:42,640 --> 00:05:43,570
Let's add one.

77
00:05:43,730 --> 00:05:49,510
And there is, of course, now we have a number of questions that is our input.

78
00:05:49,780 --> 00:05:53,320
And, you know, right above the amount is also going to set up.

79
00:05:53,320 --> 00:06:02,020
Having to set up online courses is now I do need to copy this, but will be setting up the select.

80
00:06:02,020 --> 00:06:05,340
So, you know, now we'll just write it from scratch.

81
00:06:05,620 --> 00:06:09,910
I thought I'm going to copy this, but doesn't make sense as this is an input for.

82
00:06:09,940 --> 00:06:17,110
No, but we need to set up to select boxes now before I set up those black boxes just so it's easier

83
00:06:17,110 --> 00:06:18,320
to navigate around.

84
00:06:18,640 --> 00:06:22,900
I also want to display the error as well as the submit button.

85
00:06:23,380 --> 00:06:28,780
So in here, I'm going to set up my conditional rendering because I only would want to display the error

86
00:06:29,230 --> 00:06:30,880
if the error is there.

87
00:06:31,210 --> 00:06:38,560
And then remember, the case for error was if the API doesn't return, the questions that we're looking

88
00:06:38,560 --> 00:06:38,800
for.

89
00:06:38,890 --> 00:06:39,340
Correct.

90
00:06:39,670 --> 00:06:42,010
So in here, we're just going to go with error.

91
00:06:42,430 --> 00:06:47,290
And if that is the case, then of course, I would want to display my paragraph.

92
00:06:47,560 --> 00:06:50,320
A class name is her.

93
00:06:51,220 --> 00:06:56,260
And as far as the text, we're just going to say can't generate.

94
00:06:57,640 --> 00:06:58,560
Questions.

95
00:06:59,510 --> 00:07:04,760
And the comma, please, we try try different.

96
00:07:05,930 --> 00:07:12,650
Options like so, and I'm still within the form, I'm going to go with Button now, the button will

97
00:07:12,650 --> 00:07:19,790
have the type of summit and when it comes to unclick, once we click the button or I would want to go

98
00:07:19,790 --> 00:07:21,750
with handle met.

99
00:07:22,340 --> 00:07:25,630
And then lastly, I would need to add some value here.

100
00:07:25,670 --> 00:07:27,020
So it's a start.

101
00:07:27,260 --> 00:07:29,600
And also I would want to add a little bit of styling.

102
00:07:29,780 --> 00:07:35,780
So we'll say class name is equal to Smith and then hyphen between.

103
00:07:36,230 --> 00:07:39,260
We save it and of course we cannot see the error.

104
00:07:39,980 --> 00:07:48,190
But if you really want to start out, go back to the state in a global provider and just say true.

105
00:07:48,680 --> 00:07:52,020
And now, of course, you should see the error.

106
00:07:52,160 --> 00:07:58,970
Now, again, the error is going to be in the case where the API cannot return the questions.

107
00:07:58,970 --> 00:08:01,610
So it cannot generate those questions.

108
00:08:01,970 --> 00:08:08,240
And then, like I already mentioned a few times, we'll have to set up our select one is going to be

109
00:08:08,240 --> 00:08:13,070
for the category and the second one will be for the difficulty level.

110
00:08:13,550 --> 00:08:21,830
So where I have the control right after it and before the error, I'm going to go with another Dev again.

111
00:08:22,100 --> 00:08:25,010
The class name will be form control.

112
00:08:26,380 --> 00:08:33,040
And, you know, in this case, I will add here the comment as well, just so it's easier to navigate

113
00:08:33,040 --> 00:08:34,600
around the project later.

114
00:08:34,900 --> 00:08:40,630
And I'll call this category and you can probably already guess that this is exactly what will be setting

115
00:08:40,630 --> 00:08:40,870
up.

116
00:08:41,200 --> 00:08:43,360
We have label now.

117
00:08:43,360 --> 00:08:45,700
The idea will be category here.

118
00:08:46,000 --> 00:08:47,390
And instead of the label.

119
00:08:47,410 --> 00:08:47,670
Right.

120
00:08:47,680 --> 00:08:49,330
The same thing category.

121
00:08:49,810 --> 00:08:52,300
And we're going to go with select.

122
00:08:53,110 --> 00:08:59,650
And for to select again, name needs to be exactly the same category, because that is my in a state

123
00:08:59,950 --> 00:09:06,670
and then when it comes to ready again category because for the label, I already have the acronym for

124
00:09:06,670 --> 00:09:12,670
ATTRIBUTE set as a category and then I would want to have form input again.

125
00:09:12,910 --> 00:09:22,760
So the styling here, last name and then form input and also let's set this up as a controlled input.

126
00:09:23,110 --> 00:09:29,800
So in this case, I'll scroll up a little bit just so I can save some time on typing and then copy value

127
00:09:30,040 --> 00:09:32,080
and line on change as well.

128
00:09:32,350 --> 00:09:37,210
Now the change won't change, so I will stay the same again, the same function.

129
00:09:37,570 --> 00:09:43,780
But when it comes to value instead of amount, of course what we're looking for is the category.

130
00:09:44,140 --> 00:09:44,620
Correct.

131
00:09:44,950 --> 00:09:48,430
And then instead of the select, we just need to set up our options.

132
00:09:48,790 --> 00:09:52,530
So we go here with option and put option.

133
00:09:52,540 --> 00:09:58,750
We need to pass in the value which is going to be sports and whatever text would want to showcase.

134
00:09:59,080 --> 00:10:05,700
So in my case, since I would want to showcase the same thing, I go with sports as my text values all.

135
00:10:06,040 --> 00:10:10,720
But I'm going to go to two cursors and we're going to go with history.

136
00:10:11,800 --> 00:10:12,970
And here.

137
00:10:13,920 --> 00:10:19,440
I'm going to go with politics and this is going to be the case where I'm going to set up only three

138
00:10:19,440 --> 00:10:22,590
categories now, eventually I'll show you why.

139
00:10:23,510 --> 00:10:28,910
Why, I'm not going to town and setting up all of them, and of course, at that point you can make

140
00:10:28,910 --> 00:10:35,450
a decision if you want to go back to API and get the value that is necessary, you can add more categories

141
00:10:35,450 --> 00:10:43,350
as well for time being noticed and sports because in the context of sports as my default one.

142
00:10:43,760 --> 00:10:50,180
So if all changes category around, for example, to the politics, because the politics will be selected

143
00:10:50,480 --> 00:10:55,940
here and we have the category, let's copy and paste it there.

144
00:10:56,510 --> 00:10:58,570
So the last one will be difficulty.

145
00:10:59,420 --> 00:11:01,160
So let's say here difficulty.

146
00:11:01,460 --> 00:11:09,350
And what I'm going to do is pretty much select everywhere where I have category and just change it to

147
00:11:09,350 --> 00:11:10,030
difficulty.

148
00:11:10,490 --> 00:11:15,020
So everywhere where I have the category, let's go with difficulty.

149
00:11:17,060 --> 00:11:20,810
OK, so and out here, select.

150
00:11:21,810 --> 00:11:25,680
Select on it should be easy, correct?

151
00:11:25,920 --> 00:11:28,550
Not at the moment, we don't have the value here.

152
00:11:28,980 --> 00:11:31,020
That's why, of course, will change these rules around.

153
00:11:31,470 --> 00:11:36,270
It is not going to be sports and history or whatever.

154
00:11:36,810 --> 00:11:37,860
It's going to be easy.

155
00:11:39,130 --> 00:11:45,430
Easy and hard as well as media, so let's put medium, second, medium.

156
00:11:46,650 --> 00:11:49,050
And then the last one will be a hard one.

157
00:11:50,070 --> 00:11:58,500
Much more hard and let's see, of course, again, the value is easy, so when it comes to select,

158
00:11:58,500 --> 00:12:02,970
we go with already some kind of name and needs to match to whatever we have in the label.

159
00:12:03,480 --> 00:12:08,970
Then we also have name since we'll use this when we're changing something about our form.

160
00:12:09,330 --> 00:12:10,890
And you'll see that in next year.

161
00:12:11,250 --> 00:12:14,310
And I would want to set this up as a controlled input.

162
00:12:14,470 --> 00:12:15,990
That's why good value.

163
00:12:16,320 --> 00:12:22,980
And I'm checking for the highest value in the state and the property that I'm looking for is difficulty.

164
00:12:23,220 --> 00:12:30,880
And then on change, of course, will be invoked every time I change something about this select.

165
00:12:30,900 --> 00:12:35,760
Now, again, at the moment, nothing's changing because there's nothing there as far as functionality.

166
00:12:36,060 --> 00:12:37,430
But eventually it will be.

167
00:12:37,740 --> 00:12:44,340
And of course, inside of the select of these options, we go with option and then whatever options

168
00:12:44,340 --> 00:12:44,760
I would want.

169
00:12:44,760 --> 00:12:51,030
Now, in this case, of course, since we're working with API, you need to be correct because, for

170
00:12:51,030 --> 00:12:57,520
example, categories match exactly to what the API is providing.

171
00:12:58,080 --> 00:13:04,020
So if the API doesn't have the category of history, then of course you cannot add it because the URL,

172
00:13:04,020 --> 00:13:07,720
of course, will be incorrect and the same goes for difficulty.

173
00:13:08,310 --> 00:13:12,450
I know that in the API I have easy, medium and hard.

174
00:13:12,820 --> 00:13:16,150
Those are my options if I wouldn't have that.

175
00:13:16,170 --> 00:13:20,770
And of course, I wouldn't be able to get the questions that I'm looking for.

176
00:13:21,120 --> 00:13:26,180
So if you had some kind of medium hard category, it is not going to work.

177
00:13:26,610 --> 00:13:32,130
Hopefully this is clear and we're ready to start working on our handle change functionality.