1
00:00:01,080 --> 00:00:02,850
‫So we already built two

2
00:00:02,850 --> 00:00:05,730
‫of the four components that we identified.

3
00:00:05,730 --> 00:00:08,553
‫And so next, let's build the two forms.

4
00:00:09,750 --> 00:00:12,720
‫So that's this form right here

5
00:00:12,720 --> 00:00:16,020
‫and then the main bill splitting form.

6
00:00:16,020 --> 00:00:19,443
‫But we will start with this small and easy one down here.

7
00:00:20,670 --> 00:00:22,413
‫So back to our app.

8
00:00:23,730 --> 00:00:26,940
‫Let's create the next component

9
00:00:26,940 --> 00:00:31,940
‫which is called form add friend.

10
00:00:35,550 --> 00:00:39,210
‫So, here, let's return a form element

11
00:00:39,210 --> 00:00:44,210
‫with the class name of form add friend.

12
00:00:44,550 --> 00:00:47,253
‫So just the same as the component name itself.

13
00:00:49,080 --> 00:00:53,400
‫Let's have one label, which says friend name.

14
00:00:56,040 --> 00:01:00,720
‫Then let's here add one emoji

15
00:01:00,720 --> 00:01:02,970
‫with like two people

16
00:01:02,970 --> 00:01:06,900
‫for example here like this.

17
00:01:06,900 --> 00:01:09,580
‫And then the actual input field

18
00:01:11,220 --> 00:01:14,220
‫of the type text.

19
00:01:14,220 --> 00:01:15,810
‫And that's it.

20
00:01:15,810 --> 00:01:18,780
‫So again, we are just building the static part

21
00:01:18,780 --> 00:01:20,490
‫so we have no state here.

22
00:01:20,490 --> 00:01:23,010
‫So for now, this element here

23
00:01:23,010 --> 00:01:25,953
‫is of course not a controlled element yet.

24
00:01:27,870 --> 00:01:29,280
‫So here, next up

25
00:01:29,280 --> 00:01:33,420
‫let's have the image URL.

26
00:01:33,420 --> 00:01:36,543
‫And again, I will use some emoji here.

27
00:01:37,800 --> 00:01:39,663
‫Let's go for this one.

28
00:01:40,899 --> 00:01:42,600
‫And then here, basically we can just duplicate

29
00:01:42,600 --> 00:01:44,343
‫this line of text for now.

30
00:01:45,960 --> 00:01:47,940
‫So giving that a save.

31
00:01:47,940 --> 00:01:50,220
‫And finally, we need a button again.

32
00:01:50,220 --> 00:01:54,570
‫So that's this button element with the class name of button.

33
00:01:54,570 --> 00:01:59,013
‫So now we could just copy this here and paste it here.

34
00:02:00,480 --> 00:02:01,860
‫This class name button.

35
00:02:01,860 --> 00:02:06,810
‫So now we could just copy this here and paste it down here.

36
00:02:06,810 --> 00:02:09,060
‫But since we need a button like this

37
00:02:09,060 --> 00:02:12,060
‫multiple times throughout the user interface

38
00:02:12,060 --> 00:02:15,963
‫we can just actually place this here into its own component.

39
00:02:17,760 --> 00:02:21,600
‫So we need to reuse this code right here.

40
00:02:21,600 --> 00:02:25,743
‫And so we just identified a new component that we need.

41
00:02:28,920 --> 00:02:33,030
‫All right, and here, let's do exactly what we did before.

42
00:02:33,030 --> 00:02:36,660
‫So we will specify the children prop

43
00:02:36,660 --> 00:02:40,410
‫because that content of the button will come

44
00:02:40,410 --> 00:02:43,623
‫into the button via this children prop.

45
00:02:45,450 --> 00:02:47,613
‫So then we just display it here.

46
00:02:49,170 --> 00:02:51,790
‫So remember that the children prop here will be

47
00:02:52,663 --> 00:02:54,090
‫whatever is between the opening tag

48
00:02:54,090 --> 00:02:57,483
‫and the closing tag of calling the component.

49
00:02:58,470 --> 00:02:59,853
‫So now we save button.

50
00:03:00,900 --> 00:03:04,830
‫And then here, just as before we say select.

51
00:03:04,830 --> 00:03:07,560
‫And so this here is then the children

52
00:03:07,560 --> 00:03:09,453
‫of this button basically.

53
00:03:10,426 --> 00:03:12,450
‫So the children props right here will be select

54
00:03:12,450 --> 00:03:13,353
‫in this case.

55
00:03:14,341 --> 00:03:17,460
‫And so indeed everything works just as before.

56
00:03:17,460 --> 00:03:21,300
‫And now we can then use the same button here

57
00:03:21,300 --> 00:03:26,300
‫but this time the text will be add, alright

58
00:03:26,400 --> 00:03:29,010
‫and we can't see the result of this yet

59
00:03:29,010 --> 00:03:32,310
‫because we of course need to include it also here

60
00:03:32,310 --> 00:03:34,863
‫in the app in the sidebar.

61
00:03:36,838 --> 00:03:38,613
‫So form add friend.

62
00:03:39,930 --> 00:03:41,640
‫And there it is.

63
00:03:41,640 --> 00:03:44,253
‫So all we're missing now here is some button.

64
00:03:46,500 --> 00:03:48,240
‫So you see that here we have this button

65
00:03:48,240 --> 00:03:49,863
‫which says Add Friend.

66
00:03:50,794 --> 00:03:52,230
‫And so whenever we click this button

67
00:03:52,230 --> 00:03:53,850
‫then the form will open.

68
00:03:53,850 --> 00:03:57,570
‫But again, for now, our app is not dynamic like this

69
00:03:57,570 --> 00:04:00,663
‫but we still want the add friend button there.

70
00:04:02,666 --> 00:04:04,323
‫So right here between these two.

71
00:04:05,190 --> 00:04:08,040
‫And so we use again, our button component.

72
00:04:08,040 --> 00:04:10,530
‫And so you see that this is a lot more comfortable

73
00:04:10,530 --> 00:04:13,680
‫than always having to use the normal button element

74
00:04:13,680 --> 00:04:16,260
‫with the button class attached to it.

75
00:04:16,260 --> 00:04:21,160
‫So here we used that class once right here

76
00:04:22,085 --> 00:04:23,520
‫and then we can reuse that button

77
00:04:23,520 --> 00:04:25,833
‫with the class over and over again.

78
00:04:29,370 --> 00:04:31,020
‫Add Friend.

79
00:04:31,020 --> 00:04:33,060
‫While that looks a bit weird

80
00:04:33,060 --> 00:04:36,123
‫I believe that the button actually should be after.

81
00:04:38,370 --> 00:04:40,080
‫All right, so in fact

82
00:04:40,080 --> 00:04:42,570
‫this is what we get here when we click.

83
00:04:42,570 --> 00:04:45,663
‫So the button changed the text to close and it is below.

84
00:04:48,090 --> 00:04:52,053
‫All right, let's just give ourselves a bit more space.

85
00:04:52,920 --> 00:04:54,190
‫And then let's move on

86
00:04:55,179 --> 00:04:58,443
‫to building this other main form over here.

87
00:05:01,315 --> 00:05:02,830
‫So that one is called

88
00:05:06,060 --> 00:05:07,923
‫the form split bill,

89
00:05:08,910 --> 00:05:12,723
‫form split bill.

90
00:05:15,630 --> 00:05:19,650
‫And then let's again return a form element

91
00:05:19,650 --> 00:05:23,313
‫with the class name equal to the component name.

92
00:05:24,531 --> 00:05:28,470
‫So form split bill, but not in CamelCase,

93
00:05:28,470 --> 00:05:32,583
‫but in this other case that's more common in CSS.

94
00:05:36,647 --> 00:05:40,660
‫So first we have the title split a bill with

95
00:05:41,982 --> 00:05:44,925
‫and then here actually the name of the friend

96
00:05:44,925 --> 00:05:48,519
‫which means that we will at some point need to pass

97
00:05:48,519 --> 00:05:51,363
‫in the front object here into this component.

98
00:05:52,408 --> 00:05:54,347
‫But for now, we can't really do that

99
00:05:54,347 --> 00:05:56,344
‫because we don't have a way yet

100
00:05:56,344 --> 00:05:58,062
‫of selecting one of the friends,

101
00:05:58,062 --> 00:06:00,562
‫and then passing that friend object into the form.

102
00:06:01,481 --> 00:06:03,507
‫So that is what we will do later.

103
00:06:03,507 --> 00:06:06,273
‫But for now, let's just place some placeholder here.

104
00:06:07,721 --> 00:06:08,970
‫Okay, and then before we keep going

105
00:06:08,970 --> 00:06:12,570
‫let's include that form into the app.

106
00:06:12,570 --> 00:06:15,240
‫And that's outside the sidebar here.

107
00:06:15,240 --> 00:06:20,240
‫So just here inside app form split bill.

108
00:06:21,360 --> 00:06:22,503
‫And there it is.

109
00:06:23,563 --> 00:06:25,390
‫So let's move back down here

110
00:06:26,408 --> 00:06:29,463
‫and then write the actual content of this form.

111
00:06:30,628 --> 00:06:33,030
‫And actually this is pretty similar to what we have here.

112
00:06:33,030 --> 00:06:37,653
‫So I'll just grab this part and paste that here.

113
00:06:39,040 --> 00:06:41,663
‫And then all we need to do is to change the text here.

114
00:06:42,685 --> 00:06:44,920
‫So first we have the bill value

115
00:06:47,100 --> 00:06:49,263
‫and use some money emoji here.

116
00:06:53,163 --> 00:06:55,843
‫Of course here the text is also different.

117
00:06:55,843 --> 00:06:57,543
‫It's split bill.

118
00:06:58,805 --> 00:07:02,463
‫And then let's copy this, this part, paste it here twice.

119
00:07:05,400 --> 00:07:08,260
‫So your expenses or expense

120
00:07:14,700 --> 00:07:16,233
‫Yet another emoji.

121
00:07:20,518 --> 00:07:23,193
‫And of course you can split those if you don't want.

122
00:07:25,197 --> 00:07:27,682
‫And now here the expense of your friend.

123
00:07:27,682 --> 00:07:29,673
‫So I'll again just use X for now.

124
00:07:33,098 --> 00:07:34,596
‫And then we want that emoji

125
00:07:34,596 --> 00:07:36,810
‫of two people that we had before to symbolize

126
00:07:36,810 --> 00:07:38,553
‫that this is the friend.

127
00:07:39,990 --> 00:07:42,093
‫Now, okay, nice.

128
00:07:43,808 --> 00:07:44,641
‫And let's see.

129
00:07:44,641 --> 00:07:46,255
‫And in fact

130
00:07:46,255 --> 00:07:49,872
‫the only thing that we are missing is now this select here.

131
00:07:49,872 --> 00:07:52,893
‫And also this input right here should be disabled.

132
00:07:53,850 --> 00:07:58,410
‫So when we add something here, for example

133
00:07:58,410 --> 00:08:00,030
‫our expense is 40

134
00:08:00,030 --> 00:08:03,520
‫then we should not be allowed to change Clark's expense

135
00:08:04,433 --> 00:08:06,630
‫because otherwise these two values wouldn't add up

136
00:08:06,630 --> 00:08:08,553
‫to the total bill value.

137
00:08:09,690 --> 00:08:11,343
‫So let's do that.

138
00:08:12,764 --> 00:08:15,603
‫So here we can simply use the disabled attribute.

139
00:08:17,383 --> 00:08:19,051
‫So that's very simple

140
00:08:19,051 --> 00:08:21,251
‫and you saw that it become grayed out there.

141
00:08:25,685 --> 00:08:28,010
‫And now let's then write that select.

142
00:08:31,505 --> 00:08:33,566
‫So here, another money emoji

143
00:08:33,566 --> 00:08:37,023
‫for specifying who is paying the bill.

144
00:08:40,642 --> 00:08:43,170
‫And then here we have a very simple select element

145
00:08:43,170 --> 00:08:45,003
‫with only two options.

146
00:08:46,958 --> 00:08:48,603
‫So option one is you.

147
00:08:51,300 --> 00:08:55,920
‫And here let's actually specify the value also as user.

148
00:08:58,381 --> 00:09:00,663
‫And then in this other one as the friend.

149
00:09:03,624 --> 00:09:05,743
‫And then here we again want the friend name.

150
00:09:05,743 --> 00:09:06,576
‫So let's use X,

151
00:09:07,500 --> 00:09:09,873
‫and, nice.

152
00:09:11,430 --> 00:09:14,062
‫Yep, that works.

153
00:09:14,062 --> 00:09:15,060
‫And so with this

154
00:09:15,060 --> 00:09:17,010
‫we actually finished building the static part

155
00:09:17,010 --> 00:09:18,183
‫of the application.

156
00:09:19,120 --> 00:09:20,119
‫And so next up

157
00:09:20,119 --> 00:09:22,669
‫we are finally ready to start adding some dynamics.

158
00:09:23,506 --> 00:09:24,806
‫So to add some, stay here.