Welcome back, my friend.
Welcome to another lecture today we are going to do is we are going to work in our art galleries function.
Now, let me just say this.
We want this form fields data that is stored here to grab it somewhere in the function.
Right.
And we can do just right here in this function.
But remember that we created a couple of controllers and everything that is related with this graphical
user interface.
It's we are going to do an app UI controller, and that is why we in this controller, what we can do
is we can create a function here that will be a public in order.
This main controller or in this in this add calories function be able to access because remember this
closure and if it functions, they create data, encapsulation.
Everything that is private will remain private and it's not be accessible by outside school, but it
can be accessible by the by this function here.
So I'm going to create a variable here for storing the data and it will be get form input.
And this variable I will show you just later, this variable will hold the entire object or the data
of the dysfunction that will return it from here.
Right.
It will store.
It will keep it everything.
Now, the most easiest thing is we can just say return.
So we need to return a public function to return and we can return here an object.
So I will say get form data like that and I will create a function without any parameter, without any
arguments.
That's pretty much it inside.
No.
The most interesting part is how to grab all of this data here.
Let's look.
We do have this select we do have this input.
We do have this quantity and we do have this calories.
We do have four form fields.
So here it is in a short form.
We do have this and we can use the square we selected to target each individual classes in grep what's
inside that form.
So let's do this.
I'm just going to grab the type first and now inside.
What I'm going to do is I'm going again.
I'm going to return an object, for example, the type L.C type in document, that query selector.
And I'm going to select this one, but with a dot.
Right.
And I'm just going to say dot value.
Now, this not no value, just the value.
Now what?
We'll do this because we're dealing with select here.
Right?
This is a select and based on the selection, I will have food and exercise, but now the food and exercise
or consider it as a placeholder.
Right.
And what this that dot value will return.
The option values this to here.
When we do with inputs, the value will be everything that we have in the input that we're going to
write here.
But we the select is going to grab this option in what inside this value added burn will be returned.
Right.
Let's test this out to see if it's going to work.
Now, I do have this right and it's going to return this data.
So I'm going to store it here and get for my input.
But how are we going to do this now?
The main controller will talk with this app UI controller to this app with this app UI controller here
that we're passing.
So how are we going to see it get form input?
It will be equal to Abdulahad controller DOT, get form data or that will be the public method that
we are returning here.
Right.
And we actually returning an object.
So let's see if it's going to work because we're talking too much and we don't know.
So if I click here, I'm just going to refresh and yeah, it's not going to work.
One reason because we we're not cancelling log the get form input.
Right when it comes a lot.
What's is stored in this.
So actually this gets from data will return to an object and that object will be stored in this one
now.
So if I click now here and if I select food.
In the food in our home I was actually at, so I would like to see that our our logic, it will return
an object with the value of at it.
It is.
So the type is at right.
This type can be anything you can see, but you can see even select.
Right.
It's not going to change much.
It is going to be selecta so you can choose your name.
I'm just naming because this is the input type of of art or burn we are adding on burning calories.
This will be here.
We're going to see description these here.
We will say quantity.
This year we will see calories.
How cool is this?
Now we know that the type is done, so I'm just going to copy it here.
I just want to return to the last three other things.
So I'm just going to grab this description and I'm going to say, OK, this should be name description.
And you can even use a short name, short form description and grab the value.
Now, the next one will be quality.
And I'm going to say quantity and I'm going to grab the quantity class.
And remember, we do have this two here, this is two classes just going to grab this one, they're
both no, I'm going to grab that one.
Yeah, I did.
I did.
Yeah.
So now I do have we need to change this into calories, right?
Because that is for the calories, so let's make it like this so I have type description, calories,
quantity.
Now I expect an object with all these four input form fields.
Let's see what's happening.
So if I go back here and if I type food, if I go ice cream, it's not a food quantity to add calories.
And if I hit, enter or receive, I should have type of ad.
So I have this object containing calorie description, quantity and type.
And so if I go back to exercise and I will see run, I will say one lap and 180.
Now I click enter and here it is.
So it's a burn.
The type is burn because that is the type that we have here.
So if I say burn one and add to like that burn add one now next time when I save something.
So let's say food to five hundred and fifty five.
Now we'll have add one whatever we have here as a value that will be displayed there.
So I hope I'm clear now everything is working food and because this is selected by, by I'm means preselected,
that's why it's going to give us.
But we do have a one problem here and then we need to we need to fix this problem.
We do have description calories in quantity.
They are empty.
And we don't want to store something in our storage or data that is empty.
So that is not a good thing.
But we can fix that one later.
But what else we can do?
No, let's see what we have done.
So we've created an object here that is returning this get form data inside the form data we return
object containing that description, calories quantity that we grabbing from the from the form and why
we put it in your controller, because this is related with APU and controller and now we know how this
breach is working.
We use this app, you controller and here it is, you change its color because we use it.
We haven't used the calories controller because the calories controller will be for this module here.
Right here.
And I'm CONSOLI.
Well that's pretty much it.
So get form input contains everything that we returning from this object here.
Now, one more thing before we finish this lecture.
Now, the thing is that we are using class names here, right here, OK, class names to target this
query selector.
But what if we can do it in a little bit better way?
We can create an object here that is private and I will not be able to access it here, but I will be
able to access it if I return to something right.
And that object will hold this class name values.
So we can do that.
Now I'm going to create here very, very variable HTML class.
Names and why choose to class name, because I'm going to store all the class names from now on into
this private object and why it's private, you will see.
Now I'm just going to say type class in here.
I will store these type class.
How cool is this?
I'm just going to copy it.
All right.
So next, what I do have I do have short form description and this type class, you can name it according
to your project, or if you think that this should be select class, just use it to let class or.
Yeah, you can say, yeah, this is most most logical for me to use this name.
Now, here I'm going to say description class and I'm going to paste this one here.
Now I do.
The next one will be about about calories class.
Right.
So these names sometimes, as I told you, they need to be exactly as you feel, because I'm not going
to tell you that you can't change this name.
We can't.
Right.
It's up to you if you think that that's a reasonable name for your class.
Yeah, just like that.
Now, I do have quantity class here.
I'm going to make it.
DOT quantity, and I think we're done for now.
Now what we can do, just keep put semicolon here.
So remember that these function can access even after this episode, controller function is closed,
finished because of the closure.
We can still use this object here.
Right.
And it's going to be storing this user selector class names.
So how we can just call it here.
So it's very easy.
I'm going to say HTML class names DOT and I'm just going to look for a type class here and let's remove
everything.
No.
So I don't want to make a mistake now H.T. middle class names, that this one was for the description.
Plus, I'm just going to copy those one pasted times that this one was for the calories.
Here it is, the calories class and this one was for the quantity class.
So I'm going to save it.
And let's see if we have done some mistake or error or if we break something.
Now, I'm just going to click enter and I expect to have the same result.
Right.
So if you put here run two laps, five thousand calories, that's not possible.
But yeah.
So five hundred fifty five quantitative calories description, everything that we have.
Here it is.
Get it now.
I didn't tell you that when we have this input type what we have in here, not value will grab it.
Right.
But Food Select was a little bit different.
We grab the option value.
What's inside this value.
It's going to be there if it's no, it's going to be a number, but it's going to be as a string.
It is.
Be careful.
This is a string calories.
They're not number and quantity is not number.
They're strings at the moment.
We we will learn how to do this little bit later.
But for now, that's it.
And I think we are done for this case for now.
We will have one problem here.
I will not be able to use this HTML class because here I do have another query selector.
I do select one other the button html class.
Right.
So how I can do this.
So now the middle class name is not visible in this main controller.
We need to find a solution.
Let's create a function same as this one that's going to return the HTML class names.
Right.
So let me know where it is here.
I'm just going to write Tomáš under the same return and I'm going to say get get html class name and
I'm going to say function.
It's going to be a function without parameters and we're going to return this object here.
How cool is this?
You see the power now public in private functions.
These can be this is object, but you can be a function and we can return it here, can return its result.
Now, I need the story here so I can create a different variable name, but I'm going to use the same
one e-mail class names.
I want to use the same one.
But if you want, you can do HMO class names for me to be a little bit different, I'm going to go with
this one.
But for you, you can do it like this.
I don't want to confuse you with different names, that's why.
So I'm going to use this app control UI, what's happened and I'm going to access now get HTML class
name just like that.
So I should be able but before we need to add it in our list here and let's add it, let's see at BTE
in class, because that was pretty much what was for the comma there and yeah.
So now we can use the same logic as here.
Class name each class names Dot.
At Beaky in class, so let's hope it's going to work.
So if I click, enter, yeah, I do have the same result.
Now it is working, right?
We don't have any anywhere else that we can use.
This is a class name see as a selector.
So I hope you understand this lecture was a little bit too long.
So what we did in a private object, we store the class names that we're going to use in a query selector
and we call it because this is the object we've got.
We call it the type, whatever we need and why we do this, because in future, if you change the class
name from show form, type to short form type, I don't know, impanelled like this.
So if you change it here, show form, where was it typed?
Here it is.
This one to Pano.
I need only to change it here and everywhere.
I don't need to change it right in our code.
Everything will be clean because this will go there every every time.
What we have here, it will be represented on the left side.
So I'm just going to go back, just going to go back here and say that that will just to show.
So if we have in our HTML class names one change here, we can change it once and that's it.
Everywhere else will remain the same.
And imagine if we call this one ten times, we need to change it ten times otherwise.
So that is pretty much it.
We return everything that we have from the form, right.
We store it in one object, we return it back in.
That object was saved in this get form input.
Now now you know how we going to use from now this main control.
This is a main control will be a bridge between the the rest of the controls.
And that's why, you know, now why we put this here and not everywhere else.
This is connected with the user interface.
That's why we put these functions here and we can grab it through the main control.
Otherwise it will work.
If we put it here, it will work.
It will still work.
But that's not logic.
That's not our our vision.
Right.
So thank you very much.
I hope you understand what we are doing and I will see you in the next one.