1
00:00:01,360 --> 00:00:02,170
Welcome back, my friend.

2
00:00:02,200 --> 00:00:04,530
Welcome to another video here today.

3
00:00:04,540 --> 00:00:11,320
We're going to finish up this one and there is whoops, I've done it something here.

4
00:00:14,220 --> 00:00:22,540
It is of just open up the starter and I just hit the keyboard and something was there, OK?

5
00:00:22,650 --> 00:00:23,250
It doesn't matter.

6
00:00:23,260 --> 00:00:26,050
So we need to also to correct this one.

7
00:00:26,580 --> 00:00:31,680
Actually, the casting crews or the media, I don't remember quite well right now until I see the code.

8
00:00:31,860 --> 00:00:34,830
But the thing is that we need to fix this one.

9
00:00:34,980 --> 00:00:40,890
When we click here, I want the correct div or block to be displayed.

10
00:00:40,890 --> 00:00:41,160
Right.

11
00:00:41,250 --> 00:00:44,100
So when I do click on reviews, I want reviews here.

12
00:00:44,100 --> 00:00:47,670
When I do click on Cast, I want gas to be here.

13
00:00:49,380 --> 00:00:56,600
Now, this can be achieved with data, data, data set, read-only property.

14
00:00:56,610 --> 00:01:02,300
Now we need to set this data set in XML and I have done it.

15
00:01:02,640 --> 00:01:12,030
So if you open up again the movie View and if you scroll down onto description in or under here, the

16
00:01:12,030 --> 00:01:18,690
content, you will see that I have these data tap target now in each HTML, it must contain the letters

17
00:01:18,690 --> 00:01:26,340
numbers and dash dot callon underscore but not any ASCII capital letters.

18
00:01:26,340 --> 00:01:28,830
So we can't just eat them.

19
00:01:28,860 --> 00:01:30,050
At least I'm talking about Asia.

20
00:01:30,180 --> 00:01:36,460
We cannot just write like this DataDot and continue like this LDAP target.

21
00:01:36,930 --> 00:01:45,690
This is not acceptable, but we can use dots, we can use Dasch, we can use underscore, we can use

22
00:01:45,690 --> 00:01:46,830
Callon here as well.

23
00:01:47,130 --> 00:01:51,750
But the most easy and everywhere the developers are using this.

24
00:01:52,420 --> 00:02:03,090
Oh wait, no, this is in HTML, in the DOM, but in JavaScript we are getting these data that target

25
00:02:03,330 --> 00:02:06,160
actually this target can be any name that you want.

26
00:02:06,480 --> 00:02:11,820
So this is my way of solving these problems by adding target.

27
00:02:11,820 --> 00:02:20,820
But what I'm trying to say that in JavaScript we just going to get this part with starting from LDAP

28
00:02:20,820 --> 00:02:22,530
and finish until Target.

29
00:02:22,650 --> 00:02:30,120
So we're going to like this, that and into Camil case target now cavalcades.

30
00:02:30,120 --> 00:02:35,040
We already have use it where it is reading a ratings Scammell case scenario.

31
00:02:35,210 --> 00:02:39,420
This is also Camiel case scenario, but that is in JavaScript.

32
00:02:39,420 --> 00:02:40,860
So I want you to learn.

33
00:02:40,860 --> 00:02:47,550
So if you have your data that links, but you need to put it everywhere, it links here and you can

34
00:02:47,550 --> 00:02:49,650
see the links.

35
00:02:51,280 --> 00:02:56,130
That's the way you can grab them into 2D, into the JavaScript.

36
00:02:56,160 --> 00:02:57,770
OK, now all done.

37
00:02:57,930 --> 00:03:07,950
So I have data tap target everywhere in L.A. and I also have in the description I have data tap content.

38
00:03:08,310 --> 00:03:08,790
Nice.

39
00:03:08,970 --> 00:03:15,870
So what I'm going to do now, I'm going to open the index up HDMI in the index, the Jayasuriya in here,

40
00:03:15,870 --> 00:03:19,350
I'm going to add one more function.

41
00:03:19,620 --> 00:03:24,390
So why I'm adding the function here and it's connected with the movie view.

42
00:03:24,390 --> 00:03:24,710
Right.

43
00:03:24,720 --> 00:03:30,480
Everything that that was connected with movie view we were creating here every function.

44
00:03:30,660 --> 00:03:39,810
But because I am going to access the how to say I'm going to access the event listeners, I'm not going

45
00:03:39,810 --> 00:03:45,360
to do it in this here and this movie View View viewport.

46
00:03:45,360 --> 00:03:45,720
Right.

47
00:03:45,900 --> 00:03:52,800
So I'm going to do it in the controller because every time I use event listeners, I use them in the

48
00:03:52,800 --> 00:03:53,350
controller.

49
00:03:53,370 --> 00:03:57,870
Now, as soon as I start writing, you will understand more.

50
00:03:57,870 --> 00:03:59,640
So I'm going to start writing.

51
00:03:59,640 --> 00:04:05,730
So I'm going to create here const function name, movie description.

52
00:04:06,660 --> 00:04:13,980
Now the name I choose to be like that because so it's not going to take any parameters because it actually

53
00:04:15,540 --> 00:04:16,860
get the description here.

54
00:04:16,890 --> 00:04:21,390
Now here I'm going to say I'm going to make a comment.

55
00:04:21,390 --> 00:04:24,420
So movie description.

56
00:04:26,580 --> 00:04:28,370
That's nice.

57
00:04:28,410 --> 00:04:34,110
So you can put any more meaningful comment that you can think of now inside here, what I'm going to

58
00:04:34,110 --> 00:04:47,240
grab I want to grab all of these sorry, all of these days at that target in one constant second steps.

59
00:04:49,080 --> 00:04:55,560
And I'm going to say document, whoops, what a document that query selector all.

60
00:04:55,770 --> 00:04:57,300
We have used this one before.

61
00:04:57,510 --> 00:05:01,400
And here instead of this, I'm going to select it a little bit different.

62
00:05:01,500 --> 00:05:02,910
So this is the first time.

63
00:05:02,910 --> 00:05:03,750
I think so.

64
00:05:05,640 --> 00:05:12,600
And I do have a problem because I've just have extra quotes here right now.

65
00:05:12,630 --> 00:05:12,810
The.

66
00:05:12,980 --> 00:05:21,570
That targets okeydokey, so Corzo lock the taps, let's see what it will give it to us.

67
00:05:21,580 --> 00:05:24,550
But first, in order to see, we need to call it here.

68
00:05:25,450 --> 00:05:30,490
Yeah, after the display, the movie, we can see display the content.

69
00:05:33,540 --> 00:05:39,120
This the description here, I'm just going to call it a movie.

70
00:05:40,560 --> 00:05:41,390
What was the name?

71
00:05:42,210 --> 00:05:43,050
I just forgot.

72
00:05:43,090 --> 00:05:44,000
Movie description.

73
00:05:44,550 --> 00:05:44,940
Good.

74
00:05:45,330 --> 00:05:47,190
So I'm just going to save it like this.

75
00:05:47,200 --> 00:05:50,490
I'm calling this function that we are declaring below.

76
00:05:51,060 --> 00:05:51,600
Oh, good.

77
00:05:51,930 --> 00:05:57,680
Now, I'm just going to expect it and I will be able to see for Notley's here it is Notley's.

78
00:05:57,690 --> 00:06:02,730
And if I go over here, I will be able to see that we are selecting each and every of them.

79
00:06:02,950 --> 00:06:04,890
OK, now what next?

80
00:06:05,040 --> 00:06:08,670
I want to select the description as well in Darrien.

81
00:06:09,120 --> 00:06:11,250
So I'm pretty much I'm going to copy this one.

82
00:06:13,950 --> 00:06:25,270
But I need to change the name to the tab content and I'm going to put here data content, right?

83
00:06:25,440 --> 00:06:26,400
I think so.

84
00:06:26,400 --> 00:06:27,990
There was a content here.

85
00:06:27,990 --> 00:06:29,400
It did the tab content.

86
00:06:29,400 --> 00:06:29,770
Nice.

87
00:06:30,120 --> 00:06:33,820
So if I can't plug them, I will be able to see the same result.

88
00:06:33,990 --> 00:06:37,120
I will be able to see a four note list.

89
00:06:37,220 --> 00:06:41,340
Now, what is the most interesting thing is that I can look through these.

90
00:06:41,340 --> 00:06:51,870
Notley's using a foreach and I can do this daps that for each cool inside I have access to element.

91
00:06:56,530 --> 00:06:58,220
Make sure that you do semicolon there.

92
00:06:59,410 --> 00:07:08,980
Now, the element I'm going to add event listener, and that will be on click, it will not take any

93
00:07:08,980 --> 00:07:11,530
parameters, but here we need a function as well.

94
00:07:13,120 --> 00:07:15,240
OK, that's a lot of coding here.

95
00:07:15,280 --> 00:07:15,700
Good.

96
00:07:15,880 --> 00:07:20,530
But I'm just going to cancel log item.

97
00:07:21,190 --> 00:07:23,620
A tab item was claque.

98
00:07:28,200 --> 00:07:34,800
To see if I can fire that, this event listener writes, because I'm unclick and this is what you do,

99
00:07:35,250 --> 00:07:38,580
it goes through each and every element of these steps.

100
00:07:38,580 --> 00:07:40,560
And when I click it, it's going to fire this event.

101
00:07:40,710 --> 00:07:41,110
Cool.

102
00:07:41,160 --> 00:07:42,560
Let's see if it's going to work or not.

103
00:07:42,930 --> 00:07:43,610
Reviews.

104
00:07:43,620 --> 00:07:44,790
Yeah, it's working.

105
00:07:45,210 --> 00:07:45,750
It's working.

106
00:07:45,930 --> 00:07:49,230
But here I click and the number is increasing.

107
00:07:49,240 --> 00:07:49,920
Nothing else.

108
00:07:52,160 --> 00:08:01,490
And consuming anymore, I'm not here is OK now I have the the one that I need.

109
00:08:01,530 --> 00:08:05,860
Now what I need extra is just to get the target.

110
00:08:06,080 --> 00:08:12,260
And this is the most interesting way from this entire video.

111
00:08:12,260 --> 00:08:20,580
So I'm going to say const target, by the way, you can add any name.

112
00:08:20,660 --> 00:08:24,200
So these are not from JavaScript?

113
00:08:24,200 --> 00:08:24,780
Nothing.

114
00:08:24,800 --> 00:08:28,250
So these are mine daps tabs contin aliment.

115
00:08:28,250 --> 00:08:29,990
It can be e right.

116
00:08:30,200 --> 00:08:34,730
Everything we can change so but I cannot change foreach.

117
00:08:35,480 --> 00:08:38,090
That's method from JavaScript.

118
00:08:38,120 --> 00:08:47,540
OK now document dot query selector in one more reason why I use it here and I pass the data tab target

119
00:08:47,540 --> 00:08:52,250
like this because they were not loaded in the first initial screen.

120
00:08:52,280 --> 00:08:52,570
Right.

121
00:08:53,580 --> 00:08:56,180
OK, that's good.

122
00:08:56,210 --> 00:09:02,960
So now I'm going to say element dot data set now is the interesting thing.

123
00:09:02,960 --> 00:09:10,930
The data set that trap this one as I told you, tab, cavalcades, target.

124
00:09:11,600 --> 00:09:18,000
So now we'll be able to list all the names and let's say Kalonzo like the target.

125
00:09:18,230 --> 00:09:23,630
So this will give me the target actually will give me which of these defs here.

126
00:09:23,930 --> 00:09:25,760
I'm targeting reviews.

127
00:09:25,760 --> 00:09:27,560
Cool cast and crew.

128
00:09:27,560 --> 00:09:28,800
Cool media.

129
00:09:28,820 --> 00:09:30,530
Nice overview.

130
00:09:30,710 --> 00:09:31,410
Very good.

131
00:09:32,000 --> 00:09:33,620
So I do have that one.

132
00:09:33,860 --> 00:09:37,220
And this is all, ladies and gentlemen, you can get those things.

133
00:09:37,910 --> 00:09:42,190
Now you're accessing the target element by the current element.

134
00:09:42,200 --> 00:09:48,650
We are looping through data set and you see the camel case of this bar right now.

135
00:09:48,680 --> 00:09:49,660
Everything is nice.

136
00:09:49,940 --> 00:09:54,350
So how I can see all of this when I click, I want to see a result.

137
00:09:54,740 --> 00:09:55,400
That's easy.

138
00:09:55,760 --> 00:10:02,960
Now I can have a class by Target that class list.

139
00:10:03,650 --> 00:10:05,630
I hope you'll still remember this.

140
00:10:06,440 --> 00:10:13,880
And I'm going to add a class and this class will be active that now I have defined this class in this

141
00:10:13,880 --> 00:10:14,300
class.

142
00:10:14,300 --> 00:10:16,130
It's like here this underline.

143
00:10:16,310 --> 00:10:19,760
So when I click here, oh my God, you see this?

144
00:10:21,080 --> 00:10:25,250
We are loading more information, but unfortunately something is happening.

145
00:10:25,250 --> 00:10:29,200
Strange if you go back here.

146
00:10:29,930 --> 00:10:38,570
So if I go inspect element, I do have this active dev, active dev, active thep everywhere.

147
00:10:38,870 --> 00:10:40,750
And that is not the goal.

148
00:10:41,090 --> 00:10:42,410
So what is the goal.

149
00:10:42,410 --> 00:10:49,910
I just need to delete all of this and reset, I mean just to remove this active tab from here.

150
00:10:50,210 --> 00:10:54,560
So what I can do, I do have this tab content.

151
00:10:56,390 --> 00:11:02,300
Already saved, and what I can do is tap content, I can loop through them, right?

152
00:11:02,600 --> 00:11:04,690
That's why it's so easy.

153
00:11:05,000 --> 00:11:12,470
So I'm going to say here, Elliman, not just to confuse you and here element the class list that we

154
00:11:12,470 --> 00:11:13,190
move.

155
00:11:16,610 --> 00:11:24,230
Active death, but this is not super good.

156
00:11:24,530 --> 00:11:29,630
So here is I'm removing I'm removing everything is working as it should the regulations.

157
00:11:29,820 --> 00:11:32,270
So if you want to stop until here, you can.

158
00:11:32,690 --> 00:11:39,320
But I am going to add this underline everywhere when I click.

159
00:11:39,330 --> 00:11:43,470
So I want these active glass to go here and we need to work for that one.

160
00:11:43,490 --> 00:11:48,110
So first of all, I'm just going to say I'm calling here now.

161
00:11:48,110 --> 00:11:54,110
First of all, I can do this because I have access to the current element and I can say, OK, aliment.

162
00:11:56,370 --> 00:12:03,870
And again, I can class at least I can edit this class, but it's going to be bet you will see why.

163
00:12:09,670 --> 00:12:19,390
So overview is good reviews, still good, but the overview stays selected and it's still active, still

164
00:12:19,390 --> 00:12:20,020
active.

165
00:12:20,050 --> 00:12:22,220
OK, now I messed it up.

166
00:12:22,240 --> 00:12:25,090
Now what is something that I can fix?

167
00:12:25,600 --> 00:12:32,340
Well, I do have the taps as well, so I can do the pretty much same thing here.

168
00:12:32,350 --> 00:12:34,180
I'm just going to change it to Taps.

169
00:12:35,440 --> 00:12:45,300
And I can just say here that instead of Elliman, I can give a tap name and say tap any name here.

170
00:12:45,300 --> 00:12:45,600
Right.

171
00:12:45,640 --> 00:12:46,920
Remove this glass.

172
00:12:47,350 --> 00:12:47,780
Nice.

173
00:12:47,830 --> 00:12:49,000
Let's see what's happening now.

174
00:12:50,050 --> 00:12:55,240
Reviews bam removed from the overview cast removed.

175
00:12:55,630 --> 00:12:57,290
Media removed.

176
00:12:58,000 --> 00:12:58,450
Nice.

177
00:12:59,350 --> 00:13:03,070
One more thing that I want to add is this cast and crew.

178
00:13:03,220 --> 00:13:06,870
We haven't done anything there, so how we can fix this.

179
00:13:06,880 --> 00:13:11,320
OK, let's go back to our movie's view file.

180
00:13:12,220 --> 00:13:13,720
It's pretty much here.

181
00:13:15,790 --> 00:13:17,440
I'm going to remove this part.

182
00:13:18,220 --> 00:13:23,720
Make sure you remove the correct one, and here I'm going to call a function.

183
00:13:24,510 --> 00:13:28,090
Now I'm going to call a function actors.

184
00:13:28,090 --> 00:13:34,510
But first, I need to create those function here so it's not going to be a function.

185
00:13:34,510 --> 00:13:38,440
That is how say we're going to explore them.

186
00:13:38,440 --> 00:13:40,480
We just going to use it here locally.

187
00:13:40,900 --> 00:13:46,720
Actors in here, I'm going to pass passing two things, actor and index.

188
00:13:47,050 --> 00:13:47,480
Good.

189
00:13:47,770 --> 00:13:50,500
Now, why I'm doing this template literals.

190
00:13:51,130 --> 00:13:53,470
I'm just going to make it very simple.

191
00:13:53,800 --> 00:13:56,350
Index commer.

192
00:13:58,560 --> 00:13:59,340
Actors.

193
00:14:00,410 --> 00:14:02,460
Sorry, actor, that's it.

194
00:14:02,630 --> 00:14:09,590
I don't have to return anything because it's one line and this is six, we'll know this function will

195
00:14:09,590 --> 00:14:11,380
need to return this.

196
00:14:11,600 --> 00:14:16,760
So I'm just using this because I want to show you that instead of one argument, we can pass two arguments.

197
00:14:17,120 --> 00:14:22,970
And I'm here, down here, I'm going to use the map method where it is here.

198
00:14:24,060 --> 00:14:30,840
OK, so here instead of PAETEC inside of PAETEC, sorry, I'm just going to say movie.

199
00:14:31,040 --> 00:14:31,390
Oops.

200
00:14:34,110 --> 00:14:35,400
The actors.

201
00:14:36,980 --> 00:14:44,600
Doc map, I have the actors list here, so I'm going to map through that one and I'm just going to pass

202
00:14:44,600 --> 00:14:52,440
in here the current element in the index right here.

203
00:14:52,460 --> 00:14:53,780
I'm going to see actors.

204
00:14:55,960 --> 00:15:01,780
Just let's see, you know, specify actors here or OK, yeah, actors make sure these actors, plural,

205
00:15:01,780 --> 00:15:07,990
not actor, OK, and here I'm going to pass the same EL index.

206
00:15:08,530 --> 00:15:09,190
Nice.

207
00:15:10,390 --> 00:15:12,730
And I think I've done mistake on top.

208
00:15:14,050 --> 00:15:15,430
That is the mistake one.

209
00:15:15,550 --> 00:15:18,070
So I want, for example, zero dot name.

210
00:15:18,220 --> 00:15:18,650
Right.

211
00:15:19,300 --> 00:15:19,800
Save it.

212
00:15:20,320 --> 00:15:21,160
Let's go here.

213
00:15:22,150 --> 00:15:26,700
Cast and crew here were these random small H-E.

214
00:15:27,130 --> 00:15:28,450
The other one will be one.

215
00:15:28,780 --> 00:15:29,240
Right.

216
00:15:29,290 --> 00:15:34,110
So everything is as it should go.

217
00:15:34,270 --> 00:15:40,630
Now I have everything looped with their index is now you can create a more meaningful way.

218
00:15:40,840 --> 00:15:43,120
You can create the unordered at least if you want.

219
00:15:43,420 --> 00:15:45,880
And you can jam this here.

220
00:15:45,890 --> 00:15:47,590
I mean you can add those here.

221
00:15:48,460 --> 00:15:52,480
Now our obligation is pretty much done with for for this part.

222
00:15:52,960 --> 00:15:56,890
When I say for this part, I'm meaning for those so we can go to a trailer.

223
00:15:56,890 --> 00:16:02,200
But now these three things and the buy tickets, they are not working.

224
00:16:02,200 --> 00:16:10,540
So our next goal, we will be to work on the likes, to work on increasing the tickets to buy the tickets

225
00:16:10,540 --> 00:16:12,670
in the EU.

226
00:16:12,790 --> 00:16:15,070
So that will be pretty much it.

227
00:16:15,290 --> 00:16:21,720
So thank you very much for watching and I hope this lecture was super nice for you.

228
00:16:22,090 --> 00:16:27,550
Now, these reviews, these steps, actually, actually you can use it for anything.

229
00:16:27,550 --> 00:16:33,460
For example, if you have a website, we want to explain a couple of things here without spending too

230
00:16:33,460 --> 00:16:36,160
much space with the text.

231
00:16:36,160 --> 00:16:42,160
Now, you can create this tab and yeah, the users can flick around all of these and read the information.

232
00:16:42,250 --> 00:16:43,510
No, well, that's pretty much it.

233
00:16:43,810 --> 00:16:46,420
I hope you enjoyed this one and I hope you learn something new.

234
00:16:46,780 --> 00:16:48,900
Now, data set is very important.

235
00:16:49,120 --> 00:16:55,780
Learn how you learn how to create the data set here where it was.

236
00:16:55,780 --> 00:16:57,520
Now the data set.

237
00:16:57,520 --> 00:17:04,030
It needs to be defined in a special way in HTML and we can read it like this.

238
00:17:04,330 --> 00:17:07,960
Camil case in oops sorry.

239
00:17:08,080 --> 00:17:10,630
Here Gammel case in JavaScript.

240
00:17:10,870 --> 00:17:12,100
So that is pretty much it.

241
00:17:12,220 --> 00:17:18,070
So the JavaScript, the name of a custom data attribute, is actually the name of the Salmat HDMI tune

242
00:17:18,310 --> 00:17:19,480
that I've just mentioned.

243
00:17:19,720 --> 00:17:20,980
But in the camel case.

244
00:17:21,160 --> 00:17:24,310
So we without dashes, dots or anything else.

245
00:17:24,340 --> 00:17:24,730
Right.

246
00:17:25,180 --> 00:17:26,230
That is pretty much it.

247
00:17:26,710 --> 00:17:29,040
And I hope I'm going to see you in the next one.