Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,180 --> 00:00:00,690
Beautiful.
2
00:00:00,870 --> 00:00:05,600
We can display one job in our case, of course, that is the first job.
3
00:00:05,610 --> 00:00:13,500
But if all this value around and I'll say for example one, then of course I'll see the second job from
4
00:00:13,500 --> 00:00:13,980
my list.
5
00:00:14,350 --> 00:00:20,330
Now, it would be awesome if we would the buttons for all the jobs that we have in the list.
6
00:00:20,700 --> 00:00:25,410
And then once we click on a button, then, of course we change their state value.
7
00:00:25,800 --> 00:00:32,830
And then the moment we do that, we also display a different job from our list.
8
00:00:33,270 --> 00:00:39,510
Now, before we go any further, let me just tell you that, yes, EEOC right now, they're set up on
9
00:00:39,510 --> 00:00:42,780
a bigger screen just because we haven't added the buttons.
10
00:00:43,080 --> 00:00:44,040
So don't freak out.
11
00:00:44,040 --> 00:00:47,130
We'll fix it in a second when we add the buttons.
12
00:00:47,610 --> 00:00:51,900
And the way it's going to work is where we have the button container.
13
00:00:52,230 --> 00:00:57,080
So at the moment, we just have the comment, but eventually will have the button container.
14
00:00:57,480 --> 00:01:03,140
I'm going to add a div with a class of bittoun and then container.
15
00:01:03,600 --> 00:01:12,690
Now in here I would want to iterate over jobs and then for every job I would want to display specific
16
00:01:12,690 --> 00:01:15,630
button so each job should have that.
17
00:01:16,230 --> 00:01:17,700
So I'm going to go here with jobs.
18
00:01:18,120 --> 00:01:25,890
So I'll use the map of course, because I would want to wrap the values in some kind of meaningful return
19
00:01:26,730 --> 00:01:27,060
button.
20
00:01:27,300 --> 00:01:29,910
And then I'll also check for the index.
21
00:01:29,910 --> 00:01:33,430
And this is going to be the case where index is going to be important.
22
00:01:33,780 --> 00:01:35,220
So we're going to go here with the return.
23
00:01:36,120 --> 00:01:40,500
We're returning a button for every item we have in the list.
24
00:01:40,740 --> 00:01:44,970
And if you just want to see the item, you can choose whichever property you would want.
25
00:01:45,220 --> 00:01:47,460
In my case, that is going to be a company.
26
00:01:47,760 --> 00:01:50,640
So in here, go with item that represents that object.
27
00:01:50,880 --> 00:01:55,740
But since we cannot randomly object and react, we would need to go with specific property.
28
00:01:56,010 --> 00:01:59,460
So in my case, I chose the property of company.
29
00:01:59,880 --> 00:02:03,240
So now as you can see, I have my buttons.
30
00:02:03,270 --> 00:02:09,360
Now, of course, nothing is happening as I click on them, but at least I can see that I render button
31
00:02:09,510 --> 00:02:13,590
for every job that I have in my list.
32
00:02:13,990 --> 00:02:15,300
OK, that's awesome.
33
00:02:15,630 --> 00:02:19,980
Now I also need to add a key because there's going to be a big fat warning.
34
00:02:20,370 --> 00:02:27,510
If I don't turn here, I'm going to go with item and then that it since I know that that property is
35
00:02:27,510 --> 00:02:31,730
on my object and now of course, I would want the unclick.
36
00:02:32,100 --> 00:02:38,010
Now, I'm purposely not adding siestas yet because this is going to be a bit more interesting.
37
00:02:38,760 --> 00:02:41,440
So I'm leaving that for the last for now.
38
00:02:41,440 --> 00:02:48,090
I would just want to deal with on unclick where the moment I click on a button, I would want to grab
39
00:02:48,090 --> 00:02:54,190
that index, which essentially just tells me where in the list of that particular job is sitting.
40
00:02:54,510 --> 00:03:01,130
And then once I click on that button, I would want to change my value and that as I change the value,
41
00:03:01,140 --> 00:03:08,100
also notice that, of course, our data will change because in here we're looking for jobs and then
42
00:03:08,100 --> 00:03:09,280
whatever is the value.
43
00:03:09,690 --> 00:03:11,700
So by default is going to be zero.
44
00:03:11,700 --> 00:03:19,320
But then as we click on different buttons, also, the value instead will change and so will the values
45
00:03:19,320 --> 00:03:20,530
for these properties.
46
00:03:20,820 --> 00:03:21,240
All right.
47
00:03:21,550 --> 00:03:22,800
So where I have the button.
48
00:03:23,730 --> 00:03:31,680
Now, I would want to set up my own click show right next to the key I'm going to go with and click
49
00:03:31,680 --> 00:03:37,850
here and I'll say that I'm going to have my line function on line.
50
00:03:37,860 --> 00:03:42,110
We're going to go with set value and we'll pass in the index.
51
00:03:42,480 --> 00:03:47,850
So I'm grabbing the index that represents the placement in the array.
52
00:03:48,150 --> 00:03:55,970
And then once I click on my state value and as I change the state value, I also change what I might
53
00:03:55,980 --> 00:03:56,460
display.
54
00:03:56,880 --> 00:04:03,590
So if I click on this one, this represents right now this particular job, once I click on this one
55
00:04:03,840 --> 00:04:10,380
and of course I have the third job and then once I click on the first one, then I display the initial
56
00:04:10,380 --> 00:04:13,170
job that I rendered by default.
57
00:04:13,350 --> 00:04:14,230
OK, that's good.
58
00:04:14,730 --> 00:04:23,640
And also, if you take a look at the complete project, you'll notice that the item that I have clicked
59
00:04:23,640 --> 00:04:25,680
on has this active class.
60
00:04:25,980 --> 00:04:28,800
So as I'm hovering, there are some changes in sizes.
61
00:04:29,130 --> 00:04:34,580
But also once I click on the item, I would want to apply some specific Cyesis.
62
00:04:34,950 --> 00:04:41,430
So this is exactly what we're going to do where instead of just adding the success directly, like we
63
00:04:41,430 --> 00:04:46,590
normally did with a class name, what I'm going to do over here is class name.
64
00:04:47,600 --> 00:04:53,140
And then I would want to set up my template strand, and that's why I'm going to go back to JavaScript,
65
00:04:53,300 --> 00:05:00,020
so I'll set up my earlier addresses and then by default, I would want to add the job between class.
66
00:05:00,420 --> 00:05:07,310
So I'm going to go here with a job, my friend B10, so get some default styles right away.
67
00:05:07,640 --> 00:05:16,520
But then since it is a template string, I can also check if the index is equal to the value, which
68
00:05:16,520 --> 00:05:19,930
just simply means that this is the button that I have clicked on.
69
00:05:20,240 --> 00:05:26,480
I also would want to add the active button class and the way we do that, we set up our interpolation
70
00:05:26,840 --> 00:05:35,870
and inside we say if the index is equal to my current state value, then I would also want to add the
71
00:05:36,050 --> 00:05:37,150
additional class.
72
00:05:37,550 --> 00:05:43,670
So I'll use my and operator and I'm going to say active my friend B10.
73
00:05:44,120 --> 00:05:53,960
So what I'm checking here is if the index of the button matches the current state value that I have
74
00:05:53,960 --> 00:06:01,760
for my value, then of course I would want this active button if not marked for the rest of them, then
75
00:06:01,760 --> 00:06:02,450
I'm not adding.
76
00:06:02,690 --> 00:06:04,830
And then once I click on a button.
77
00:06:05,180 --> 00:06:11,330
Notice how now for the second button index of that button matches my state value.
78
00:06:11,540 --> 00:06:16,160
And that's why I'm adding that active button which I can navigate to a bigger screen.
79
00:06:16,670 --> 00:06:24,010
I can check out how we display that specific job and we're also adding classes on the fly.
80
00:06:24,320 --> 00:06:27,830
And if you're more interested, you can go to your console.
81
00:06:28,370 --> 00:06:31,340
Not of course we're looking for we are looking for the section.
82
00:06:31,730 --> 00:06:38,420
We have a job center and then we have the button container and notice here how we have job button,
83
00:06:38,420 --> 00:06:39,290
false, false.
84
00:06:39,470 --> 00:06:41,530
And then we have our active button.
85
00:06:41,900 --> 00:06:47,960
So as I'm clicking notice how the placement of the active button class changes.
86
00:06:48,260 --> 00:06:52,010
So it goes to the button that I have clicked on.
87
00:06:52,320 --> 00:06:53,420
That's our project.
88
00:06:53,690 --> 00:06:57,620
Hopefully everyone enjoyed it and I'll see you in the next project.
8744
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.