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.