Welcome back, guys.
Today, we're going to work on the car view and we need to create that file and we need to create a
couple of functions there and export them.
But before anything else, I have the final version here and I have the open version here.
So if we add, for example, a movie here, this is what we're trying to do.
And if we go here to look at this, the euro has changed now that it doesn't contain the only one,
the idea anymore.
So if I click outside, it will not nothing will happen right now.
The problem in our current application is that if I search for a movie, for example, if I click on
it now, I do have the right.
But if I click here, something wrong loading the movie because he tried to load the movie with this
and actually this is not the ID, so how we can fix it.
So there are a couple of things that we need to do now.
First, we need to work on this movie handler because I want to check first what is in the euro before
I go to the movie and creating that movie.
Right.
Because we are checking the IDs there, then we're going to create that movie.
We're going to pass that ID to the movie class.
Now, I'm going to comment on this one here.
I'm going to create a function that will do that hash handler.
And by the way, this function, it will not take any parameters, but it will check if the location
that has the same, the one that we use to get the right, the location, the hash we use it for to
get the how to see the ID.
Right now we're going to say the location.
That hash is different than hash target content.
But I have to here if I click on the other one, you will see if I have to get one.
So I'm going to copy this one as well.
So I'm going to say in a location that hash is different than this one.
And also, if it's different than a location, that hash is different than what different that hash
symbol only right then if because they're an operator, all of these three needs to be satisfied in
order to get in this if if conditions.
So if everything is correct, if we don't have this so means if we don't have any of this in the euro,
then I can easily call the movie controller.
Right.
And here we need to call it.
So I'm just going to copy the one on top.
Now I'm going to tell you how you can avoid even this even better, how this here.
First, I'm going to call the hash handler method.
Right.
And from the hash handler, it will go to the movie controller if everything is OK.
Now, let's check it up.
And actually, this is not the version that we were looking for here.
So I'm going to here and search for a movie and I'm going to type the movie.
I'm going to go here and we don't have any loading of unnecessary things.
So this is what we need to do.
Right.
OK, good.
This is well, just for showing, I will show what we are going to do next.
But so now I told you I'm going to tell you something else.
Now, here, just create a model.
So when I click in here, it's opening like this and this is the target atrium that I'm using.
So this is how the models are working in HTML.
But, well, you can do you can do something even more better or more simpler so you can use on hover,
for example, if you have good access, you can use when you hover this card here, then the pop up
window will open without triggering anything here.
Right.
Without changing the URL address.
So then you don't have to use this one.
Sorry, you don't have to use this one.
You can continue with O1.
So that's why I'm trying to say so because remember, sometimes when you hover things like this, I
have to change your color so I can do the same thing, I can cover it and I can get the whole thing
popped out without actually needs to click on.
Right.
I hope I'm clear.
So if you're good at this one, then you should go for it.
I do have other courses for styling would be ultimate boxes and that's where I learn a lot of things.
So you can get that knowledge from there.
I'm not sure if I have.
Yeah, I've done something on the hover probably in.
Yeah.
Or you can find on the Internet how you can use to see a system hover and just change it.
Cool.
Now what we're going to be here is actually when you click here, this part, so this is inspect, it's
actually the target content.
Right.
And we do have this target in our class and inside we do have the image, the container.
And this is the target content that I'm just triggering at this stage.
OK, it doesn't matter now.
We are done with this.
Let's work on our view.
So, in our view, create a new car view.
Now, ladies and gentlemen, today, we're not going to be able to see the view, but we will just called
everything that we can here we can do.
Now, first things first.
Copy this and important on top.
Nice.
Now here I'm going to export export consed display movie item and that will be the item that we just
created.
Last lecture from the controller.
Yes, from the model.
Sorry, not the controller.
So here we will add the CONSED markup.
Right.
And that will, we will use the template literals right now.
Let's go open the control P and the index.
Now here search for Target and inor.
I know, I know.
I could have done better list, I could have done better things.
Right.
So this is the target container and this is what I need.
So I'm going to copy the entire one, I'm going to copy it here and I'm going to be it down here right
now.
We need just to shift this one a little bit.
Nice.
We don't need these empty spaces as we do have it right now.
This is the entire, uh, the entire container that we need for displaying this part here.
Right?
Only one movie.
So that is what that is for one movie.
But here we are going to use again the data set.
So the data set attribute so we can target it later and we can delete it now.
Here, what I'm going to do is actually I'm going to grab the mid right.
Because I do have the item.
Remember the last time we just we just tried it out.
So I do have this identity number of tickets for I can change that and I can say item that.
And, um, I think it was only right now the movie name here and just grab this one a little bit on
the other side like that.
So yeah, this should go to the movie title night.
So what else we need here.
Actually that's pretty, pretty much it.
So um.
Yeah, no.
And you know what I was thinking, and I think we need to change this, so you still here and I'm going
to change this, I'm going to cut it from here.
Right.
And I'm going to say input,
input type.
And here I will say no value.
It will be the movie.
So it will be I am sorry that no here and I will have a class in the class where we target either.
I don't know why I have space target in our list.
No.
OK, now do it like this.
And now I will say dollar again dollar because I want to print the dollar sign as well.
An item that no time stamp.
So this will give me the this will give me the price.
Right.
That is pretty much it.
Now I do have this item number stored in the input.
I do have this class here and I do have this now that is pretty much it.
What else we need to do is actually to to add this to our class names, to our markup.
Right.
To our inner HDB.
So card here container.
We haven't created this one yet in the seats.
In the class names.
So insert adjacent.
Jason, HDMI in here, I will say before, before and and Mark, the one that we just finished from
the now called container, go back control be a Cyesis class sorry selecter in here.
You can use it and say document Querrey Selecter.
And I want to target what class, so the class was targeted in our container, nice, so that should
work.
Now we are done with this display movie item, but we need a couple of other things.
We need to delete the movie item, so export their consed.
Sorry to delete movie item and we got to pass the I.D. there.
Right.
Remember the I.D.?
We were trying so hard to create that unique I.D..
Now here we need to use the Sears's attribute this one day to delete ID.
Right.
So we need to use that one in order to grab it.
And how are we going to do this?
OK, so that's fairly simple.
Const delete item.
So I'm going to store it here.
The item that I'm going to select it with the document.
Oops, document
that query selector.
Now here we need to use these brackets in order to grab this data set étude.
Right.
Remember we talk a little bit before that data dot, dash, delete.
Let's copy it.
Mm hmm.
Now I'm just going to paste all their data, delete it, and that will be equal to what the idea we
are having.
Nice.
So I'm going to say here I am.
Yeah.
Idea on top.
So this idea goes here.
And this is obviously not working because I use the normal quotes and I need to use the template literal
oops, wrong, good.
Now we have here we are going to find it and now we'll be able to select the correct movie that we want
to delete.
Right.
In order to remove the element we need first from the DOM, we remember we need to find the parent element.
And we we already have the defined parent element class here.
That was the HD Heather.
Right.
So that is pretty much the parent of any thing inside.
So what I can say here, the lead item, that parent element.
Good.
Then remove child.
So in order to remove the child, you need to go one level up to the parent and then you can pass this
one pretty much simple now that it's it for the movie item based on the ID.
So we Bassingthwaighte in here, we just checking.
OK, we just finally with the query selector where this is located and after that we go to the parent
and remove the child.
That's how we were doing.
So if you don't know this then mean that you skip some of the lectures before.
Now one more thing is to export const display.
So I need to display this here right in the class.
Name is Card Circle.
Nice.
So I would say display card number and here I will say card movies.
No, you can just create a shortened name but I just use that.
And what else I need here.
Selectors sorry.
Class names that card circle.
Remember that was the name.
And I want to add the text content.
I want to change the text content and to append this card movies.
No, this one that I'm going to pass from the controller.
Don't worry about this at this stage.
Now, one more thing that I need to define this here.
I do have mistake.
That document, that query selector in here, the name was Circle dot card circle.
Nice.
Create a comma here.
Save it, save this.
Everything should work.
Same name here.
Let's test it out so we can test it out.
Actually this one.
But let's test out if anything else.
Everything else is working nice.
It is working.
This is adding this is minus.
Very good.
So when we click on this, when we go out we don't have any strange errors.
Same goes for the heart's target content.
One nice that is pretty much next lecture.
We are going to work on the model actually do the controller.
Right.
So that is it for this lecture.
Ladies and gentlemen, I will see you in the next one.