1
00:00:00,510 --> 00:00:07,050
OK, so right now, I'm in my I.D. that visual studio code, and I thought, what is running successfully?

2
00:00:07,460 --> 00:00:12,810
Well, before like moving further, I want to just install the package, which we discussed.

3
00:00:13,110 --> 00:00:15,040
That is the well-used Argus.

4
00:00:15,090 --> 00:00:16,200
So I will install it.

5
00:00:16,560 --> 00:00:19,610
Before that, I need to stop the software with controls.

6
00:00:20,640 --> 00:00:28,530
And I'll clear this all, and I'll install the package with the command and be in and install.

7
00:00:29,280 --> 00:00:37,590
You can also use just I either shortcut for install npm II and then the name of the package.

8
00:00:37,590 --> 00:00:42,480
So that will be values targets and then you need to press enter.

9
00:00:43,230 --> 00:00:49,620
So then it will take a few few seconds and values to our guests will be installed in our project.

10
00:00:50,430 --> 00:00:51,930
So it's installing.

11
00:00:55,200 --> 00:00:56,010
And.

12
00:01:01,480 --> 00:01:07,570
As you can see, our package has been successfully installed, so once it showed this kind of message.

13
00:01:08,320 --> 00:01:11,500
So that means your package is successfully installed.

14
00:01:12,160 --> 00:01:16,400
OK, so now we can just clear test and again run our site over there.

15
00:01:16,400 --> 00:01:18,040
Artisan PMS dark.

16
00:01:19,000 --> 00:01:26,170
And you can just minimize it, so you can also open the terminal with the shortcut on the keyboard that

17
00:01:26,170 --> 00:01:33,190
is controlled plus back pick the key above above the tab is known as the backpack, so you can also

18
00:01:33,190 --> 00:01:40,340
open from that so you can also close it from that control plus backpack and it will hide the terminal.

19
00:01:41,370 --> 00:01:44,220
So maybe it's not working now.

20
00:01:44,250 --> 00:01:48,840
I hope you can open it and you can close it with control perspective.

21
00:01:49,560 --> 00:01:50,820
So that sort.

22
00:01:52,440 --> 00:02:00,310
Now, let's go ahead and start building that application to what we'll do is we'll create the things

23
00:02:00,330 --> 00:02:05,850
and the averages only like, don't we don't need to create another component or we can even create,

24
00:02:06,360 --> 00:02:09,690
but there's no like problem with that.

25
00:02:10,420 --> 00:02:14,130
So we'll create this in the gorgeous.

26
00:02:16,040 --> 00:02:19,420
So first of all, let me just, uh.

27
00:02:19,880 --> 00:02:21,170
In the bill.

28
00:02:23,570 --> 00:02:30,530
Like in place of live, we can also put this syntactic sugar from like which in react because the fragments,

29
00:02:31,070 --> 00:02:35,270
so this act so that they won't listen to this now we can have multiple dips.

30
00:02:35,960 --> 00:02:40,010
Remember, there is unnecessarily of one alternative.

31
00:02:40,310 --> 00:02:45,080
You can't provide like eight one eight one eight one, and that is no Dave to wrap them.

32
00:02:45,380 --> 00:02:49,070
There should be a day of wrapping all of the like elements.

33
00:02:49,460 --> 00:02:54,200
OK, so now I've provided this fragment extremely now.

34
00:02:54,200 --> 00:03:02,750
What I do is, first of all, I'll give it two or three with the ending of the generator.

35
00:03:02,910 --> 00:03:03,950
So color.

36
00:03:05,410 --> 00:03:08,590
Generator generator.

37
00:03:09,340 --> 00:03:17,800
OK, so now we basically we need to wrap this inside a section, so let me create a section.

38
00:03:19,550 --> 00:03:26,060
And we'll wrap this inside a section subsection below.

39
00:03:27,860 --> 00:03:35,130
Have a form which will be expected and like whenever we type the value, so we need a form like we need

40
00:03:35,240 --> 00:03:37,660
input field and we need some metric.

41
00:03:37,940 --> 00:03:44,510
So for that, we'll be using a form, so that will be a form below the H3.

42
00:03:44,930 --> 00:03:52,190
We can create a form and then it will be a form and action as such.

43
00:03:52,460 --> 00:03:56,570
We have not like we are not going to put anything but Typekit we can put.

44
00:03:58,510 --> 00:04:03,630
Typekit will be not type off type text.

45
00:04:05,020 --> 00:04:09,570
And hold until we can, we can later.

46
00:04:11,710 --> 00:04:13,420
First of all, let me just finish.

47
00:04:14,320 --> 00:04:17,530
You like the basic structure we are creating, not the final thing.

48
00:04:18,070 --> 00:04:24,370
So this will be the farm and inside the farm there will be an input field, so.

49
00:04:27,380 --> 00:04:32,660
And for all, if you can leave it like, don't need this Typekit, you can put that directly in, then

50
00:04:32,660 --> 00:04:34,100
what will I need to put that?

51
00:04:34,800 --> 00:04:37,190
OK, so in the input field?

52
00:04:40,340 --> 00:04:45,140
This is the input type is text, so and then what we'll we'll provide.

53
00:04:46,700 --> 00:04:48,080
A place holder may be.

54
00:04:49,350 --> 00:04:57,140
Police will which will see eye color, maybe we'll change it later on with the default color value,

55
00:04:57,150 --> 00:05:04,550
but as of now, we'll just put type color and after the input field, we'll have a button.

56
00:05:04,560 --> 00:05:08,910
OK, so that button will be.

57
00:05:09,860 --> 00:05:11,180
Type of some summit.

58
00:05:14,400 --> 00:05:15,780
I hope of some red button.

59
00:05:17,110 --> 00:05:17,620
I met.

60
00:05:18,420 --> 00:05:22,410
And there will be attacks inside the town, which will see.

61
00:05:24,320 --> 00:05:26,420
Submit or I can say.

62
00:05:27,760 --> 00:05:30,580
Generate colors, get colors.

63
00:05:34,890 --> 00:05:37,380
I got creative with these things.

64
00:05:37,770 --> 00:05:38,670
Got colors.

65
00:05:39,610 --> 00:05:45,090
OK, so this is all for the beginning.

66
00:05:45,120 --> 00:05:46,230
Let me just save it.

67
00:05:47,550 --> 00:05:54,120
And when I go back to the browser, you can see we have got like basic structure.

68
00:05:54,750 --> 00:05:57,180
So then what feel where will type or color?

69
00:05:57,360 --> 00:06:05,610
And this is the button which will like it was, which was fired off a function and their function will

70
00:06:05,610 --> 00:06:07,070
give us the colors.

71
00:06:07,560 --> 00:06:12,070
So this is the basic structure and this is the herding color generator.

72
00:06:13,580 --> 00:06:14,170
OK.

73
00:06:14,570 --> 00:06:18,470
So let me add some functionality to it.

74
00:06:18,920 --> 00:06:19,610
First of all.

75
00:06:20,850 --> 00:06:28,350
So first of all, I need to provide a function like whenever I type.

76
00:06:28,710 --> 00:06:35,100
Here are some things so bad things should be recorded somewhere that should be available, that need

77
00:06:35,110 --> 00:06:36,330
that will keep.

78
00:06:36,990 --> 00:06:38,070
OK, sorry, sorry.

79
00:06:38,070 --> 00:06:39,420
Sorry, the screen was stuck.

80
00:06:39,450 --> 00:06:41,160
Let me repeat again.

81
00:06:41,430 --> 00:06:44,580
What I was saying is that we need to provide our variable.

82
00:06:44,880 --> 00:06:49,860
So which of which will record all of the data, which we are typing.

83
00:06:50,130 --> 00:06:55,230
So we need to provide our variable for the color as well, like whatever the color we are typing.

84
00:06:55,590 --> 00:07:01,110
And then it will also form a list and everything will be going to that.

85
00:07:01,620 --> 00:07:04,880
First of all, let me create a contest I use.

86
00:07:05,130 --> 00:07:07,800
I use state content for that.

87
00:07:07,800 --> 00:07:08,130
I need to.

88
00:07:08,260 --> 00:07:10,830
It's important that you from the app.

89
00:07:13,050 --> 00:07:14,610
You spared and.

90
00:07:16,030 --> 00:07:21,310
Inside this function will be at a constant state.

91
00:07:22,660 --> 00:07:23,290
A U.S.

92
00:07:23,800 --> 00:07:30,280
State that will be followed and a function calls.

93
00:07:31,970 --> 00:07:32,930
Said color.

94
00:07:33,900 --> 00:07:36,180
And that will be equal to a U.S.

95
00:07:36,990 --> 00:07:37,590
Stay.

96
00:07:38,520 --> 00:07:46,470
And here inside this, there will be default will like the initial value so that can be even left out

97
00:07:46,470 --> 00:07:46,980
blank.

98
00:07:47,490 --> 00:07:48,600
No issues with that.

99
00:07:48,960 --> 00:07:50,550
We can also leave in blank.

100
00:07:51,340 --> 00:07:59,370
No, we'll provide a function in this input for you or which will like fire off whenever we type something

101
00:08:01,050 --> 00:08:01,680
for.

102
00:08:02,790 --> 00:08:07,920
We can create a function outside also and then call it on giving the engine.

103
00:08:08,730 --> 00:08:11,190
But we can also do it in line.

104
00:08:11,790 --> 00:08:13,080
I like to do it in line.

105
00:08:13,620 --> 00:08:20,790
So for that, I need to provide function here like that is on change and so on.

106
00:08:20,790 --> 00:08:28,010
Change and calibrations because this is JavaScript for being fired off for function inside this, that

107
00:08:28,170 --> 00:08:30,340
will be taking an argument of me or event.

108
00:08:30,360 --> 00:08:31,180
Also, you can type.

109
00:08:32,160 --> 00:08:38,880
And now we will set the color like said color, who?

110
00:08:40,560 --> 00:08:45,180
They went door to door and knew.

111
00:08:47,960 --> 00:08:48,490
That's it.

112
00:08:49,100 --> 00:08:55,400
Now we will also provide a value to this input, one that can be having a value and that value would

113
00:08:55,400 --> 00:08:56,040
be color.

114
00:08:56,810 --> 00:08:57,290
Same thing.

115
00:08:57,290 --> 00:08:58,610
What we declared here.

116
00:08:58,850 --> 00:08:59,660
This is the value.

117
00:09:00,300 --> 00:09:08,270
No, let me save it and let us go back to the browser and check if things are going the way they should.

118
00:09:09,290 --> 00:09:10,580
So right now, I'm in the browser.

119
00:09:11,180 --> 00:09:13,850
And OK, let me just do one more thing.

120
00:09:14,690 --> 00:09:19,220
Let me just console log like whatever is there.

121
00:09:19,550 --> 00:09:25,640
So let me just console console.log for what we'll do is here will create a function.

122
00:09:31,060 --> 00:09:39,040
Like, I was trying to console like I was thinking to console log in, but I will show you another method

123
00:09:39,040 --> 00:09:42,220
of seeing like what is being changed in our project.

124
00:09:43,100 --> 00:09:46,360
Let me go to the browser and I go to the browser.

125
00:09:46,600 --> 00:09:47,570
That is no change.

126
00:09:47,570 --> 00:09:47,820
Yes.

127
00:09:47,830 --> 00:09:51,810
So first of all, let me open that don't have to button.

128
00:09:52,870 --> 00:09:59,320
This is the control, and I have installed a really cool extension, which is known as a react developer

129
00:09:59,320 --> 00:09:59,650
tools.

130
00:09:59,770 --> 00:10:01,810
So you should also go ahead and install it.

131
00:10:02,350 --> 00:10:05,560
It is available for Chrome also and Firefox also.

132
00:10:05,930 --> 00:10:07,720
So I'm using Firefox right now.

133
00:10:07,720 --> 00:10:14,860
So having started for Firefox, once you install that, you can just press F12 and go to this thing

134
00:10:14,860 --> 00:10:17,250
right here and then you can go to the conference.

135
00:10:17,890 --> 00:10:22,390
Now it will show us all the components, all the status and all props and all everything.

136
00:10:22,870 --> 00:10:27,380
So just take a look just to keep an eye, keep an eye on this state.

137
00:10:27,640 --> 00:10:33,790
But whenever I type something that should be a change in this if we have successfully like in the state.

138
00:10:34,280 --> 00:10:36,040
So let me just disappear something.

139
00:10:36,040 --> 00:10:37,390
Let me type a color name.

140
00:10:37,390 --> 00:10:43,390
So maybe new you can see, as I was typing, it was getting recorded here.

141
00:10:43,390 --> 00:10:44,890
And now let me just to Newton.

142
00:10:47,030 --> 00:10:55,340
The state is changing, maybe I'll write a law about it like it works according to that.

143
00:10:55,640 --> 00:11:02,600
And if I write, read or anything, I write anything I write, but that is regarded and that OK, if

144
00:11:02,600 --> 00:11:12,710
I use state working perfectly for next, what we'll do is we'll move further and create something more

145
00:11:12,710 --> 00:11:13,270
and.

146
00:11:15,800 --> 00:11:18,110
We'll also add a constant for the error.

147
00:11:18,380 --> 00:11:25,790
Like whenever we like user types, any color which is not defined or any gibberish tax types before

148
00:11:25,790 --> 00:11:29,420
that, what we need to display that will do in the next video.