1
00:00:00,360 --> 00:00:06,060
Well, I hope by now we definitely know the drill, we're going to navigate back to our people who are

2
00:00:06,060 --> 00:00:07,910
looking for lower ipsum.

3
00:00:08,220 --> 00:00:11,910
That is the project name and then, of course, the set up.

4
00:00:12,150 --> 00:00:14,250
So I'm going to open up the integrated terminal.

5
00:00:14,250 --> 00:00:15,060
At the moment.

6
00:00:15,060 --> 00:00:21,810
I'm already en route so I can simply say city and I'm looking for my Sharipova.

7
00:00:22,200 --> 00:00:30,210
Once I'm here, I'm going to run NPM install on right away and ampm start as well, which of course

8
00:00:30,210 --> 00:00:32,700
will open up my server wants.

9
00:00:32,710 --> 00:00:39,000
The dependencies have been installed in a localhost three thousand as far as the project set up.

10
00:00:39,910 --> 00:00:45,940
If we check out the source, of course, we have the abcess that is already expected, but then all

11
00:00:45,940 --> 00:00:50,310
our data, so our paragraphs are going to be in there.

12
00:00:50,350 --> 00:00:50,820
Yes.

13
00:00:50,830 --> 00:00:57,070
And then I have my area, of course, by the name of text and order here, how I have the paragraphs.

14
00:00:57,460 --> 00:01:03,400
So in your case, if you want to add more data, so if you want to add more paragraphs, definitely

15
00:01:03,400 --> 00:01:04,540
feel free to do so.

16
00:01:04,690 --> 00:01:11,080
And then, of course, instead of displaying my max, which is eight paragraphs, you can display more.

17
00:01:11,410 --> 00:01:18,760
And again, if we navigate, you have jurors, we just import this data array, meaning I call this

18
00:01:18,760 --> 00:01:23,700
array in the ambiguous data, even though in the actual file it is called text.

19
00:01:23,980 --> 00:01:28,780
But then since I'm exporting as default, I can call it whatever I would want.

20
00:01:29,140 --> 00:01:31,990
Now again, it open up on a big brother, which is good.

21
00:01:31,990 --> 00:01:34,350
But I also need to open up a small one.

22
00:01:34,810 --> 00:01:37,580
And now let's just set up our structure.

23
00:01:37,750 --> 00:01:44,410
So essentially I'm talking about the form, I'm talking about the input and where eventually we will

24
00:01:44,410 --> 00:01:49,470
display our text now functionality coming up in the next video.

25
00:01:49,780 --> 00:01:52,480
But we always, always need our structure first.

26
00:01:52,850 --> 00:01:57,780
I'll start by setting up two state values and I think I can make this one bigger.

27
00:01:58,270 --> 00:02:00,010
Just going to make a little bit more sense.

28
00:02:00,010 --> 00:02:01,630
And one is going to be for the count.

29
00:02:01,960 --> 00:02:08,710
So how many paragraphs I would want to generate and I'll go with that count as well, of course, as

30
00:02:08,710 --> 00:02:09,070
well.

31
00:02:09,310 --> 00:02:13,600
I'm not as equal to my use state hook and I'll start with zero.

32
00:02:13,840 --> 00:02:18,520
So initially the value will be zero and the next thing is going to be the text.

33
00:02:18,940 --> 00:02:22,540
So it's going to be an array of those paragraphs.

34
00:02:22,900 --> 00:02:27,100
But I'll start with the default value and that value will be empty.

35
00:02:27,670 --> 00:02:33,580
So go with context and set text and that is equal to year's state.

36
00:02:33,790 --> 00:02:40,410
And then I pass in my empty array of beautiful than I would want to work on my return.

37
00:02:40,810 --> 00:02:42,400
So of course I go with section.

38
00:02:43,540 --> 00:02:50,890
Now, that section will have a class, because I would want to start a little bit, so Section Santore,

39
00:02:51,280 --> 00:02:54,790
we're going to add some herring right here.

40
00:02:55,180 --> 00:03:00,760
So let's just delete whatever text we currently have in the section and we're going to start herring

41
00:03:00,760 --> 00:03:10,540
three tired of boring lorem ipsum, some over here than the question mark.

42
00:03:10,850 --> 00:03:12,730
And now it's our form.

43
00:03:13,000 --> 00:03:16,030
So save and then we're going to go with form.

44
00:03:16,270 --> 00:03:17,560
Now we don't need the action.

45
00:03:17,860 --> 00:03:19,830
We're going to have our own handle submit.

46
00:03:20,260 --> 00:03:25,210
So let's just add class name, class name here.

47
00:03:25,570 --> 00:03:28,480
And that is going to be equal to a lorem form.

48
00:03:29,520 --> 00:03:36,720
And let's also add on some, but not for the time being, there's just going to be a placeholder function

49
00:03:36,990 --> 00:03:40,910
and outlandish handle and then met.

50
00:03:41,160 --> 00:03:42,000
All right, beautiful.

51
00:03:42,270 --> 00:03:47,940
And then, of course, since I don't want to react to complain too much, I'm going to go with Handal

52
00:03:48,510 --> 00:03:50,460
and those I've met.

53
00:03:50,740 --> 00:03:51,930
That is my function.

54
00:03:52,890 --> 00:03:58,980
Since it's going to be called on submit, yeah, for sure, I would want access to the event object

55
00:03:59,190 --> 00:04:07,170
and also right away prevent and then default, since I wouldn't want unnecessary page refreshers and

56
00:04:07,440 --> 00:04:12,490
since I would also want to check it out whether everything works as far as the connection, I'm going

57
00:04:12,510 --> 00:04:14,310
to go with Hello World.

58
00:04:14,520 --> 00:04:15,500
OK, beautiful.

59
00:04:15,810 --> 00:04:20,100
Now once I have my own submit, everything is in good shape.

60
00:04:20,380 --> 00:04:28,650
I think I can go with my label, so let's go with label and I'll add it to my input as well.

61
00:04:28,820 --> 00:04:31,840
And that idea eventually will be amount.

62
00:04:32,100 --> 00:04:38,980
And in here I'm going to go with Paragraph's Luxo and the Colon.

63
00:04:39,510 --> 00:04:43,050
So let's say we should have something like this on the screen.

64
00:04:43,500 --> 00:04:46,290
OK, I'm going to zoom in a little bit just so you can see it better.

65
00:04:46,620 --> 00:04:53,650
And then right next to the label, I'm going to go with input and type will be a little bit different.

66
00:04:53,670 --> 00:04:55,110
It's going to be a number.

67
00:04:55,480 --> 00:04:58,890
Then I'll add a name amount.

68
00:04:59,310 --> 00:05:07,380
And also the idea of amount not telling honestly, we can skip the name, but since we just covered

69
00:05:07,380 --> 00:05:12,160
in tutorial how we work with forms and all that, let's just add it in this project as well.

70
00:05:12,570 --> 00:05:19,830
So in some other projects later that we're working on, definitely names will be important since already

71
00:05:19,950 --> 00:05:26,370
in Tutorial I showed you some examples where the names are useful, but in this case I just went with

72
00:05:26,370 --> 00:05:27,690
the flow and I added the name.

73
00:05:27,960 --> 00:05:29,950
There's really no use for it.

74
00:05:29,980 --> 00:05:31,290
I can tell you that right away.

75
00:05:31,650 --> 00:05:38,940
And then since I have the input and since I would want to have the on change and value, so essentially

76
00:05:39,150 --> 00:05:41,240
I would want to have a controlled input.

77
00:05:41,400 --> 00:05:42,030
All right.

78
00:05:42,030 --> 00:05:47,100
Or set up my value attribute to be equal to my count.

79
00:05:47,430 --> 00:05:49,560
So that, of course, is my stated value.

80
00:05:49,890 --> 00:05:51,970
And then I'll set up the Ondrej.

81
00:05:51,990 --> 00:05:57,780
So as I'm changing the value design, I'll also change that count in my state.

82
00:05:58,020 --> 00:06:04,650
So it go it on change and we bravely pass in the inline function where I say that, yep, I'm going

83
00:06:04,650 --> 00:06:13,140
to be looking for event object and every time I change something in my input, I'm going to go set count

84
00:06:13,140 --> 00:06:18,020
and I'll pass an event, then target and then of course the value.

85
00:06:18,360 --> 00:06:24,780
So now of course I have the control, the input and also I would want the buttons right within the form.

86
00:06:24,780 --> 00:06:25,800
I'm going to go with button.

87
00:06:26,040 --> 00:06:33,000
That button has to be a submit, of course, and we're going to go here with type.

88
00:06:33,390 --> 00:06:39,590
And of course that will be submit a button and then let's add a class name here as well.

89
00:06:39,720 --> 00:06:43,670
So class name and we're going to go with Beaton.

90
00:06:43,920 --> 00:06:45,750
And now I have the button board.

91
00:06:45,780 --> 00:06:50,070
I have the text message so that just type your generate work.

92
00:06:50,080 --> 00:06:52,440
So let's save the rest.

93
00:06:52,440 --> 00:06:53,640
Now we have the button as well.

94
00:06:54,000 --> 00:06:59,940
And then right after the form, we're going to have the article where we'll display the text.

95
00:07:00,450 --> 00:07:03,950
So there's going to be some iteration over that array.

96
00:07:04,230 --> 00:07:06,930
That's the reason why we're setting up this text.

97
00:07:07,280 --> 00:07:07,640
Right.

98
00:07:07,950 --> 00:07:10,950
But for now, let's just add some kind of dummy value.

99
00:07:11,220 --> 00:07:16,290
So we're going to go with article and line, what's our class name right away.

100
00:07:16,290 --> 00:07:20,790
So class name and we're going to go with a lower text.

101
00:07:20,820 --> 00:07:21,960
OK, let's say it.

102
00:07:22,200 --> 00:07:25,110
And now let's add, I don't know, maybe two paragraphs.

103
00:07:25,110 --> 00:07:27,970
So I'm I'm not going to go with too many words.

104
00:07:27,970 --> 00:07:31,440
I think I'm going to go ten and let's just copy and paste.

105
00:07:32,700 --> 00:07:37,620
And I would want two of these paragraphs if I copy and paste and I have two paragraphs, so essentially

106
00:07:37,620 --> 00:07:39,650
this is how it's going to look like now.

107
00:07:39,660 --> 00:07:49,020
Again, eventually what we're going to do is change the value formula when we call and submit.

108
00:07:49,380 --> 00:07:56,850
So once we actually generate that text, we'll change this value, will add some paragraphs to this

109
00:07:56,850 --> 00:07:57,380
text there.

110
00:07:57,690 --> 00:08:00,770
And then, of course, in here we'll also iterate over.

111
00:08:00,960 --> 00:08:07,010
For now, we just have these static data that should be are set up and of course, we can set up on

112
00:08:07,020 --> 00:08:07,680
functionality.