Welcome back, ladies and gentlemen, today, what we are going to do, we're going to work on the controller
for the car now for that thing, we first need to use this ADD event listener.
So we're going to add one more else if here.
And we're going to target using either Target matches, if it's the main control left by, it's clicked.
OK, let's do that.
And from there, we're going to call the we're going to call actually the controller.
Now, here we can see increase or decrease ticket number in comma.
We can say add tickets.
Tickets to Cark no good show, what we need here is again else actually let's call this one the entire
one.
So I'm just going to copy it just to be quicker, close this one.
But here, instead of Hedo Target matches, I want ladies and gentlemen, to go back your movie.
Let's click one over here.
I just want to target this button when it's this button actually clicked.
And what's happening here, I can't find it here.
It's main content left by.
So I need to target actually D class here.
So I'm going to see main content left by and also all of its children.
Good.
Now I'm good to go.
Let's alert.
And the car clicked just to check if it's working or not because it will give us a lot of trouble if
it's not working here it is.
It is working.
So we successfully target that one.
And if we click outside here will be on the text on the icon, it will still work.
Not good.
So from here I'm going to call the car controller
and here this controller we have and create it right now.
I'm just going to copy it here and we need to go back to where the car control.
So last time, I believe, delete the things that we have window that we can do that we don't need it.
No, I'm going to say const here const and I'm going to pass this card controller.
But remember, we need an equal sign here and we need this arrow function now inside.
First we need to create a new card.
But first let's first check that code is exists or not.
So I'm going to say if it's different than the other card means, if it's not there, if it's not in
the data right.
Then we can just create a DataDot card equal to the new card.
So see how this cool it's we don't have to use that brackets.
It's in one line.
So it means that if there is no data card here, if it's nothing in the in the cart.
Right.
So we can create that one straight away.
Nice.
So we created that new object now.
And movie details
and also make sure that you have added this important part of you on top, right.
Just copy this line.
Here is part of our view in here, just below that, and also make sure that you have the Cartmell.
Good.
OK, now add movie details, so here I'm going to create a constant called movie item, and in that
movie I'm going to see data that cart that at item good here.
What I'm going to do, I'm going to see data.
Now, this item is actually from the Karkh controller.
Right.
Let me just copy what we have here.
OK, we adding the number, the title, The Price.
And so I'm just going to base it here, but we don't have it to grab from anywhere, but we do have
access to them through the movie object right in here.
I'm going to see no tickets, good data, that movie, that title.
And we don't have a price now.
We don't have a price in our model right now.
We're actually movie model.
And what we can do, we can pass the number here or we can just go back to a movie that is in added
somewhere here.
I'm just going to have this that price and I'm going to fix this.
Sorry, I'm going to fix this one to ten dollars.
That's pretty much it.
Now I do have the Access DataDot movie.
That price now.
Cool.
So what is happening here?
Let's add a couple of more things and we're going to test this out.
So no, here we need to display
this lady movie item.
And how are we going to do that?
We're going to take care of you so we have the access of the card you and display movie item.
And inside we are passing this item where we stored everything here that we had it cool less Bahige
to create to display the card number.
Now this will say consed card number DataDot card that show list.
OK, why the show to me, I have no idea, so they can't show this.
That was in the car.
I'm just going to show it to you in here.
We can do we can just so it's returning the entire array, but we can just return the length of this
array.
Right.
And I can do it then, but I'm going to do that in alikes.
So I'm just going to trying to show you how we can do this.
So I'm going to, you know, like, smile.
I'm going to do it in the car.
But here so I have stored the entire ride back here and this is look like ugly a bit.
Now here I'm going to use the car, view that display car number, and I'm going to pass that card number
that we grab from the saved, actually.
So this array and I can grab the length from here.
Same it's pretty much same.
But I could have done it here, but I would do this in the next lecture.
OK, so that is pretty much it.
So let's test this out.
I'm just going to go here.
I'm going to refresh and I'm going to buy the ticket and nothing is happening.
OK, so we do have some problem probably.
Now, how are we going to test if we do have a problem, let's first test if these actually cancel the
log movie items working as we are, we have planned.
Right.
So if we're getting some data and actually we don't have anything movie, click here, add it, let's
inspect it.
And I want to see an object here.
And actually that object is not there.
So probably we do have some problem over here.
Data that movie, the price data, the movie, the number.
OK, instead of movie, I have moved.
Right.
So you probably have done this one before me.
So know this is it is.
I do have this one and should work now.
Oops.
Again, it's not working.
It's zero now so I've tested it until here it is working now I can remove this and let's see if this
display movie that was located in this car is actually being called.
So I'm going to call the log item.
And actually this item that we are passing here, it was the same that we just can't plug it.
See, it's this one.
So I should be able to see the same result.
So if I click again, buy tickets, OK, it's working.
So something strange is happening.
No, I was thinking it's not calling the function, so it's working there.
So we must have some problem here.
So let's go.
It is.
So I'm passing the item and I'm trying to get the title from the movie, which I haven't access to the
movie here.
I have access to the item that I'm passing that was movie on top here.
Then we can just simply do it.
OK, so changes to item the title, let's add it in.
Here it is.
We do have it, but so we have the title.
We have this the price.
We don't have this number of items right in probably you know, this it missing these quotes here.
I'm going to save it and he's going to give me this.
So if it gives you this, as I told you, it's an error because we trying to load something that doesn't
exist.
I'm just going to increase the number of tickets I'm going to buy.
And I want to see here that I do have two and twenty.
Good.
Now that is working.
So next thing is we need to add even listner here when we click on this actually delete button and that
I need to show you, it's there in a target in our list delete actually in this one in the button.
So we're going to target.
So this is not wrapped in a div, but we're going to target the button here.
OK, but before that, we need to use this target list to grab this data, delete it.
Remember, we're passing here so we will be able to delete it.
Nice.
So let's go back here and here, add to another event.
So increase or decrease ticket number here.
I will say delete an update card.
OK, cool.
I'm going to add event listeners at the end, delete and update the card.
Good.
So here we need to specify something.
The first thing that we need to specify is seeing the class names, dot card container.
We're going to use the same container that we were working on.
So car container, that air event listener here and it will be on click here.
I'm going to pass the E the event.
Right.
So I want to use Target.
So how I'm going to grab the the data set.
Dana said the lead item, so I need to actually find to get this class and find the closest, right,
so we have done this.
So I'm going to see if it can't study here and I'm going to see the target because I've the event here.
So I have the exit and start closest in here.
I'm going to pass the function, the class that I've just copied now how we are, but we just find the
closest.
But we need to grab this dataset and the keyword is data set.
And then the name the lead I.D. cuz let's cancel it, log and see if we are grabbing the correct idea
or not.
Again, something wrong.
Don't worry about this messages.
Come on.
So go back to movie
and edit here.
So when I click the minus actually delete element, I will be able to see the here is that's the idea.
So if I click on Right, click inspect it and I will see that is here the same one.
Right.
Key JDB at the end.
Keystart start with key JBI at the end.
That's the one.
OK, now what we can do here is I want to target this class here now from the bottom right.
And I will use the matches here again.
So if either target that matches here, I'm going to pass as a first argument the class then with the
comma again, DOT and the Asterix to grab all the kids there.
So here we are going to do two to three things.
First, we need to delete the item from store, right.
From the data, actually.
So what we can do data that car, not delete delete item and we're going to pass the idea that we have.
Right.
This is actually from the card delete item.
Right.
So make sure you do have the same spelling.
Now, the second thing that we want to do is actually to delete the same item from the UI.
And in the UI we do have the same method.
Delete the item.
Cuz now can't you delete.
Actually I have it pasted there in here again we are just passing the ID.
So what it will do, it will go here, find the parent then delete it.
Right.
And we're still targeting that one there next.
Now I just want to update the card number, remember the card number on top.
So I just want to updated that.
So update the card number.
Nice.
How are we going to do this?
So again, I'm going to say cost card number.
Actually, let's grab.
And put it there so they know that card number and after that, we just calling the same one, save
it, ignore this error, just go back here at movie.
Actually, I'm just going to close this one.
I'm going to add to from this one, I'm going to add one ticket and one ticket from a scary movie.
I should have three now.
OK, here it is.
So if I click on this one, I should expect to be deleted from here, also from the car and also from
updated this one.
There you go.
So if we go inspect here and see data that car, because in data we do have search, movie and car.
Now I'm just going to say DataDot car and inside I should be able to see only one here it is only one.
And that's this one.
The Lego Movie right in the title area is a Lego Movie.
Enterprise is.
No it's then.
Good, good.
Also I really, really like the way it's working.
Nice.
So there is a different price because we're multiplying here right now.
That's pretty much it now.
We need to work on something else and we are done, I promise.
So we need to actually update the ticket number as well.
So let's do this now.
Here it will be say else if e dot target that matches in for this, we need to create a couple of more
functions in.
You know, you will see what I'm trying to say.
So here I'm going to see that target in our list.
No, so actually, the class that we just put it here, this one target in our list, no.
So when something's changed here, I want to update it as well.
The ticket numbers.
OK, so that will do its job.
And I will say consed new ticket number and that will be equal to e dot target dot value.
Right.
So I just want to grab this input value, but this input value will give me a street.
So how I can do it, I can just pass it.
So I'm just going to, just going to cut this part here.
So I'm going to cut it and I'm going to say pass.
In and inside, I'm going to pass the target that value now I will have a number stored here, NISP,
that will be the number
movie and go back here and it had a there and that will be this number.
So when we go up and down, right.
So every time that is fired up, it will go here, it will match it and the number of the ticket will
be stored here.
So what I want here to say, if you take ticket number is greater than one, then what I want to do
is I'm going to say data, that card, that update, update, update number, movies.
And here I'm going to pass.
So we need to go back to the card and we need to grab this one.
Right.
Did I spelled correctly good.
Correct.
So I need to pass the I.D. here that we grab it from top.
What else I need to pass in here?
The new ticket number.
Nice.
That was to update.
Now update that number from car.
We need to create an additional one.
Update the ticket number from card in here.
We need to create actually two two new functions.
The first function will be data that I'm just going to write it here.
And after that I'm going to go in the movie model and I'm going to update it.
Actually, it will be update from car.
So what I have here, I just want to update even the movie, because in the movie we do have the number
of tickets I want to update as well over there.
And that is why I needed this function.
So seeing from her from card, because it's actually in the card here right now, new ticket number.
So I'm going to pass the new ticket number over there as well.
Nice.
And DataDot Card.
I want to calculate the price gouging price.
I want to calculate new price here.
These are a movie that no ticket is good for.
Now let's create first in the movie.
I want to create a function that we just wrote it down and it will be somewhere over here and it will
see update from the card in here.
I will pass the number.
Now these that tickets actually number tickets equal to that number over there.
Nice.
So we are done with this one.
Go back to the card now and create the second function for calculating the price, because here we just
have the price.
We are not increasing the price.
So that is pretty much it.
And let's say Colque price in here, we do have number of tickets.
Now, these that price will be equal to pass int number of tickets that we are passing from the function
here times 10, because we already know that the price is going to be ten nice.
So let's save it.
And here I'm going to have again another problem.
So maybe I should tackle this solution a little bit differently to make this one hover, but I'll leave
it to you.
So, yeah, let's see if it's going to work or not.
Movie.
I'm just going to add it here.
I'm just going to buy one ticket from this one by actually.
That's enough.
Buy one ticket in here when I see two here and if I hit enter right.
Or if I go outside of this one.
So what I can do, inspect element.
I want to go to the data and to see if something has changed here.
So data that card first it is the price is twenty because I have two times ten.
Nice.
That is working.
Right.
Let me show you, so the price is 10, but actually we set the price back to 20.
Good.
It's working.
Now, what else we need here is to check the data, that movie and see if we have two tickets here,
because at the at the beginning, we just entered one.
And let's look at the data.
That movie, that number of tickets here is ladies and gentlemen, and it's working.
So if you just increase to this one and if you go sometimes it will not work straight away.
But you need to just click, enter or whatever.
And now if I go back here and hit enter, I will have the number of tickets three.
And if I go data that card, the price will be thirty.
Right.
And that is pretty much it.
So I just grab that price.
I just incremented and I hope you are happy with the outcome so we can successfully this one.
We can go out.
We have decreased this one.
We are just able to add items in our car.
We will able to delete using these glasses and calculate price here first in the movie.
I also add the price here, then in the card view, we actually haven't added nothing in the card view.
So we have that one function here and one function here.
That's pretty much it.
That will be our final logic here.
Now you can create more functions if you want.
Right.
And that's pretty much it.
Now we do have event Lisandro for updating and deleting the card.
Right.
And we do have this listener here that we are just calling the card controller and the controller have
this.
Now, if some of the things is not working, just make sure that you grab from the final version.
See what I have done.
And yeah, just compare it in probably there is some minor mistake somewhere that's not working.
See, in the card view, we do have that movie movie, the title in here without one quotes and it wasn't
working right.
So only two minor mistakes, but four JavaScript.
That is enough not to execute things.
OK, so I will see you in the next lecture and enjoy.