Welcome back, my friend.
Welcome to another video here today.
We're going to finish up this one and there is whoops, I've done it something here.
It is of just open up the starter and I just hit the keyboard and something was there, OK?
It doesn't matter.
So we need to also to correct this one.
Actually, the casting crews or the media, I don't remember quite well right now until I see the code.
But the thing is that we need to fix this one.
When we click here, I want the correct div or block to be displayed.
Right.
So when I do click on reviews, I want reviews here.
When I do click on Cast, I want gas to be here.
Now, this can be achieved with data, data, data set, read-only property.
Now we need to set this data set in XML and I have done it.
So if you open up again the movie View and if you scroll down onto description in or under here, the
content, you will see that I have these data tap target now in each HTML, it must contain the letters
numbers and dash dot callon underscore but not any ASCII capital letters.
So we can't just eat them.
At least I'm talking about Asia.
We cannot just write like this DataDot and continue like this LDAP target.
This is not acceptable, but we can use dots, we can use Dasch, we can use underscore, we can use
Callon here as well.
But the most easy and everywhere the developers are using this.
Oh wait, no, this is in HTML, in the DOM, but in JavaScript we are getting these data that target
actually this target can be any name that you want.
So this is my way of solving these problems by adding target.
But what I'm trying to say that in JavaScript we just going to get this part with starting from LDAP
and finish until Target.
So we're going to like this, that and into Camil case target now cavalcades.
We already have use it where it is reading a ratings Scammell case scenario.
This is also Camiel case scenario, but that is in JavaScript.
So I want you to learn.
So if you have your data that links, but you need to put it everywhere, it links here and you can
see the links.
That's the way you can grab them into 2D, into the JavaScript.
OK, now all done.
So I have data tap target everywhere in L.A. and I also have in the description I have data tap content.
Nice.
So what I'm going to do now, I'm going to open the index up HDMI in the index, the Jayasuriya in here,
I'm going to add one more function.
So why I'm adding the function here and it's connected with the movie view.
Right.
Everything that that was connected with movie view we were creating here every function.
But because I am going to access the how to say I'm going to access the event listeners, I'm not going
to do it in this here and this movie View View viewport.
Right.
So I'm going to do it in the controller because every time I use event listeners, I use them in the
controller.
Now, as soon as I start writing, you will understand more.
So I'm going to start writing.
So I'm going to create here const function name, movie description.
Now the name I choose to be like that because so it's not going to take any parameters because it actually
get the description here.
Now here I'm going to say I'm going to make a comment.
So movie description.
That's nice.
So you can put any more meaningful comment that you can think of now inside here, what I'm going to
grab I want to grab all of these sorry, all of these days at that target in one constant second steps.
And I'm going to say document, whoops, what a document that query selector all.
We have used this one before.
And here instead of this, I'm going to select it a little bit different.
So this is the first time.
I think so.
And I do have a problem because I've just have extra quotes here right now.
The.
That targets okeydokey, so Corzo lock the taps, let's see what it will give it to us.
But first, in order to see, we need to call it here.
Yeah, after the display, the movie, we can see display the content.
This the description here, I'm just going to call it a movie.
What was the name?
I just forgot.
Movie description.
Good.
So I'm just going to save it like this.
I'm calling this function that we are declaring below.
Oh, good.
Now, I'm just going to expect it and I will be able to see for Notley's here it is Notley's.
And if I go over here, I will be able to see that we are selecting each and every of them.
OK, now what next?
I want to select the description as well in Darrien.
So I'm pretty much I'm going to copy this one.
But I need to change the name to the tab content and I'm going to put here data content, right?
I think so.
There was a content here.
It did the tab content.
Nice.
So if I can't plug them, I will be able to see the same result.
I will be able to see a four note list.
Now, what is the most interesting thing is that I can look through these.
Notley's using a foreach and I can do this daps that for each cool inside I have access to element.
Make sure that you do semicolon there.
Now, the element I'm going to add event listener, and that will be on click, it will not take any
parameters, but here we need a function as well.
OK, that's a lot of coding here.
Good.
But I'm just going to cancel log item.
A tab item was claque.
To see if I can fire that, this event listener writes, because I'm unclick and this is what you do,
it goes through each and every element of these steps.
And when I click it, it's going to fire this event.
Cool.
Let's see if it's going to work or not.
Reviews.
Yeah, it's working.
It's working.
But here I click and the number is increasing.
Nothing else.
And consuming anymore, I'm not here is OK now I have the the one that I need.
Now what I need extra is just to get the target.
And this is the most interesting way from this entire video.
So I'm going to say const target, by the way, you can add any name.
So these are not from JavaScript?
Nothing.
So these are mine daps tabs contin aliment.
It can be e right.
Everything we can change so but I cannot change foreach.
That's method from JavaScript.
OK now document dot query selector in one more reason why I use it here and I pass the data tab target
like this because they were not loaded in the first initial screen.
Right.
OK, that's good.
So now I'm going to say element dot data set now is the interesting thing.
The data set that trap this one as I told you, tab, cavalcades, target.
So now we'll be able to list all the names and let's say Kalonzo like the target.
So this will give me the target actually will give me which of these defs here.
I'm targeting reviews.
Cool cast and crew.
Cool media.
Nice overview.
Very good.
So I do have that one.
And this is all, ladies and gentlemen, you can get those things.
Now you're accessing the target element by the current element.
We are looping through data set and you see the camel case of this bar right now.
Everything is nice.
So how I can see all of this when I click, I want to see a result.
That's easy.
Now I can have a class by Target that class list.
I hope you'll still remember this.
And I'm going to add a class and this class will be active that now I have defined this class in this
class.
It's like here this underline.
So when I click here, oh my God, you see this?
We are loading more information, but unfortunately something is happening.
Strange if you go back here.
So if I go inspect element, I do have this active dev, active dev, active thep everywhere.
And that is not the goal.
So what is the goal.
I just need to delete all of this and reset, I mean just to remove this active tab from here.
So what I can do, I do have this tab content.
Already saved, and what I can do is tap content, I can loop through them, right?
That's why it's so easy.
So I'm going to say here, Elliman, not just to confuse you and here element the class list that we
move.
Active death, but this is not super good.
So here is I'm removing I'm removing everything is working as it should the regulations.
So if you want to stop until here, you can.
But I am going to add this underline everywhere when I click.
So I want these active glass to go here and we need to work for that one.
So first of all, I'm just going to say I'm calling here now.
First of all, I can do this because I have access to the current element and I can say, OK, aliment.
And again, I can class at least I can edit this class, but it's going to be bet you will see why.
So overview is good reviews, still good, but the overview stays selected and it's still active, still
active.
OK, now I messed it up.
Now what is something that I can fix?
Well, I do have the taps as well, so I can do the pretty much same thing here.
I'm just going to change it to Taps.
And I can just say here that instead of Elliman, I can give a tap name and say tap any name here.
Right.
Remove this glass.
Nice.
Let's see what's happening now.
Reviews bam removed from the overview cast removed.
Media removed.
Nice.
One more thing that I want to add is this cast and crew.
We haven't done anything there, so how we can fix this.
OK, let's go back to our movie's view file.
It's pretty much here.
I'm going to remove this part.
Make sure you remove the correct one, and here I'm going to call a function.
Now I'm going to call a function actors.
But first, I need to create those function here so it's not going to be a function.
That is how say we're going to explore them.
We just going to use it here locally.
Actors in here, I'm going to pass passing two things, actor and index.
Good.
Now, why I'm doing this template literals.
I'm just going to make it very simple.
Index commer.
Actors.
Sorry, actor, that's it.
I don't have to return anything because it's one line and this is six, we'll know this function will
need to return this.
So I'm just using this because I want to show you that instead of one argument, we can pass two arguments.
And I'm here, down here, I'm going to use the map method where it is here.
OK, so here instead of PAETEC inside of PAETEC, sorry, I'm just going to say movie.
Oops.
The actors.
Doc map, I have the actors list here, so I'm going to map through that one and I'm just going to pass
in here the current element in the index right here.
I'm going to see actors.
Just let's see, you know, specify actors here or OK, yeah, actors make sure these actors, plural,
not actor, OK, and here I'm going to pass the same EL index.
Nice.
And I think I've done mistake on top.
That is the mistake one.
So I want, for example, zero dot name.
Right.
Save it.
Let's go here.
Cast and crew here were these random small H-E.
The other one will be one.
Right.
So everything is as it should go.
Now I have everything looped with their index is now you can create a more meaningful way.
You can create the unordered at least if you want.
And you can jam this here.
I mean you can add those here.
Now our obligation is pretty much done with for for this part.
When I say for this part, I'm meaning for those so we can go to a trailer.
But now these three things and the buy tickets, they are not working.
So our next goal, we will be to work on the likes, to work on increasing the tickets to buy the tickets
in the EU.
So that will be pretty much it.
So thank you very much for watching and I hope this lecture was super nice for you.
Now, these reviews, these steps, actually, actually you can use it for anything.
For example, if you have a website, we want to explain a couple of things here without spending too
much space with the text.
Now, you can create this tab and yeah, the users can flick around all of these and read the information.
No, well, that's pretty much it.
I hope you enjoyed this one and I hope you learn something new.
Now, data set is very important.
Learn how you learn how to create the data set here where it was.
Now the data set.
It needs to be defined in a special way in HTML and we can read it like this.
Camil case in oops sorry.
Here Gammel case in JavaScript.
So that is pretty much it.
So the JavaScript, the name of a custom data attribute, is actually the name of the Salmat HDMI tune
that I've just mentioned.
But in the camel case.
So we without dashes, dots or anything else.
Right.
That is pretty much it.
And I hope I'm going to see you in the next one.