All right.
With our initial logic in place next we're going to set up our Jay sex so instead of a sad little hello
we're going to add our form.
Now in this case I'm gonna head over to a log in page just so we can see whatever we're adding and we're
gonna get her off this Hello.
One more heading with a hello and then we're gonna set up our section then within the section there
is gonna first be heading to but I'm going to start by adding some kind of class name.
So when I had a class name to my section I want to go with class name.
Then we're gonna go with form section like so and then they heading.
Value is gonna depend on whether the user is a member or user needs to register.
So we're going to have a hearing to Xi'an within the heading to WE'RE GONNA HAVE A is member.
So we're gonna check if the user is member if the user is a member then we're going to show that the
user needs to just sign in.
That's the reason why they're heading to is gonna have value signing.
If the user is not a member.
So if the value is going to be false then user needs to register and for that we're going to use their
operator server to say if the user is true then we're going to show text sign in if the user is false.
Well then let's just go and register.
Let's save it.
And we're also gonna need to add some class name here.
So we're gonna go with class name and the classes section title like so let's save it.
Now we have our initial text and then we're gonna have the form.
So right after the hearing too We're gonna have a form with a class name of log in form and then for
as the action we're gonna delete it.
We're not going to use it.
And then within the form let's start by setting up our inputs and our inputs are gonna sit within a
div.
So let me scroll down a bit.
Then let's set up some comments.
At least I like to set up comments that way.
It just shows me where my input starts and where it ends.
So we're gonna go with single input I'm right or we're going to copy and paste it.
And in this case we're going to set up and off single input.
And like I said the input is gonna sit within a div.
So first there's gonna be div with class or form control then within div we're gonna have a label.
So let's go.
Label.
It's gonna be for email.
So can write email.
The value is gonna be email.
And next we're gonna have our input as far as the type it is going to be.
Email already guessed it.
Then the idea is also going to be email just so we can work nicely with our label.
So email.
And then as far as the value well we have the state value correct.
So we have already email so we can use the value attribute and set it equal to an email as well as we
have the on change.
So we have an event listener and we can use our set email right there in line.
Now you could set up separate function here for each and every input or you can set up one function
that handles your on change.
But in my case I'm just gonna do all of them in line.
So we're going to write here the value value.
Like I said it's gonna be equal to a state value with the name of email with the name of email and then
we have on change and we're to set up everything in line so we're going to say that there's gonna be
a function that function is gonna get a vent object and then we're gonna run our set email that is coming
as the function that controls our state value and then we're just gonna pass an event target and then
we're looking for the value because again we have access to event object right now then with our input
we have a target and then value.
So let's save it and then each and every time we're gonna type something if we're gonna console log
of course we're going to see that we have obviously email.
OK.
Now let's copy and paste that that was the whole point where I set it up using the comments because
it's gonna be easier to add two more.
So let's add two more now in this case of course we just need to change some values around.
So the second one is going to be the password.
Let me make sure that I'm working with the correct one.
So we have the e-mail first then we're going to have a password password and pretty much is gonna be
exactly the same apart from changing some values around.
So in this case I can just select maybe a few of them right away so second third.
Like so I just I password and probably could have done this as well.
So let's change this one to a password state value and then the function of course is not set email.
The function is set password not save it.
We have our second input and then as far as the third one was the third one is going to depend whether
we are a user or not.
Because again if we check out the finished application which is not in the desktop so we're going to
head over the other way if we have a register then we are showing the user and we're displaying that
by toggling our member.
So if the member is true then of course we're going to show only email and password.
Well if the member is false then we're going to also show the user name so we can set up for sure our
div and everything.
But eventually it's just going to depend on the value of IS member.
So if the member is going to be true then we're not going to show the user name.
If the member is false then we're going to show the user name.
So first I guess let's the values and type is gonna be text.
So simple text.
Now the I.D. is gonna be user name user name.
Probably the HDMI four is also gonna be user name then as well as the text user user name and then on
change of course we have different function we have set user name.
And then like I said we're gonna say for now we're gonna show our input but then we're gonna set up
our condition where let's say right after the comments we're gonna have here.
If the user is not a member.
So if he is member is false then only we would want to show because we don't want to show it if already
member has a register because there's no point we can just use email and password.
So let me selected let me cut this out and we're gonna save it.
And now of course because my member is true we're not showing the password eventually we're gonna do
it with our function of course but now I'm just gonna hard code or I'm gonna say set member is in fact
false and if it is false then of course we're showing remember.
So let me set it back to true then we're gonna scroll down and next one up I would want to show my is
empty or I'm gonna show the button.
So again this is going to depend on the is empty value which is hardcoded right now not false.
So if my fields are empty then I'm not going to show the submit button then I'm just gonna show the
text where please fill out all the form fields if my fields have been filled out then of course we're
gonna show our button.
So right after the single input.
So let me head over down let me look for my last single input which I had a comment of empty form text
like so and then this is going to depend on conditional.
So I'm gonna right away say if is empty is true then I would want to show of course my text.
So then we're gonna look for a paragraph right away.
Let's set up tags.
The class name is going to be form empty.
And then the text is just gonna be please fill out all form fields like so let's say it.
And of course since it is right away set the balls then of course we can't see our paragraph if we're
gonna hardcoded the true then we can see please fill out all the form fields since my button is going
to depend also on is empty.
And in fact I'm going to show only the button if these empty is false.
Meaning if the form fields have been filled out I'm going to hard code this one back to FALSE.
So we saw a paragraph that's awesome.
Now let's scroll down on the last thing we're gonna add is our button.
So again somewhere after our paragraph we're gonna have another comment where you say sub Mitt Beatty
then and here we're going to write again our conditional where if the is empty is false meaning if we
have filled out all the form fields well then we're gonna show our button.
So let's go with button.
And that's not what we wanted.
So let me make sure that I set up a correct element.
I have my button.
Great.
Then the type is going to be sub met.
Then as far as classes we're gonna go with class name.
And between Beatty and block Beatty and primary and on click we're gonna run the handles submit.
So there's gonna be click listener so on click.
And remember we set up a placeholder for a function.
So we had some initial structure.
So we're gonna go with handle submit and in fact our submit button is gonna have a text of submit.
And remember two minutes ago when I said that that's gonna be the last thing I'll actually misled you
a little bit because in fact there's also gonna be our toggling so I can look my head over properly
to my project notice in the bottom we also have a toggle.
So my bad.
I said that submit button is gonna be the last thing but in fact we're still gonna have to set up a
paragraph which is gonna have the button for toggling.
So in that case we're going to toggle between the Register as well as the assignment.
So hopefully you're not too mad.
We're gonna head over where the end of our submit button is.
And then we're going to set up one more comment register link like so.
Let me scroll down a bit just so I can see a bit better.
And then that is gonna be a paragraph with a class name of register link.
Now within the paragraph the text is gonna toggle between need to register and already member.
And again we're checking for the member value.
So we're going to go with is no.
Then we're going to set up our ternary operator need to register or we have already already a member.
So if the user is already a member or already a member or so.
And then of course we have our button.
So all right within the paragraph we're also gonna have a button.
The type is going to be a button like so and then we're gonna have our click event listener and once
we click on the button well then we're gonna run our toggle member which again currently is just a empty
function.
So let's set it up on click click event listener and lets Iran handle submit and let just right here
click here.
Something like that or whatever you would like to place within the button again.
Currently nothing is going to happen.
You can click all day long but we do have our initial setup.
So now we can expand on that and set up some basic functionality just a quick update guys instead of
value for the email for the user name we need to access the proper state value which is user name.