All right, so in this lecture, we're going to get the actual first names and last names of users dynamically
from your inputs, which are placed on landing page.
We have to do it when the user clicks on, start with button or presses the enter key.
Before we do that, it's time to hide all the pages as a default except landing page.
For that, I'm going to use inline styling.
You can feel free and hide those pages from us as well, but for simplicity I will do it from one document.
So let's go to Index DOT Extremophile.
And right for admin panel container style property with the value display, none.
Then copy it and paste.
For Chris S..
And then do it for final results section.
So if we check Groser.
You will see that on the landing page is displayed, OK?
The next thing that we are going to do is to attach event listener to that button for that.
At first, let's select these elements, go to original documents again.
In lending page section, we have bottom, which has ideate, reboot, start with ETN, let's copy it
then go to Dom items object.
This element belongs to a landing page, so at first light right here, the comet landing page elements.
Then create new property, let's name it, as start with BGN.
And select right document that gets element by ID.
And place your ID Starquest B10.
After that, let's go to Comptroller Modu and set event in on the bottom right selected items.
That's Starquest BGN.
That attach event listener, use your click event and also write anonymous function.
All right, it's time to create new method which will manage to get first name and last name, we have
to do it in the controller module.
So let's create new methods and call it Gatesville name.
Then assigned to it anonymous function.
So this function will receive three parameters, the first parameter is going to be for current personal
data and let's write it in kind of a short way.
Then we will need to question collection from local storage, so as the second parameter lets you answer
to your storage question list.
Also, you know that we should have admin, which will be the only person with specified first name
and last name who will have access on admin panel.
So as the third parameter, I'm going to place your admin.
All right, it's time to call this function, let's go to your controller module and insight anonymous
function, right?
UI controller that got full name.
So as a first argument, we should place your current personal data on this object is created in a controller
module and in order to use it here, as you know, at first, we have to make this object public for
that.
Let's go to Chris controller module.
Then in a written statement, create new property and call it gets current personal data.
And then assigned to it the value as current personal data.
By the way, before we insert these arguments, let's create an era in which we will store first name
and last name of admin.
Right, for full name equals to.
John Smith.
I use your John Smith, but obviously you can use your your full name or any other first name and last
name.
It's absolutely up to you.
OK, also, we won't need those temporary values for user.
Let's delete them, then make this newly created a right for admin public, creates new property and
written statements and call it gets admin full name.
And then as I value assigned to it admin fullname.
All right, let's go to Comptroller Modu and use relevant argument.
As the first one that's right, Chris, controller DOT gets current personal data.
Therefore, accessing on local storage, let's place the second argument, control, although DOT gets
questioned like a storage.
And as the last one for admin parameter, let's place your controller dot get.
Admin fullName.
OK, let's test how good fullName function works, right?
Council, good luck.
Chris has started.
Then go to Browsr, reload and click on Start with Button.
You see that it works fine.
All right.
In order to get a value from inputs, we have to select those elements.
Let's take a look on index dot extremophile.
We have here input elements with Idy attributes, first name and last name.
So that select them and indomitable object adds new properties.
First, they put.
That's selected, right, documents that got elements by ID.
And etc. This is why the idea triggered first name.
Then create another property, let's call it last name you put.
Then copied this line.
And just change first name into last name.
All right, so they put elements are selected and now we have to insert the values from those inputs
into current personal data object, particularly in full name property.
So that's right.
Current person, that full name.
So we have access on array and using push method, let's insert into it the value of first name input.
Why not push?
And then as an argument, right, don't items that first name you put.
And Yassir.
That value.
We need to do the same for last time input, therefore, that copy this line and change first name into
last night.
All right, let's consider what current person looks like, right?
Coward person.
Go to Browsr, reload that feel input's, right, for example, Mary and then Brown.
Click on Start with Button, and we have in council current personal data in which fullName property
includes first name and last name of user.
All right, so when the user fills up inputs and clicks them button, we want him or her to move directly
to the section for that on, we need to hide landing page and at the same time display Cui's section.
In order to do that, we need to select section elements of landing page and quiz section as well.
So go to a estimate of documents.
The landing page section element has the class name landing page container, let's copy it.
Then in might also create new property.
And place it before starting with beauty and elements, right, landing page section.
That selected documents that.
And use your service selector method.
And then Paiste class name, landing page container.
In the same way we had to select Chris Christian element, so let's grab its name from Actimel documents.
And then again, property in top items object.
This element belongs to Chris S. So adds new property at the top in section elements and call it quits
section.
That's likely to document that selecter.
And paste, the last name containing.
All right, let's go back to get fullName methods in order to hide landing page section.
We're going to write your dumb items, start landing page section.
And we have to use style property.
That display.
Which equals to none.
And then in order to display this section, we have to write some items.
That's Chris S..
That style.
Use again, display property, but with the value as block.
OK, let's see how it works, go to browser, feel the inputs.
Then click on button.
And you can see that it works, we moved directly to Chris Page, as you see here, we do not have any
questions.
And in order to add them, you know that we need to get on admin panel.
So let's go ahead and do it for that.
We have to use if statements.
And also surround this coat with curly braces.
And then as a condition, let's write those items.
That first name inputs that value.
Triple equals to admin and use your index number for first name zero.
Then writes logical and operator.
And.
Right, Dalmatians dot last name input.
That value.
Triple A close to admin and the index number one.
So if this condition is true, I mean, if the user's full name is John Smith, that user will be moved
onto this section.
But actually we need the opposite.
If the users full name is John Smith, then he should get on admin panel for doing that.
We have to use logical not operator and write it before this condition.
Also surround the condition itself with paralysis.
Then in order to make a landing page, headshot and display admin panel as well, create P&L statements.
Then copy from each statement, those two lines.
Let's leave the first one as it is.
And instead of U.S., we need here admin panel, so let's select these elements, admin panel section
has class name, admin panel container, let's copy it, then go to the items object and.
Add one more property, let's call it admin panel section.
Then right, documents dot querrey selecter.
And paste your class name, admin panel container.
Then go back to get full name function and change section into admin panel section.
All right, go to Browsr and fill the inputs, right, for example, Nic, though.
So we got on with S..
If we revote and then type.
The full name of that woman, John Smith.
We will get directly on Admon panel.
All right, let's prepare here, hear one question, right?
How are you?
Then at.
Options are fine, but.
So, so, and the last one.
Fantastic.
Then reload again and log in as a usual user, right?
Again you go.
You see that we got on Chris page and here we have our newly added question, OK?
Everything works great so far.
The next step to do is to validate those inputs because, for example, if we leave them empty and click
on button, we will move to Chris S..
So let's fix that to go back to Brackett's and create new statements.
Then let's place the code inside it nicely.
As a condition, we need to define the value of inputs, not to be empty.
For that, we have to write those items that first name inputs.
That's value.
Not equal to three.
And at the same time, you have to do it for last name and put the right and operator then dumped items
that last name input's.
That value.
Not equals to empty quotes.
So if this condition is false, we need to somehow warn the user to feel the inputs for that, let's
create a statement.
In which we have to place other method.
With the message text, please enter your first name and last name.
Let's just go to Browsr.
At first, let's leave empty both inputs, so we got that message.
If we fill one of the inputs and leave another empty again, then we will get the same message.
All right, it works fine.
And the last thing to validate is to check if there is prepared at least one question by admin for doing
that.
We need to check if the length of question collection is greater than zero.
So let's create another statement.
In condition, we need to use storage question list parameter right storage question list that DOT gets
question collection.
That length is greater than zero.
So if this condition is false, if there is not prepared at least one question by admin, then again,
we need to one user.
So let's create a statement.
Then use again alert method.
With the text, Chris is not ready.
Please contact to administrator.
Let's go to Browsr and fill the inputs.
So we moved to create suction because there was created one question.
Let's delete it.
And for that, we have to log in as admin.
Then.
Delete the question and again, try to log in as user.
You see that we got a message, Chris is not ready.
Please contact your administrator.
All right, that's fine.
So we have completed working on get full name function.
Everything works properly.
And the last thing that we are going to do in this lecture is to work this function on pressing the
enter key.
Actually, this is known for it because we have used it in Don section when we were working on notes
manager app.
So let's use this knowledge, go to control our module.
We want the anarchy to work when the user has focus on the last name input, actually we need to use
to add event listeners first one, we need to attach to last name inputs and use focus event.
So.
Right.
Selected items.
But last night, you put.
But that event listener.
And use your focus event.
That anonymous function.
So the event will be fired, one user focus on last name input, and after that, we need to attach
a second event listener with key press event.
So write selected items.
That last name implies.
Use again, event listener.
And then.
Key press event.
Right.
Also, anonymous function.
And again, we need to hear event objects in order to define the key code value.
Then we need to have statements in which we have to invoke get full name function when the key code
value of event object will be touching because and Turkey, as you remember, has the key code as 13.
So.
Right.
He thought he called triple equals to 13.
So if this condition is true, then we need to invoke Gasconade function, let's call it.
Antipasti, Teare.
All right, this was the last step in this video, let's test again if everything works fine, feel
the inputs, then press enter.
You see that we got a lot message, Chris is not ready.
Please contact your administrator.
All right, this should work for admin as well, so type here, John Smith.
And you see that we got an admin panel.
All right, so everything works perfectly.
Let's move on.