WEBVTT

00:01.450 --> 00:07.600
All right, so in this lecture, we're going to get the actual first names and last names of users dynamically

00:07.600 --> 00:10.100
from your inputs, which are placed on landing page.

00:10.570 --> 00:15.040
We have to do it when the user clicks on, start with button or presses the enter key.

00:15.700 --> 00:20.950
Before we do that, it's time to hide all the pages as a default except landing page.

00:21.370 --> 00:23.710
For that, I'm going to use inline styling.

00:24.070 --> 00:30.860
You can feel free and hide those pages from us as well, but for simplicity I will do it from one document.

00:31.450 --> 00:33.970
So let's go to Index DOT Extremophile.

00:35.180 --> 00:41.960
And right for admin panel container style property with the value display, none.

00:44.810 --> 00:48.170
Then copy it and paste.

00:49.370 --> 00:50.750
For Chris S..

00:52.510 --> 00:55.840
And then do it for final results section.

00:57.580 --> 00:59.110
So if we check Groser.

01:00.330 --> 01:03.990
You will see that on the landing page is displayed, OK?

01:04.860 --> 01:09.770
The next thing that we are going to do is to attach event listener to that button for that.

01:09.780 --> 01:14.790
At first, let's select these elements, go to original documents again.

01:16.250 --> 01:23.000
In lending page section, we have bottom, which has ideate, reboot, start with ETN, let's copy it

01:23.870 --> 01:25.940
then go to Dom items object.

01:27.030 --> 01:33.390
This element belongs to a landing page, so at first light right here, the comet landing page elements.

01:37.520 --> 01:42.350
Then create new property, let's name it, as start with BGN.

01:45.810 --> 01:49.190
And select right document that gets element by ID.

01:50.700 --> 01:53.310
And place your ID Starquest B10.

01:55.610 --> 02:02.420
After that, let's go to Comptroller Modu and set event in on the bottom right selected items.

02:03.390 --> 02:04.860
That's Starquest BGN.

02:06.850 --> 02:15.130
That attach event listener, use your click event and also write anonymous function.

02:17.810 --> 02:24.020
All right, it's time to create new method which will manage to get first name and last name, we have

02:24.020 --> 02:26.180
to do it in the controller module.

02:26.690 --> 02:31.310
So let's create new methods and call it Gatesville name.

02:33.460 --> 02:35.650
Then assigned to it anonymous function.

02:37.600 --> 02:43.030
So this function will receive three parameters, the first parameter is going to be for current personal

02:43.030 --> 02:46.390
data and let's write it in kind of a short way.

02:48.280 --> 02:53.970
Then we will need to question collection from local storage, so as the second parameter lets you answer

02:53.980 --> 02:55.570
to your storage question list.

02:58.320 --> 03:03.320
Also, you know that we should have admin, which will be the only person with specified first name

03:03.320 --> 03:06.140
and last name who will have access on admin panel.

03:06.740 --> 03:10.100
So as the third parameter, I'm going to place your admin.

03:11.150 --> 03:17.400
All right, it's time to call this function, let's go to your controller module and insight anonymous

03:17.420 --> 03:19.130
function, right?

03:19.130 --> 03:22.670
UI controller that got full name.

03:25.320 --> 03:32.340
So as a first argument, we should place your current personal data on this object is created in a controller

03:32.340 --> 03:38.880
module and in order to use it here, as you know, at first, we have to make this object public for

03:38.880 --> 03:39.110
that.

03:39.120 --> 03:41.130
Let's go to Chris controller module.

03:42.880 --> 03:49.500
Then in a written statement, create new property and call it gets current personal data.

03:53.140 --> 03:57.100
And then assigned to it the value as current personal data.

03:59.810 --> 04:05.540
By the way, before we insert these arguments, let's create an era in which we will store first name

04:05.540 --> 04:06.830
and last name of admin.

04:08.300 --> 04:11.150
Right, for full name equals to.

04:12.070 --> 04:13.660
John Smith.

04:15.860 --> 04:21.770
I use your John Smith, but obviously you can use your your full name or any other first name and last

04:21.770 --> 04:22.010
name.

04:22.340 --> 04:23.650
It's absolutely up to you.

04:24.900 --> 04:29.380
OK, also, we won't need those temporary values for user.

04:29.730 --> 04:37.080
Let's delete them, then make this newly created a right for admin public, creates new property and

04:37.080 --> 04:39.930
written statements and call it gets admin full name.

04:42.920 --> 04:48.050
And then as I value assigned to it admin fullname.

04:50.760 --> 04:55.440
All right, let's go to Comptroller Modu and use relevant argument.

04:56.470 --> 05:01.830
As the first one that's right, Chris, controller DOT gets current personal data.

05:04.730 --> 05:11.570
Therefore, accessing on local storage, let's place the second argument, control, although DOT gets

05:11.570 --> 05:12.740
questioned like a storage.

05:14.750 --> 05:20.450
And as the last one for admin parameter, let's place your controller dot get.

05:21.370 --> 05:22.870
Admin fullName.

05:24.870 --> 05:28.980
OK, let's test how good fullName function works, right?

05:30.100 --> 05:31.030
Council, good luck.

05:32.660 --> 05:33.860
Chris has started.

05:37.630 --> 05:42.410
Then go to Browsr, reload and click on Start with Button.

05:43.180 --> 05:44.710
You see that it works fine.

05:45.560 --> 05:46.090
All right.

05:46.720 --> 05:50.380
In order to get a value from inputs, we have to select those elements.

05:50.920 --> 05:53.470
Let's take a look on index dot extremophile.

05:54.440 --> 05:59.330
We have here input elements with Idy attributes, first name and last name.

06:00.940 --> 06:05.370
So that select them and indomitable object adds new properties.

06:07.960 --> 06:09.130
First, they put.

06:11.060 --> 06:14.780
That's selected, right, documents that got elements by ID.

06:17.290 --> 06:20.410
And etc. This is why the idea triggered first name.

06:22.100 --> 06:25.250
Then create another property, let's call it last name you put.

06:28.170 --> 06:30.390
Then copied this line.

06:31.290 --> 06:35.010
And just change first name into last name.

06:37.030 --> 06:42.760
All right, so they put elements are selected and now we have to insert the values from those inputs

06:42.760 --> 06:47.350
into current personal data object, particularly in full name property.

06:47.740 --> 06:48.730
So that's right.

06:48.730 --> 06:51.760
Current person, that full name.

06:54.010 --> 07:00.560
So we have access on array and using push method, let's insert into it the value of first name input.

07:01.010 --> 07:02.050
Why not push?

07:03.680 --> 07:08.750
And then as an argument, right, don't items that first name you put.

07:10.740 --> 07:11.610
And Yassir.

07:12.940 --> 07:13.720
That value.

07:15.510 --> 07:24.480
We need to do the same for last time input, therefore, that copy this line and change first name into

07:24.810 --> 07:25.440
last night.

07:28.800 --> 07:32.720
All right, let's consider what current person looks like, right?

07:33.910 --> 07:34.810
Coward person.

07:39.290 --> 07:47.210
Go to Browsr, reload that feel input's, right, for example, Mary and then Brown.

07:49.850 --> 07:56.480
Click on Start with Button, and we have in council current personal data in which fullName property

07:56.480 --> 07:59.060
includes first name and last name of user.

07:59.940 --> 08:06.540
All right, so when the user fills up inputs and clicks them button, we want him or her to move directly

08:06.540 --> 08:13.980
to the section for that on, we need to hide landing page and at the same time display Cui's section.

08:14.520 --> 08:20.070
In order to do that, we need to select section elements of landing page and quiz section as well.

08:20.640 --> 08:22.800
So go to a estimate of documents.

08:25.010 --> 08:31.070
The landing page section element has the class name landing page container, let's copy it.

08:32.140 --> 08:35.140
Then in might also create new property.

08:36.520 --> 08:42.280
And place it before starting with beauty and elements, right, landing page section.

08:44.540 --> 08:46.850
That selected documents that.

08:47.930 --> 08:49.880
And use your service selector method.

08:51.160 --> 08:54.850
And then Paiste class name, landing page container.

08:56.710 --> 09:03.370
In the same way we had to select Chris Christian element, so let's grab its name from Actimel documents.

09:05.930 --> 09:09.350
And then again, property in top items object.

09:10.290 --> 09:17.220
This element belongs to Chris S. So adds new property at the top in section elements and call it quits

09:17.220 --> 09:17.730
section.

09:20.270 --> 09:23.810
That's likely to document that selecter.

09:24.910 --> 09:28.540
And paste, the last name containing.

09:30.950 --> 09:36.360
All right, let's go back to get fullName methods in order to hide landing page section.

09:37.170 --> 09:41.870
We're going to write your dumb items, start landing page section.

09:43.240 --> 09:45.580
And we have to use style property.

09:46.880 --> 09:48.140
That display.

09:49.210 --> 09:50.620
Which equals to none.

09:53.590 --> 09:57.880
And then in order to display this section, we have to write some items.

09:58.950 --> 10:00.150
That's Chris S..

10:01.390 --> 10:02.350
That style.

10:03.820 --> 10:08.350
Use again, display property, but with the value as block.

10:11.290 --> 10:16.090
OK, let's see how it works, go to browser, feel the inputs.

10:18.800 --> 10:20.090
Then click on button.

10:21.190 --> 10:27.700
And you can see that it works, we moved directly to Chris Page, as you see here, we do not have any

10:27.700 --> 10:28.290
questions.

10:28.660 --> 10:33.090
And in order to add them, you know that we need to get on admin panel.

10:33.550 --> 10:36.340
So let's go ahead and do it for that.

10:36.340 --> 10:38.050
We have to use if statements.

10:39.870 --> 10:44.460
And also surround this coat with curly braces.

10:46.220 --> 10:50.350
And then as a condition, let's write those items.

10:51.550 --> 10:54.580
That first name inputs that value.

10:55.740 --> 11:02.280
Triple equals to admin and use your index number for first name zero.

11:03.730 --> 11:06.520
Then writes logical and operator.

11:07.610 --> 11:08.090
And.

11:09.030 --> 11:11.550
Right, Dalmatians dot last name input.

11:13.450 --> 11:14.350
That value.

11:16.220 --> 11:20.000
Triple A close to admin and the index number one.

11:22.440 --> 11:30.480
So if this condition is true, I mean, if the user's full name is John Smith, that user will be moved

11:30.480 --> 11:31.580
onto this section.

11:32.550 --> 11:34.380
But actually we need the opposite.

11:34.890 --> 11:40.920
If the users full name is John Smith, then he should get on admin panel for doing that.

11:40.950 --> 11:46.290
We have to use logical not operator and write it before this condition.

11:48.260 --> 11:52.040
Also surround the condition itself with paralysis.

11:54.290 --> 12:00.500
Then in order to make a landing page, headshot and display admin panel as well, create P&L statements.

12:03.500 --> 12:07.070
Then copy from each statement, those two lines.

12:10.440 --> 12:12.990
Let's leave the first one as it is.

12:14.840 --> 12:23.150
And instead of U.S., we need here admin panel, so let's select these elements, admin panel section

12:23.150 --> 12:31.520
has class name, admin panel container, let's copy it, then go to the items object and.

12:32.570 --> 12:36.830
Add one more property, let's call it admin panel section.

12:40.670 --> 12:43.870
Then right, documents dot querrey selecter.

12:46.700 --> 12:50.380
And paste your class name, admin panel container.

12:52.650 --> 12:58.290
Then go back to get full name function and change section into admin panel section.

13:01.190 --> 13:08.150
All right, go to Browsr and fill the inputs, right, for example, Nic, though.

13:10.820 --> 13:12.860
So we got on with S..

13:14.210 --> 13:16.670
If we revote and then type.

13:18.410 --> 13:20.660
The full name of that woman, John Smith.

13:23.170 --> 13:25.480
We will get directly on Admon panel.

13:26.620 --> 13:29.640
All right, let's prepare here, hear one question, right?

13:29.680 --> 13:30.340
How are you?

13:32.960 --> 13:33.670
Then at.

13:34.630 --> 13:37.060
Options are fine, but.

13:38.560 --> 13:40.630
So, so, and the last one.

13:41.590 --> 13:42.250
Fantastic.

13:43.730 --> 13:49.170
Then reload again and log in as a usual user, right?

13:49.190 --> 13:50.210
Again you go.

13:53.200 --> 14:00.490
You see that we got on Chris page and here we have our newly added question, OK?

14:00.940 --> 14:03.040
Everything works great so far.

14:03.520 --> 14:10.210
The next step to do is to validate those inputs because, for example, if we leave them empty and click

14:10.210 --> 14:12.610
on button, we will move to Chris S..

14:14.350 --> 14:18.370
So let's fix that to go back to Brackett's and create new statements.

14:22.180 --> 14:24.780
Then let's place the code inside it nicely.

14:29.760 --> 14:33.840
As a condition, we need to define the value of inputs, not to be empty.

14:34.320 --> 14:38.700
For that, we have to write those items that first name inputs.

14:40.330 --> 14:41.260
That's value.

14:43.330 --> 14:45.250
Not equal to three.

14:47.920 --> 14:54.040
And at the same time, you have to do it for last name and put the right and operator then dumped items

14:54.730 --> 14:56.350
that last name input's.

14:58.180 --> 14:59.140
That value.

15:00.560 --> 15:03.140
Not equals to empty quotes.

15:06.330 --> 15:13.350
So if this condition is false, we need to somehow warn the user to feel the inputs for that, let's

15:13.350 --> 15:14.670
create a statement.

15:17.420 --> 15:21.440
In which we have to place other method.

15:22.790 --> 15:29.810
With the message text, please enter your first name and last name.

15:35.510 --> 15:37.190
Let's just go to Browsr.

15:39.110 --> 15:43.640
At first, let's leave empty both inputs, so we got that message.

15:44.560 --> 15:51.790
If we fill one of the inputs and leave another empty again, then we will get the same message.

15:52.600 --> 15:54.660
All right, it works fine.

15:55.030 --> 16:01.480
And the last thing to validate is to check if there is prepared at least one question by admin for doing

16:01.480 --> 16:01.740
that.

16:01.750 --> 16:06.450
We need to check if the length of question collection is greater than zero.

16:07.120 --> 16:09.450
So let's create another statement.

16:12.270 --> 16:21.600
In condition, we need to use storage question list parameter right storage question list that DOT gets

16:21.600 --> 16:22.560
question collection.

16:24.590 --> 16:28.040
That length is greater than zero.

16:30.230 --> 16:36.110
So if this condition is false, if there is not prepared at least one question by admin, then again,

16:36.110 --> 16:37.340
we need to one user.

16:37.670 --> 16:40.700
So let's create a statement.

16:42.160 --> 16:44.560
Then use again alert method.

16:45.490 --> 16:49.230
With the text, Chris is not ready.

16:50.630 --> 16:53.660
Please contact to administrator.

16:59.090 --> 17:02.150
Let's go to Browsr and fill the inputs.

17:05.820 --> 17:09.810
So we moved to create suction because there was created one question.

17:10.930 --> 17:12.100
Let's delete it.

17:12.250 --> 17:15.310
And for that, we have to log in as admin.

17:18.820 --> 17:19.240
Then.

17:21.010 --> 17:24.400
Delete the question and again, try to log in as user.

17:28.430 --> 17:31.730
You see that we got a message, Chris is not ready.

17:31.940 --> 17:33.590
Please contact your administrator.

17:34.820 --> 17:36.840
All right, that's fine.

17:37.340 --> 17:40.080
So we have completed working on get full name function.

17:40.430 --> 17:41.780
Everything works properly.

17:42.110 --> 17:47.060
And the last thing that we are going to do in this lecture is to work this function on pressing the

17:47.060 --> 17:47.730
enter key.

17:48.350 --> 17:55.100
Actually, this is known for it because we have used it in Don section when we were working on notes

17:55.100 --> 17:55.840
manager app.

17:56.540 --> 17:59.960
So let's use this knowledge, go to control our module.

18:01.400 --> 18:08.450
We want the anarchy to work when the user has focus on the last name input, actually we need to use

18:08.450 --> 18:15.140
to add event listeners first one, we need to attach to last name inputs and use focus event.

18:15.620 --> 18:15.850
So.

18:15.860 --> 18:16.100
Right.

18:16.100 --> 18:17.390
Selected items.

18:20.530 --> 18:22.060
But last night, you put.

18:23.690 --> 18:25.370
But that event listener.

18:26.870 --> 18:29.480
And use your focus event.

18:30.410 --> 18:31.940
That anonymous function.

18:34.430 --> 18:40.220
So the event will be fired, one user focus on last name input, and after that, we need to attach

18:40.220 --> 18:42.850
a second event listener with key press event.

18:43.370 --> 18:45.620
So write selected items.

18:47.010 --> 18:48.570
That last name implies.

18:50.430 --> 18:52.470
Use again, event listener.

18:53.810 --> 18:54.440
And then.

18:55.430 --> 18:56.360
Key press event.

18:58.330 --> 18:58.530
Right.

18:58.630 --> 18:59.950
Also, anonymous function.

19:01.770 --> 19:06.300
And again, we need to hear event objects in order to define the key code value.

19:10.060 --> 19:16.360
Then we need to have statements in which we have to invoke get full name function when the key code

19:16.360 --> 19:22.860
value of event object will be touching because and Turkey, as you remember, has the key code as 13.

19:23.110 --> 19:23.380
So.

19:23.380 --> 19:23.680
Right.

19:23.690 --> 19:28.690
He thought he called triple equals to 13.

19:30.910 --> 19:36.970
So if this condition is true, then we need to invoke Gasconade function, let's call it.

19:38.000 --> 19:39.260
Antipasti, Teare.

19:40.390 --> 19:46.630
All right, this was the last step in this video, let's test again if everything works fine, feel

19:46.630 --> 19:49.390
the inputs, then press enter.

19:50.330 --> 19:53.650
You see that we got a lot message, Chris is not ready.

19:53.840 --> 19:55.460
Please contact your administrator.

19:56.710 --> 20:01.750
All right, this should work for admin as well, so type here, John Smith.

20:03.270 --> 20:05.490
And you see that we got an admin panel.

20:07.150 --> 20:10.210
All right, so everything works perfectly.

20:10.660 --> 20:11.370
Let's move on.