Welcome back, ladies and gentlemen.
Today, we're going to learn how to update the tickets number and we will use that matches for event
delegation.
Now, first things first.
I want to show you what we're going to do.
So I have opened the version that we're working.
So if I click one, it will add number two, three, four, and if I go minus.
But you can go more below that one.
OK, so this is what we need to implement and we are going to create a couple of changes.
First in the model, then the controller.
And also we are going to do the view so we can do three of them today.
Right now, stay with me and I will show you now this one has a class here.
Its inside this container, actually the main content.
Right.
But we have the social and I'm just going to show you here.
Let me just zoom out a little bit.
Now when I go here on this class is actually the class that contains this circle here, this button
then inside.
But I do have the icon and inside that I can I do have the screen inside the SPG.
I do have that icon.
So we have a couple of levels here.
And we're going to use that matches because we need to target each and every element here because we
don't know what's going to be pressed.
And same goes for the minus.
But let's first work on the controller.
So open up.
The controller will give you a controller.
And first things first.
We need here to add these that NUM tickets.
So every time we create the object of this class movie, I want this ticket number to be assigned to
one so you can start even from zero if you want.
Right now I have this one in.
I had a couple of here notes.
Please add them.
Right.
I don't want to waste time.
Just pause the video.
Rewind now.
After the movie rating, we're going to call we're going to create a different function called update
tickets.
Right.
And we're going to say update tickets.
And this is pretty much simple here.
I will just at the top now, the ticket type will be aired.
So here we can add a ticket or or delete or minus ticket.
Now, how are we going to do this?
I'm going to create a constant here.
No, sorry.
New ticket, new tickets.
No.
And that will be based on the ticket time.
So I'm going to use the ternary operator this is equal to.
And then what I want to do is this.
That ticket is that none of the tickets that we just declared before.
Right.
Just to do that, I'm going to add one or I'm just going to copy this one.
I'm just going to say minus one.
That is super cool.
So we do have all this stored back to this constant here to this variable in how are we going to see
these that number tickets?
We need to update it only with these new tickets number.
So I hope you understand what we have done.
So the ticket type is that we are adding plus one.
Otherwise this else mean that we are OK.
Yeah, we have a mistake and it should be like this column.
Right.
So this is the number of tickets we say minus one.
Good.
Now let's go back to the index here and let's add here that we are going to add or increase or decrease
ticket number.
Now this is a new event listener that we need to target and we're going to use again which class.
So if you go open up the index of HTML, the parent will be this main content.
And we already have that main content.
Right, because we don't we do want to use that event delegation.
So class names.
So I'm going to say here, increase, increase or decrease ticket number.
Now, later on, we will add more functions here.
Class name, let just that main content.
So if you go back to the class control PE class selector, we do have this main content.
Right.
Make sure that you do have that one main content and add event listener.
Cool in here.
It will be on click and we will pass in the event with this error function.
Now we can use this console log e that target.
Right.
I'm just going to close this one because this was the final version that I've shown you what will happen
so we don't need it anymore.
Good.
No, cancel the log and let's see.
So this will be so open up any movie that you.
All right, and let's go to the inspect, go to the council and let's click on the plus side and here
it is.
I get the button, but if I click outside or inside, I will have a different thing.
So how are we going to do this before I show you that we can use the closest but closest here will not
work.
So I will use something else.
And first I will see if either Target matches.
So this is a new mattress.
This is a new method here that we can use on our DOM elements in the first things.
First, it takes two parameters.
What I'm saying to because look at here I am inside the air.
So just search for that and you will be there right now here in this container.
I do have the button, the SPG and the I can store it now.
I will be able to use this class here.
So I'm going to copy this class and I'm going to I don't need that one as well.
I have too many things open up here, ladies and gentlemen.
So I'm going to target this class with the main content, right.
Social at right now.
So I'm going to target only that div container.
But with the second parameters parameter, what I can do, I can use the same one with the asterisk
side.
So what this will do is actually it will find all of the child elements here.
So regardless of where I click, how I click, it will match them.
Now, this is something that I want.
So I want this to be a super, super secure just to find every child element if it's pressed.
And that's pretty much it.
Now, I can just alert here just for testing.
Plus sign is quick.
Good.
Now also I can do the same thing, so I'm just going to copy the same thing.
I'm going to say else and I'm going to paste this one else if right.
And this should be for the minus button.
So I do have complete complete same thing.
Just I need to add the minus class here and here.
We need to change minus sine is click.
OK, I'm just going to refresh now and I'm going to click the plus.
Here is the plus sign is click if I click the minus now it knows regardless regardless of where I click.
So this either matches remember that takes two classes.
The first one is of the parent container which which is this one.
And after that we just matching with the asterisk sign.
We just managing the entire container children.
So we're pretty much done here.
Actually we are not.
We need just to update the movie tickets and how are we going to do that?
I'm going to say data.
That movie, that update.
I think it's right, because in the movie we do have this update ticket in here.
I can pass.
I know that because I'm inside this and I will not be able to get wrong.
I can see it.
And actually the movie tickets, we are checking if that is at night.
So that is pretty much it.
I can do the same thing here.
Just make sure you remove this alert.
You don't need it minus.
Right.
So, yeah, actually if you put something else it will still work because we just checking if it's everything
else that it's not.
And people go here if you see I don't know, delete it will still work.
Now you're not talking.
Let's see what will happen in.
Yeah.
So I'm going to click on the plus side first I'm going to refresh and I'm going to use window dot data.
Right.
That movie and even we can go to dot num tickets.
So I have one at this stage.
Right.
So if I click one more and if I go with Epidaurus, here it is, I do have three.
So if I click one more I do have three.
Sorry I do have two now.
I have three.
Now if I click on the minus side, let's see if it's going to go back to two.
Yes it is.
But if I click, click one, two, three times and now if I just refresh this one.
I mean, minus one, so this, ladies and gentlemen, is something that we we need to avoid.
Right.
So how are we going to avoid this?
OK, it's pretty much simple.
We need first here to check something.
So basically what we're going to see if these are the movie that Numpty gets.
Let me just check if it's number tickets or not, so I'm famous for making these mistakes, so if this
is greater than one, then we can go and do that, update the tickets.
No.
OK, let's hope it's going to work.
And I'm going to refresh here.
I'm going to use the up an arrow.
So it's one now if I click minus.
It really is they one, but if I click plus I clicked twice, actually, or three, I don't know, it's
four.
So if I click minus, minus, minus, doesn't matter how much time, so click, it will not go and update
it because the number of tickets, all that needs to be greater than one in that is pretty much it.
Now one more thing we need to do here is actually to create weight to movie view.
So we need to create something here.
We need to create another class and other functions are not class.
Another function for updating this movie in just displaying the number here.
Right.
So how are we going to do this?
And let's just do that real quick.
No, I'm hearing the movie of you.
Right.
So I will be able to write down a date movie update number of tickets.
You can add more meaningful comments if you want in here.
I'm going to export this one with noncapital actually export.
Come on.
So I'm going to export CONSED and the name of the function will be a date ticket.
No hurricane just sure to numb, and it will take one parameter that will be the entire movie object
and yeah, let's create this error function, so make sure that you put semicolon at the end.
So inside I we use the document query selector, so I'm just going to write it first and after that
I'm going to explain what I'm getting here.
So here we need to parse the class name.
It is num tickets only and then I'm going to bend the text content to what.
To actually movie object num tickets.
That's pretty much it.
Now we are done here, so this no tickets, I'm going to save it.
It's located.
I'm going to show you where.
So if you go right, click on this, inspect and inspect it, you will see that we have the button class
and we have a span with a class of tickets.
And that's where I'm going to update it.
Right.
But we are not done yet.
So what we need to go is actually we need to go back to the index and add this here right now.
This was in the movie View.
And I have the access to the movie view and I will see update ticket.
Very good.
It gave me that one in here.
I'm going to pass data, that movie, the entire object, right.
This date, a movie night.
And I can do the same thing if I copied below here.
Now I'm going to save it and I hope it's going to work.
Let's just check.
So I'm just going to make this super small, but you should be able to see the changes.
So here it is.
I'm clicking and it's showing me that it's No.
Two, three, four and so on.
And if I go to the miners, yeah, it's not going more than minus one.
So that is pretty much it for this lecture.
So in short, what we have done in the movie we've just created is this that number of tickets to be
equal to one.
As I mentioned, you can start from zero if you want.
Right after that, we create that function to obtain the tickets based on the ticket.
That's right.
If it's and we are increasing to one, if it's not if it's something else, then you just decreasing
to minus one.
And then we are setting back to this number of tickets, then go back in the index.
We just use that main container where these buttons, all of these buttons are stored.
So I'm going to use this button and the same container later on and they have classes.
So these are stored in the two separate containers and they have add classes and minus some targeting
those containers in each and every child of those containers.
After that, I'm calling the update tickets for the model and I'm calling the updated tickets from The
View because I need to show the users what they're doing here.
And that is pretty much it.
Ladies and gentlemen, in here, we just create additional if statement that we don't want the tickets
to go below minus below one.
Right.
That is pretty much it.
But if you want to target zero, you can just go there.
Right.
That your logic and I appreciate your logic and yeah, you can do whatever you want, actually, but
I want you to learn and we use that Itogi that matches last time we used the closest.
But for this one it was more appropriate to use this Naches method.
OK, so I will see you in the next one.
I hope you enjoyed this one.