1
00:00:00,120 --> 00:00:00,750
All right.

2
00:00:00,750 --> 00:00:07,110
With our initial logic in place next we're going to set up our Jay sex so instead of a sad little hello

3
00:00:07,590 --> 00:00:09,240
we're going to add our form.

4
00:00:09,240 --> 00:00:14,850
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

5
00:00:14,850 --> 00:00:16,260
gonna get her off this Hello.

6
00:00:16,260 --> 00:00:23,090
One more heading with a hello and then we're gonna set up our section then within the section there

7
00:00:23,090 --> 00:00:27,470
is gonna first be heading to but I'm going to start by adding some kind of class name.

8
00:00:27,960 --> 00:00:32,580
So when I had a class name to my section I want to go with class name.

9
00:00:32,580 --> 00:00:38,530
Then we're gonna go with form section like so and then they heading.

10
00:00:38,610 --> 00:00:45,000
Value is gonna depend on whether the user is a member or user needs to register.

11
00:00:45,000 --> 00:00:50,490
So we're going to have a hearing to Xi'an within the heading to WE'RE GONNA HAVE A is member.

12
00:00:50,490 --> 00:00:57,690
So we're gonna check if the user is member if the user is a member then we're going to show that the

13
00:00:57,690 --> 00:00:59,600
user needs to just sign in.

14
00:00:59,670 --> 00:01:02,670
That's the reason why they're heading to is gonna have value signing.

15
00:01:02,700 --> 00:01:04,580
If the user is not a member.

16
00:01:04,620 --> 00:01:09,360
So if the value is going to be false then user needs to register and for that we're going to use their

17
00:01:09,360 --> 00:01:17,140
operator server to say if the user is true then we're going to show text sign in if the user is false.

18
00:01:17,140 --> 00:01:19,320
Well then let's just go and register.

19
00:01:19,500 --> 00:01:20,460
Let's save it.

20
00:01:20,460 --> 00:01:24,130
And we're also gonna need to add some class name here.

21
00:01:24,130 --> 00:01:30,930
So we're gonna go with class name and the classes section title like so let's save it.

22
00:01:30,960 --> 00:01:34,670
Now we have our initial text and then we're gonna have the form.

23
00:01:34,740 --> 00:01:43,530
So right after the hearing too We're gonna have a form with a class name of log in form and then for

24
00:01:43,530 --> 00:01:45,900
as the action we're gonna delete it.

25
00:01:45,900 --> 00:01:46,790
We're not going to use it.

26
00:01:47,210 --> 00:01:52,380
And then within the form let's start by setting up our inputs and our inputs are gonna sit within a

27
00:01:52,380 --> 00:01:52,940
div.

28
00:01:53,010 --> 00:01:54,700
So let me scroll down a bit.

29
00:01:54,930 --> 00:01:56,760
Then let's set up some comments.

30
00:01:56,760 --> 00:02:00,000
At least I like to set up comments that way.

31
00:02:00,000 --> 00:02:03,490
It just shows me where my input starts and where it ends.

32
00:02:03,510 --> 00:02:07,360
So we're gonna go with single input I'm right or we're going to copy and paste it.

33
00:02:07,800 --> 00:02:12,040
And in this case we're going to set up and off single input.

34
00:02:12,150 --> 00:02:14,640
And like I said the input is gonna sit within a div.

35
00:02:14,640 --> 00:02:23,510
So first there's gonna be div with class or form control then within div we're gonna have a label.

36
00:02:23,510 --> 00:02:24,200
So let's go.

37
00:02:24,200 --> 00:02:25,480
Label.

38
00:02:25,640 --> 00:02:26,780
It's gonna be for email.

39
00:02:26,780 --> 00:02:28,410
So can write email.

40
00:02:28,430 --> 00:02:30,330
The value is gonna be email.

41
00:02:30,350 --> 00:02:35,370
And next we're gonna have our input as far as the type it is going to be.

42
00:02:35,370 --> 00:02:37,140
Email already guessed it.

43
00:02:37,190 --> 00:02:41,870
Then the idea is also going to be email just so we can work nicely with our label.

44
00:02:42,350 --> 00:02:43,430
So email.

45
00:02:43,610 --> 00:02:47,730
And then as far as the value well we have the state value correct.

46
00:02:47,750 --> 00:02:54,260
So we have already email so we can use the value attribute and set it equal to an email as well as we

47
00:02:54,260 --> 00:02:56,420
have the on change.

48
00:02:56,420 --> 00:03:01,520
So we have an event listener and we can use our set email right there in line.

49
00:03:01,520 --> 00:03:07,970
Now you could set up separate function here for each and every input or you can set up one function

50
00:03:08,330 --> 00:03:10,560
that handles your on change.

51
00:03:10,560 --> 00:03:12,930
But in my case I'm just gonna do all of them in line.

52
00:03:13,040 --> 00:03:16,330
So we're going to write here the value value.

53
00:03:16,360 --> 00:03:22,190
Like I said it's gonna be equal to a state value with the name of email with the name of email and then

54
00:03:22,190 --> 00:03:27,740
we have on change and we're to set up everything in line so we're going to say that there's gonna be

55
00:03:27,740 --> 00:03:34,850
a function that function is gonna get a vent object and then we're gonna run our set email that is coming

56
00:03:35,180 --> 00:03:42,200
as the function that controls our state value and then we're just gonna pass an event target and then

57
00:03:42,200 --> 00:03:48,830
we're looking for the value because again we have access to event object right now then with our input

58
00:03:48,860 --> 00:03:51,490
we have a target and then value.

59
00:03:51,530 --> 00:03:56,180
So let's save it and then each and every time we're gonna type something if we're gonna console log

60
00:03:56,180 --> 00:03:59,360
of course we're going to see that we have obviously email.

61
00:04:00,110 --> 00:04:00,870
OK.

62
00:04:00,950 --> 00:04:07,040
Now let's copy and paste that that was the whole point where I set it up using the comments because

63
00:04:07,040 --> 00:04:09,750
it's gonna be easier to add two more.

64
00:04:09,920 --> 00:04:14,720
So let's add two more now in this case of course we just need to change some values around.

65
00:04:14,720 --> 00:04:16,450
So the second one is going to be the password.

66
00:04:16,450 --> 00:04:18,990
Let me make sure that I'm working with the correct one.

67
00:04:19,100 --> 00:04:26,510
So we have the e-mail first then we're going to have a password password and pretty much is gonna be

68
00:04:26,780 --> 00:04:30,250
exactly the same apart from changing some values around.

69
00:04:30,260 --> 00:04:35,940
So in this case I can just select maybe a few of them right away so second third.

70
00:04:35,960 --> 00:04:41,540
Like so I just I password and probably could have done this as well.

71
00:04:41,660 --> 00:04:48,540
So let's change this one to a password state value and then the function of course is not set email.

72
00:04:48,560 --> 00:04:52,230
The function is set password not save it.

73
00:04:52,340 --> 00:04:58,520
We have our second input and then as far as the third one was the third one is going to depend whether

74
00:04:58,520 --> 00:05:00,950
we are a user or not.

75
00:05:00,950 --> 00:05:05,630
Because again if we check out the finished application which is not in the desktop so we're going to

76
00:05:05,630 --> 00:05:12,290
head over the other way if we have a register then we are showing the user and we're displaying that

77
00:05:12,290 --> 00:05:14,310
by toggling our member.

78
00:05:14,330 --> 00:05:20,330
So if the member is true then of course we're going to show only email and password.

79
00:05:20,330 --> 00:05:26,810
Well if the member is false then we're going to also show the user name so we can set up for sure our

80
00:05:26,810 --> 00:05:27,980
div and everything.

81
00:05:27,980 --> 00:05:32,210
But eventually it's just going to depend on the value of IS member.

82
00:05:32,210 --> 00:05:37,070
So if the member is going to be true then we're not going to show the user name.

83
00:05:37,130 --> 00:05:40,630
If the member is false then we're going to show the user name.

84
00:05:40,640 --> 00:05:44,710
So first I guess let's the values and type is gonna be text.

85
00:05:44,900 --> 00:05:47,510
So simple text.

86
00:05:47,510 --> 00:05:52,440
Now the I.D. is gonna be user name user name.

87
00:05:52,490 --> 00:06:02,960
Probably the HDMI four is also gonna be user name then as well as the text user user name and then on

88
00:06:02,960 --> 00:06:08,150
change of course we have different function we have set user name.

89
00:06:08,150 --> 00:06:13,820
And then like I said we're gonna say for now we're gonna show our input but then we're gonna set up

90
00:06:13,970 --> 00:06:20,090
our condition where let's say right after the comments we're gonna have here.

91
00:06:20,240 --> 00:06:22,350
If the user is not a member.

92
00:06:22,400 --> 00:06:30,380
So if he is member is false then only we would want to show because we don't want to show it if already

93
00:06:30,380 --> 00:06:35,330
member has a register because there's no point we can just use email and password.

94
00:06:35,330 --> 00:06:39,180
So let me selected let me cut this out and we're gonna save it.

95
00:06:39,320 --> 00:06:44,420
And now of course because my member is true we're not showing the password eventually we're gonna do

96
00:06:44,420 --> 00:06:50,270
it with our function of course but now I'm just gonna hard code or I'm gonna say set member is in fact

97
00:06:50,270 --> 00:06:54,020
false and if it is false then of course we're showing remember.

98
00:06:54,020 --> 00:07:00,560
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

99
00:07:00,680 --> 00:07:03,510
empty or I'm gonna show the button.

100
00:07:03,680 --> 00:07:09,240
So again this is going to depend on the is empty value which is hardcoded right now not false.

101
00:07:09,620 --> 00:07:15,350
So if my fields are empty then I'm not going to show the submit button then I'm just gonna show the

102
00:07:15,350 --> 00:07:21,920
text where please fill out all the form fields if my fields have been filled out then of course we're

103
00:07:21,920 --> 00:07:23,390
gonna show our button.

104
00:07:23,390 --> 00:07:25,320
So right after the single input.

105
00:07:25,340 --> 00:07:34,430
So let me head over down let me look for my last single input which I had a comment of empty form text

106
00:07:34,630 --> 00:07:38,210
like so and then this is going to depend on conditional.

107
00:07:38,210 --> 00:07:45,360
So I'm gonna right away say if is empty is true then I would want to show of course my text.

108
00:07:45,440 --> 00:07:47,990
So then we're gonna look for a paragraph right away.

109
00:07:47,990 --> 00:07:49,260
Let's set up tags.

110
00:07:49,430 --> 00:07:54,680
The class name is going to be form empty.

111
00:07:54,680 --> 00:08:03,930
And then the text is just gonna be please fill out all form fields like so let's say it.

112
00:08:04,150 --> 00:08:10,330
And of course since it is right away set the balls then of course we can't see our paragraph if we're

113
00:08:10,340 --> 00:08:15,790
gonna hardcoded the true then we can see please fill out all the form fields since my button is going

114
00:08:15,790 --> 00:08:18,640
to depend also on is empty.

115
00:08:18,640 --> 00:08:22,690
And in fact I'm going to show only the button if these empty is false.

116
00:08:22,990 --> 00:08:28,600
Meaning if the form fields have been filled out I'm going to hard code this one back to FALSE.

117
00:08:28,690 --> 00:08:31,150
So we saw a paragraph that's awesome.

118
00:08:31,150 --> 00:08:34,950
Now let's scroll down on the last thing we're gonna add is our button.

119
00:08:35,110 --> 00:08:43,350
So again somewhere after our paragraph we're gonna have another comment where you say sub Mitt Beatty

120
00:08:43,430 --> 00:08:51,900
then and here we're going to write again our conditional where if the is empty is false meaning if we

121
00:08:51,900 --> 00:08:56,370
have filled out all the form fields well then we're gonna show our button.

122
00:08:56,820 --> 00:08:58,390
So let's go with button.

123
00:08:58,530 --> 00:08:59,700
And that's not what we wanted.

124
00:08:59,700 --> 00:09:03,020
So let me make sure that I set up a correct element.

125
00:09:03,090 --> 00:09:04,240
I have my button.

126
00:09:04,320 --> 00:09:05,130
Great.

127
00:09:05,160 --> 00:09:08,550
Then the type is going to be sub met.

128
00:09:08,620 --> 00:09:11,520
Then as far as classes we're gonna go with class name.

129
00:09:11,610 --> 00:09:23,140
And between Beatty and block Beatty and primary and on click we're gonna run the handles submit.

130
00:09:23,140 --> 00:09:27,160
So there's gonna be click listener so on click.

131
00:09:27,160 --> 00:09:30,310
And remember we set up a placeholder for a function.

132
00:09:30,310 --> 00:09:32,690
So we had some initial structure.

133
00:09:32,860 --> 00:09:39,610
So we're gonna go with handle submit and in fact our submit button is gonna have a text of submit.

134
00:09:39,610 --> 00:09:45,490
And remember two minutes ago when I said that that's gonna be the last thing I'll actually misled you

135
00:09:45,490 --> 00:09:51,100
a little bit because in fact there's also gonna be our toggling so I can look my head over properly

136
00:09:51,370 --> 00:09:54,380
to my project notice in the bottom we also have a toggle.

137
00:09:54,520 --> 00:09:55,450
So my bad.

138
00:09:55,750 --> 00:10:00,610
I said that submit button is gonna be the last thing but in fact we're still gonna have to set up a

139
00:10:00,610 --> 00:10:03,760
paragraph which is gonna have the button for toggling.

140
00:10:04,030 --> 00:10:08,300
So in that case we're going to toggle between the Register as well as the assignment.

141
00:10:08,710 --> 00:10:11,580
So hopefully you're not too mad.

142
00:10:11,680 --> 00:10:15,590
We're gonna head over where the end of our submit button is.

143
00:10:15,820 --> 00:10:21,440
And then we're going to set up one more comment register link like so.

144
00:10:21,610 --> 00:10:24,690
Let me scroll down a bit just so I can see a bit better.

145
00:10:24,850 --> 00:10:32,160
And then that is gonna be a paragraph with a class name of register link.

146
00:10:32,290 --> 00:10:38,380
Now within the paragraph the text is gonna toggle between need to register and already member.

147
00:10:38,500 --> 00:10:40,840
And again we're checking for the member value.

148
00:10:40,840 --> 00:10:43,420
So we're going to go with is no.

149
00:10:43,510 --> 00:10:51,850
Then we're going to set up our ternary operator need to register or we have already already a member.

150
00:10:51,850 --> 00:10:59,770
So if the user is already a member or already a member or so.

151
00:11:00,010 --> 00:11:01,920
And then of course we have our button.

152
00:11:01,920 --> 00:11:05,620
So all right within the paragraph we're also gonna have a button.

153
00:11:05,710 --> 00:11:13,270
The type is going to be a button like so and then we're gonna have our click event listener and once

154
00:11:13,270 --> 00:11:20,410
we click on the button well then we're gonna run our toggle member which again currently is just a empty

155
00:11:20,410 --> 00:11:21,240
function.

156
00:11:21,370 --> 00:11:28,270
So let's set it up on click click event listener and lets Iran handle submit and let just right here

157
00:11:28,600 --> 00:11:30,630
click here.

158
00:11:30,670 --> 00:11:34,670
Something like that or whatever you would like to place within the button again.

159
00:11:34,780 --> 00:11:36,350
Currently nothing is going to happen.

160
00:11:36,400 --> 00:11:40,390
You can click all day long but we do have our initial setup.

161
00:11:40,750 --> 00:11:47,320
So now we can expand on that and set up some basic functionality just a quick update guys instead of

162
00:11:47,320 --> 00:11:54,180
value for the email for the user name we need to access the proper state value which is user name.