‫So we already built two
‫of the four components that we identified.
‫And so next, let's build the two forms.
‫So that's this form right here
‫and then the main bill splitting form.
‫But we will start with this small and easy one down here.
‫So back to our app.
‫Let's create the next component
‫which is called form add friend.
‫So, here, let's return a form element
‫with the class name of form add friend.
‫So just the same as the component name itself.
‫Let's have one label, which says friend name.
‫Then let's here add one emoji
‫with like two people
‫for example here like this.
‫And then the actual input field
‫of the type text.
‫And that's it.
‫So again, we are just building the static part
‫so we have no state here.
‫So for now, this element here
‫is of course not a controlled element yet.
‫So here, next up
‫let's have the image URL.
‫And again, I will use some emoji here.
‫Let's go for this one.
‫And then here, basically we can just duplicate
‫this line of text for now.
‫So giving that a save.
‫And finally, we need a button again.
‫So that's this button element with the class name of button.
‫So now we could just copy this here and paste it here.
‫This class name button.
‫So now we could just copy this here and paste it down here.
‫But since we need a button like this
‫multiple times throughout the user interface
‫we can just actually place this here into its own component.
‫So we need to reuse this code right here.
‫And so we just identified a new component that we need.
‫All right, and here, let's do exactly what we did before.
‫So we will specify the children prop
‫because that content of the button will come
‫into the button via this children prop.
‫So then we just display it here.
‫So remember that the children prop here will be
‫whatever is between the opening tag
‫and the closing tag of calling the component.
‫So now we save button.
‫And then here, just as before we say select.
‫And so this here is then the children
‫of this button basically.
‫So the children props right here will be select
‫in this case.
‫And so indeed everything works just as before.
‫And now we can then use the same button here
‫but this time the text will be add, alright
‫and we can't see the result of this yet
‫because we of course need to include it also here
‫in the app in the sidebar.
‫So form add friend.
‫And there it is.
‫So all we're missing now here is some button.
‫So you see that here we have this button
‫which says Add Friend.
‫And so whenever we click this button
‫then the form will open.
‫But again, for now, our app is not dynamic like this
‫but we still want the add friend button there.
‫So right here between these two.
‫And so we use again, our button component.
‫And so you see that this is a lot more comfortable
‫than always having to use the normal button element
‫with the button class attached to it.
‫So here we used that class once right here
‫and then we can reuse that button
‫with the class over and over again.
‫Add Friend.
‫While that looks a bit weird
‫I believe that the button actually should be after.
‫All right, so in fact
‫this is what we get here when we click.
‫So the button changed the text to close and it is below.
‫All right, let's just give ourselves a bit more space.
‫And then let's move on
‫to building this other main form over here.
‫So that one is called
‫the form split bill,
‫form split bill.
‫And then let's again return a form element
‫with the class name equal to the component name.
‫So form split bill, but not in CamelCase,
‫but in this other case that's more common in CSS.
‫So first we have the title split a bill with
‫and then here actually the name of the friend
‫which means that we will at some point need to pass
‫in the front object here into this component.
‫But for now, we can't really do that
‫because we don't have a way yet
‫of selecting one of the friends,
‫and then passing that friend object into the form.
‫So that is what we will do later.
‫But for now, let's just place some placeholder here.
‫Okay, and then before we keep going
‫let's include that form into the app.
‫And that's outside the sidebar here.
‫So just here inside app form split bill.
‫And there it is.
‫So let's move back down here
‫and then write the actual content of this form.
‫And actually this is pretty similar to what we have here.
‫So I'll just grab this part and paste that here.
‫And then all we need to do is to change the text here.
‫So first we have the bill value
‫and use some money emoji here.
‫Of course here the text is also different.
‫It's split bill.
‫And then let's copy this, this part, paste it here twice.
‫So your expenses or expense
‫Yet another emoji.
‫And of course you can split those if you don't want.
‫And now here the expense of your friend.
‫So I'll again just use X for now.
‫And then we want that emoji
‫of two people that we had before to symbolize
‫that this is the friend.
‫Now, okay, nice.
‫And let's see.
‫And in fact
‫the only thing that we are missing is now this select here.
‫And also this input right here should be disabled.
‫So when we add something here, for example
‫our expense is 40
‫then we should not be allowed to change Clark's expense
‫because otherwise these two values wouldn't add up
‫to the total bill value.
‫So let's do that.
‫So here we can simply use the disabled attribute.
‫So that's very simple
‫and you saw that it become grayed out there.
‫And now let's then write that select.
‫So here, another money emoji
‫for specifying who is paying the bill.
‫And then here we have a very simple select element
‫with only two options.
‫So option one is you.
‫And here let's actually specify the value also as user.
‫And then in this other one as the friend.
‫And then here we again want the friend name.
‫So let's use X,
‫and, nice.
‫Yep, that works.
‫And so with this
‫we actually finished building the static part
‫of the application.
‫And so next up
‫we are finally ready to start adding some dynamics.
‫So to add some, stay here.