Welcome back to the last lecture in this last lecture.
We're going to learn how to clean the form which form the form that we use to submit.
So what I did, I just finished this form for you guys.
You don't have to.
We don't have to.
You can do it with me.
But I already have done it in order to speed up the process, because it's not it's not something special.
One more thing that we need to do is I need to discuss how are we going to do it?
So where are we going to build it before I'm showing you before I'm going to show to you, you should
know that everything is connected to the API control or we should create the form there.
OK, so this is the clear form first.
Where are we going to call it?
We're going to use APU a controller and we're going to call the for why I'm doing this because we already
know how to do this.
That's why I don't need to waste the time anymore.
So I'm going to call it from the add calories and you can put it here or even here.
Doesn't matter.
So after we calculate the calories, we can clear the for.
Right.
No problem.
Now control f heat enter.
And this is going to go in apu y controller, you know, public methods.
Right.
So first, we're going to use this clear form and we have two two fields, the first one is a form fields
and the actual the first the second one is the area.
Now, why are we going to use this?
So in order to select each and every class name from here, we do have them.
These three we got selected in one go instead of selecting one by one using query selector.
Oh, and we're going to just just do this in order to to separate them with a comma right now if it
becomes a lot.
But this will do, this will create form fields like this.
This will create I'm just going to make it like this.
So when we add something here, one hundred and fifty enter now we have these list and I want to explain
you now these Notley's the the point is to do a foreach loop on these items that we have here and just
to reset their value.
Right.
But how we can do this, we can't do it with normal for each because this is not this is a Notley's.
We can use the Notley's straight we or with the error loop.
So how are we going to do it?
So we'll do this with using this at least method, and actually this is my method.
That created just going to uncommon this one.
So in the form error, I will just call this list and pay I mean, provide this as an argument is cornfields,
fields, Notley's that we have it here.
And where do I create this list method so we don't call it from any other funds from any other module.
So means.
Must be.
In our what in our private part, so world is measured in function form fields, and that is returning
the area, the prototype, the slides that call and we are passing the form Fildes Notley's.
So what is this doing?
So this is a list of what we need to convert it back to an area.
And that's why we use this method in the slide.
Smedley's inside the area prototype so we can just call the slice method like that.
So we need to treat this in order to think it's a normal area.
So we use this last minute and that is in prototype slides call right inside this call method.
We put the bass in the noblest in this.
Ladies and gentlemen, will we create if you go down here, it will in these variable form fields area
we will have let's whoops.
Let's call a log.
Now we will have form fields area.
And here we did had Notley's.
Now we will have unary and we can look through that area right now.
So if I go and hover here it is from zero position one and two so we can use the foreach now just like
this.
So on this form fields area, I can look through them and we have a function here inside that is called
callback function and it will be called for each and every element of this form fields area that we
are just trying to push.
Right.
So this is anonymous function that will receive up to three arguments.
We're not going to use these indexing in this, but we will use we will use these current and we're
going to set the value of each and every element back to M3.
This index will return.
We'll go from zero to the length of the array minus one.
And this is the entire area.
And that is pretty much, you know, just going to common.
This boy here, there, this one here.
Let's see if it's going to work.
Enough talking food.
One hundred and fifty.
So when I click, enter or whatever, I click here this button, I should see this empty right now.
We did set the value of each, each and every current element that we have now.
We use this function.
We never used it before, right, Erin, for the slide call and we just put the Notley's there.
Now, this is something that you can use.
You can select as much and input fields you want.
And you can do this, right?
OK, that's it.
Now, what I want I just want to clean up the form of clean up this here.
So I'm going to go through each and every council and I'm going to comment it right.
This is unusual lecture for you guys because I always time I'm calling with you, but.
Well, you can do you can stop.
You can pause this lecture and here it is.
Now, let's check if it's everything is working, if we did something wrong.
So I'm going to say food here.
One eight hundred and fifty calories.
Good.
Go back.
Nice.
OK, let's add one more food.
One, let's put one here.
Name it.
And let's say six hundred eighty seven point fifty five.
Good.
Go back.
It's changing its color.
We have we have a formatted text here.
We have a good percentage here.
We do have the whole number here right now.
Here is nicely presented.
We can delete things.
Cool.
It is working now.
Let's burn some exercise, run one hundred and fifty seven point sixty six.
Let's see how that looks.
Good.
Let's see how that looks in here.
We don't have any errors here.
Nice.
We can also.
That is the way our application is working.
Good, good, good.
I like the way it is now.
We just clean up and we are done.
One more thing I want you to do is to create here, for example, when you click like here, I just
you want to have some notification.
You can use the Duckmanton query selector.
So I'm going to show you I'm not.
That's why I just want to pause this to just create the function after that, just to show you some
things that you can do.
OK, in our show show form closed what you can do here.
And below, there is button or no about this button, you get creative class error like this and say
it goes here, let's see what's happening here.
This arrow goes here, you can style it.
You can stop this bad boy.
You can just put a style here and let's say color, red, font size.
Fifteen pixels, OK, text and decoration.
Underline, let's see how that looks good, Dirigo, So you don't need that next aggravation, right?
That begs the question, doesn't look that natural.
So nice.
You can also add I class here, FOAF a danger.
I hope that exists or it will make me incredibly angry.
Here it is.
It's not working.
No, just try F.A.A. for fun.
Some items.
Right.
You can go there.
Bear with me and search for Eichmanns danger.
So that was exclamation marks.
I don't remember all of them.
Right.
There's no need.
It is this exclamation circle.
So let's go there.
So that's why I'm just teaching you, showing you things that you can go there in the future.
They will change, right?
They will change.
Before this was Effy.
Now it's FRSS.
And yeah.
So you can paste it here.
Save it.
Go back there cuz.
Now Maragos here in this area should be hidden right now.
You can achieve the same thing.
I'm just going to show you.
We do I'm just going to show you real quick, but you can create a function for that.
Now here you can create it else.
And if this is not true, you can use document very selector and grab this error.
You can say document that query selector.
And you can grab the Arrow class, you can put this in the last names, right, and you can see the
inner HDMI out and you can copy the entire thing that we created.
Right now, disinterring.
It will not be arrogance here, please feel the form correctly, right like that, OK?
No, you're not going to be able to see it, but when you click here, it will be there.
One other problem that you're going to face is after that feeling, this one, it will stay there,
right?
So, yeah.
And even this one is pushing down.
So this is just to show you how you can do tricks if you can call this query.
So like through here.
And let's hope that this will fix it, right?
So you're setting the enrichment back to nothing.
OK, so now I'm going to say here, please fill the form correctly.
One hundred and fifty.
And there you go.
You don't have this was the easiest.
There is a more complex that we have learned how to do it.
Just do it right.
Create a function, clean it or whatever you do.
Now, this error, I don't want it to be like this.
Just going to cut it.
So we do have these fast names, right.
We're here.
So here it is.
I do have this error.
Notification shouldn't be here, but it's there.
And we do have that class name.
So we need we can call it right.
This was something that I was trying before and it stayed here, not professional from my side.
I'm sorry about this, guys, but I'm not going to rerecord this lecture because of that.
Things can happen and you should know all this.
All right.
I'm a human.
Same as you know.
That's where we were here.
OK, so a class times that error notification cuz.
Just got a copy.
I'm not going to copy, I'm just going to edit html class name.
So error notification.
Let's see if it's working or not.
Click here cuz for one hundred and fifty then.
If we do food without that one hundred and fifty.
Nice.
It's not working cuz it is working.
Hope we didn't break anything.
Nope.
That's it.
So this is the small things that you're going to do now.
One more thing also I'm going to show you how you can use this.
So I do have how you can use this gas.
Right.
So I do have here styles so you don't need to worry about it.
But if you want to add something here, you can add it in the last four.
Right.
So I'm just going to go here in the corner.
We do have importing these styles now.
I do have live just going to show you if I thought The Love says.
I have this one life, says compilers, if you don't don't have it, just install it and it will create
here this icon for you guys.
Now, if you go back here, if I click Watch says you need to watch it carefully, see what will happen
here.
It will create a bunch of files that you don't need.
Right.
But after that, changing them, you can.
Yeah, you can.
You can delete those files.
The main file that you need is this one.
OK, now I'm going to show you how you can create it.
Now, here, I'm going to say I'm going to remove this error here.
I'm going to remove this file, OK?
And let's test it out.
This bad boy, if it's going to work without style, she didn't work for one.
And we don't have calories here, dear.
Please fill the form correctly cuz you know that is looking OK right now.
Right.
OK, so I'm going to grab this arrow here.
I'm going to say arrow class
and I'm going to paste everything here, but we don't need this style because that is not in the in
line style anymore.
Right.
We're going to save it and that will see you success.
Now, when I click enter, that will be applied there.
So any changes you want there, any changes you want to do, just fine.
The find the class name from here into the files.
Make sure that you do have these live sets, compiler, and it will stay and it will listen for a change.
So if I click safe again, it will see success.
OK, maybe you don't want it to be that one.
Just.
Get rid of that color.
Please feel the caller correctly cool, right?
Now, I just more like it, like when it's like this.
So, yeah, pretty much we are done now, you know how to use this stuff, how to use this one.
And I'm just going to close it here.
I don't need it anymore.
And I know how to use the style to assess how you can build up there.
This this is an amazing access.
You can delete it because you don't need them.
You don't you need only this stuff and you can go back here.
The error is there.
The last thing that we compile is there.
Right.
Cool.
And let's test it out one more time and we are there.
Good, good news that this application is working as it should.
We're going to close it here and we are done.
I hope you like this project that we did.
It's an awesome project.
It's a style very nicely.
So I encourage you to take a look into the success and SAS files that I'm going to provide with you
with this in this folder.
And also, I want you to create some new application, do some new logic based on what we have learned,
based on the functions that we create, based on these modular architecture, based on everything that
you have encountered in these 15 or 20 lectures, please make sure that you're going to use them.
And from now on, we're going to do a six, which is something major.
And you need to learn.
These is the section where all the major changes game, right?
So you're not you're not you don't need to miss this one.
That will be the next section.
Make sure that you are tuning for that part because otherwise you will not be able to learn.
This was the old school.
Now we will do the the newer versions that you will you will need definitely for being JavaScript developer.
So thank you very much.
I hope you enjoyed this one.
And I will see you in the next one.