Welcome back.
In today's lecture, we're going to continue working the search movie view, and the first thing that
we need to do is to clear the input field after we get the results.
And after that, we're going to set the movie Slider because remember the things we're stacking up and
after that, we're going to add a page load.
So I hope everything we will manage to do in one go.
But so I hope now the search movie goes well.
We need to do we need to create another function called CONSED Reset input and what this function will
not take.
Actually I missed equal here will not take any parameters.
Why?
Because we are just setting the class names, so I'm just going to code it, not for input.
Actually this input here that we need here that we have from the class names in this is targeting what
this is targeting the D form.
Right.
Just going to click it here, Inspective.
Here it is.
So I'm getting the class of the input, the text of that input.
Nice.
So what are we going to do in going to see value equal to an empty string that is pretty much here.
Here we grab the value of what we have typed in here.
We are just resetting back to zero, but we need to import this one here.
So where do you think we're going to put it?
In the controller.
So the most logical way is to put it here.
So clear input search and let's use the search view search movie of you that we set input.
Right in that you do a job, probably.
Let's test this out.
So I'm just going to refresh you're going to go to the council and I'm going to get rid of this.
I don't know things.
So I'm just going to search for Batmen.
And it is it's working for some reason.
It's not working.
Just say that a couple of times.
Refresh it.
Sometimes it's stuck.
It's not working.
Now, that is pretty much it.
Copy this one.
Just put it here.
It's not their.
And make sure that you use semicolon everywhere, right?
Maybe last time I did an edit, but make sure that you add the semicolon.
Now, the second thing is that when I search another for Tarzan and if I click here to read the property
of Forage.
OK, let's see what's happening here.
I'm going to go Tarzan here.
Enter then I will Batman and I'm going to say enter here and try and catch error y because we're getting
too many results.
Probably no idea.
OK, don't worry about this one.
We will, we will fix this one.
So it's in the Gisel 17 here.
Right.
Display movie probably.
We are having some problem over here, but don't worry.
Now the first and second thing that we need to do is to clear the what the movie slider.
Right.
So we need to clean that one.
And that is pretty much same similar to what we have done here.
But because here in the movie Slider, if I click inspect it, I will see that movie slider item.
It's inside the movie Slider.
So what I want this whole thing here is either e-mail, including these div.
I want to be to I mean to get rid of this one.
Right, because we have 10 at the moment.
Right.
So how are we going to do this.
So clear movie Slider.
And we need to get a meaningful name like reset.
So small reset movie slider.
OK, now what we have here in the movie Slider Class names the movie Slider.
We already have that movie Slider here.
No, we don't have it, so we need to add it.
So I'm just going to copy it and I'm going to say, OK, that will be called Movie Slider
and the movie Slider.
The Class.
Actually, I'm just going to grab it from the index and where it is.
I've scrolled too much in the bottom.
Now, the main content here is the movie Slider.
So this is the class name.
Make sure that you copy.
And this is the container for each and every element that we are looping through.
Right.
That will be movie slider.
Nice.
You have that one so I can use it here.
That movie slider in here.
I'm going to set the inner HTML inner HTML back to empty right back to nothing.
So let's save it and see what's happening.
I'm going to zoom back to one hundred if I'm going to get rid of this and I'm going to say Batman.
And now we have the Batman.
If I go to then if I click here, let's wait for a while, but I don't have any results.
Let's inspect this one again.
And I do have.
So about the videos, ladies and gentlemen, I was looking at what will be the year, so it seemed that
we have some problem with this footage here, but I didn't do anything just like it was here with space.
I just delete that space and I just see it.
And what I don't do last time is I've never called it here.
Right.
So after we clear the search input.
So I'm just going to copy it in.
I'm not going to copy actually.
I'm just going up here with displaying it.
But now we can just clear the movie Slider as well.
So we need to clear that one before we loading the other data.
Right.
So I'm just going to do it like this and I'm going to see a clear movie, slider and Search, Search
Movie View, Dot, Reset movie slider.
And that should do its job.
OK, let's save it.
I hope we're not going to get any more errors and I'm going to go back to 100.
So I'm going to say Batman here, the search.
I do have these four results.
Actually, I do have ten results.
Now, the the good thing is that the search for the input is gone.
But let's see if I do thaat.
If I do Superman, it will just get rid of this one.
If it is that's working, we don't have any errors right now.
Let's we have ten results.
Let's move for Tarzan.
Every is everything is pretty much working now.
I didn't do any much of that one.
I just it was like this here.
I just change it pretty much.
That was sometimes when we're dealing with appx, you're going to run into problems because the FBI
will.
Yeah, sometimes it can happen.
Right now, that is pretty much it for this work of resetting things.
Now we need to do their last part, the page reloads.
So what are we going to do here?
I want to implement the Law Order and we can include either search for you or we can include.
So we can include that page loader here in the search for you.
But I'm not going to do it.
I'm just going to create I'm just going to use it in the class electorate here.
I'm just going to use that.
We can create additional file, but I choose to create it here because we can in future reuse this loader.
For example, when you click on I'm going to show you when you click on this here, you can also include
the loader.
When you click on the likes Autocar Loader, you can click on something else.
The loader will be there, but that isn't what not.
I'm not going to do that in discourse.
But you can do it and you can reuse it.
So everything that we are reusing, you could put in this class selector file.
OK, now enough of the talking.
So we need to create here function and function again.
We need to export it here.
Put a semicolon.
So explored const loader.
So that's the name of the function and it will take one parameter.
Call the parent.
So the parent will be actually now this will come from the index actually in the index.
I'm just gonna show you.
So if you search a load loader, here it is.
So we, it's commented at the moment because if I come and comment this one, it will start spinning
here.
You want to see this?
Save it.
Here is that's the loader I do have.
And it's spinning because in the distribution folder we have the cases and we do have the styles.
And if you look for the lower class.
Yeah, lower class.
We I have styled the loader here.
The background is black.
You release the background.
This is the icon.
The icon is the width seventy five and seventy five.
And it's calling this spin function.
Actually this is speed animation.
So if you don't know about keyframes in my other courses I do explain about that, but that's not the
goal for this course.
So this is actually setting finished.
That's why it's looping over there.
So that's why it's commented in the in here.
So I'm going to copy it and I'm just going to comment it back.
No, I need this parent.
Where was I need this parent here because I want to send the loader on the parent of these HD, Heather.
I want to send the loader on the heather and I want the loader to be attached there so the parent will
be exactly there.
So this will this will do a job now.
So how are we going to do it first in the class of.
Victor, I'm going to say const spehn here, I'm going to create a constant spin.
And remember, I just copy the code from before.
So if you haven't copy, you can go here, Loader and copy this stuff until this div and pasted there
and make it.
This doesn't look very nice.
Yeah.
And we can use it like that in one more tab here.
Now looks very good.
OK, so this is actually the loader we need.
Here is the icon, it's SVG icon.
Now let's add the parent class and actually the parent class.
We're going to add it here and I'm going to say parent element and document dot query selector.
And as I told you, I want to put this loader in the top of it Heidi.
Heather, it is in the header, right?
So that will be my parent class.
And if you're confused now, you don't have to.
So this is actually where are we going to attach the loader?
Now, how are we going to do this?
OK, here I'm going to say parent dot insert insert adjacent in why it's not giving me HTML.
It's not giving me the option to how to complete a nordia.
Now this should be after Biggin, right.
This should be after Biggin in here.
We would like to put this spin that the markup that we have.
Oops I didn't copy it.
Sorry.
So after Biggin what this after beginning means it will go here.
This is before beginning before together.
But we don't want to be hopeful together.
We just want to imagine that this p e d header.
Right.
And we're going to put it here and that's for I want to put it the loader.
The spinner.
Right.
OK, done.
So what we need else is just to call this function.
Right.
So this will be at the beginning of the H.T. Heather parent element.
OK, let's go back to the index.
So where we want this guy to be placed in the most obvious way, you just put it here before we fetch
the data right now, I'm just going to sit here low loading and pour just the loader in here.
We are we need actually before this.
We need to import it right now here.
You know, I just started with these brackets here.
Then that means that I need to continue adding this here.
GUI right.
Because in the first one, a couple of lectures before I told you that if we have multiple things here,
I did.
I didn't plan to put it here, but I've changed my plan today and that was the best option for me.
Just because you can we use this one.
This is done because of the reusability, but now here we can just solve it with basting that loader
there.
Sorry, I just need that one.
So that's pretty much it.
Or this is a good use case where you can put the star in, as you can see, class elector's and you
can use the class elector's everywhere.
Right.
OK, now I want to use the loader here and inside the loader.
I have the class names and the parent element.
Right.
That's pretty much it.
I want to save it in here.
I will not be able to see anything until I load four.
I think I search for something and it is in.
The thing is that it will never stop.
My it's never stopping is because you can see the data is already there, but this is never stopping
because of that infinite class o infinite here animation.
And it's spinning all the time, rotating.
And actually we just this is simple animation where we just rotate this icon.
Right.
This icon is actually stored in the IMG SVG icons.
And if I search here for a spin, I think so.
Here it is spin.
All this is the one that I use.
Right.
That's a simple icon.
OK, I've told you everything that you need to know now.
We need to stop this loader.
Right.
And we need to stop this law after the data is here.
So we're going to go back to the search movies.
We're going to copy it.
I just want to save time in here, actually, not in the search movies.
See the mistake here?
We will say stop.
Loader here and here, we will say just loader.
OK, so the name, it will be just like that stop loader right in
and it will not take any parameters.
I will just get rid of this port so it will not take any parameters like the parent.
So we don't need the parent here.
Now we can't use the class names here, class names as this one because the loader, it's not there
when we first initially load the page.
Right.
This one was here.
The header was there.
That's why we just can be able to attach the loader.
Everything was there, but not because the movies were not there.
The loader will not be able to to you to be used like this.
So what we need to do, we need to use the document query selector here.
So I'm going to see cost is spinning and now this what it will do.
I will say document oops.
We double in here spinning document dot query selector and here we're going to pass the class for the
loader.
Why.
Because the loader was not there.
So I need to target this class and we can do it with the query select otherwise here we will not be
able to use that class.
OK, now I'm going to check if this is speedy is true.
So this will return true or false.
Right.
So if I can find this class then I want to see is spinning dot parent elements.
I just want to target the parent element now again and remove.
So how we do first we find the parent element, then we remove the child in the child is actually this
guy.
This guy here, the entire loader is spinning.
Right.
So what we did, we find the parent element and then we remove the child and the parent element was
on top DHT.
Where was it here?
And actually the loader will be below.
And we're going to find that child element because we use the query selector.
We have it here in these constants and we can remove it now that we should add it here.
Now, that will go before display the data.
Right.
Because when we have the data, I'm going to say, OK, stop Loader.
And that's what I had done for this lecture.
Ladies and gentlemen, in here, I must say stop Loader and let's see what's going to work or not.
I'm just going to say, I don't know mission and I'm going to enter here.
And here it is.
This actually misspelled it, let's put it Tarzan and here.
And for some reason, it's not working OK yet because here we need to at least stop Lowgar as well.
Oh, actually did it by itself.
Right.
So that was pretty much it strange, but it did and it by itself.
So we need to add the stop loader from here where it was right stop loader should be.
And it imported here because we want to use it.
OK, so that is pretty much it.
So if I do now Tarzan but I already have the Tarzan.
That was quick by the way, Batman
movie.
So if I come in this one out, it will continuously speed into a movie.
Here it is.
Right.
So if I uncommented that one and if I go again movie, it will be there until it loads.
So mission impossible here.
Here we go.
We do have all of those movies now.
The loader and the stopping of the loader is working.
So I hope you understand why we put it in these places.
So we need to stop the loader after the data is there.
Right, because we are waiting for the data and we here we just loading before the data because we don't
want to load after the data is done.
That's it.
Pretty much.
And what else we did, we clear and we said the input here and that was for this lecture.
So that is pretty much everything for this lecture.
And I will see you in the next one.