1
00:00:00,300 --> 00:00:07,530
All right, and once we're able to fetch our user now let's take care of the buttons where as we're

2
00:00:07,530 --> 00:00:14,040
hovering over a specific button, of course, I would want to change my title and then, of course,

3
00:00:14,040 --> 00:00:20,910
of the value and believe it or not, the hardest part is already behind us, because as far as this

4
00:00:20,910 --> 00:00:23,910
set up, it's not going to be as hard as you think.

5
00:00:24,390 --> 00:00:25,830
So we have our handle volume.

6
00:00:26,160 --> 00:00:26,670
Correct.

7
00:00:27,070 --> 00:00:33,630
And then every time I'm hovering over the button, I can get the target because I pass in the event

8
00:00:33,720 --> 00:00:34,140
object.

9
00:00:34,140 --> 00:00:37,360
And then specifically I'm looking for target property.

10
00:00:37,770 --> 00:00:42,380
Now, one Gotcher one, you have the button and line inside of the button.

11
00:00:42,390 --> 00:00:43,160
There's something else.

12
00:00:43,170 --> 00:00:47,940
For example, in this case, of course it is our icon is the fact that.

13
00:00:48,780 --> 00:00:56,220
Well, that target is changing, or in my case, since data label, this is very important, I'm looking

14
00:00:56,220 --> 00:00:57,750
for that data label.

15
00:00:57,960 --> 00:01:05,790
Since that one is sitting on a button, I actually need to make sure that I only get the info when I'm

16
00:01:05,790 --> 00:01:09,460
hovering over the button, and I'll show you that in a split second.

17
00:01:09,720 --> 00:01:16,110
So at the moment, I have a console and I notice in some cases, yes, I get of the button, but then

18
00:01:16,110 --> 00:01:18,180
in some cases I get a 3G.

19
00:01:18,600 --> 00:01:20,600
Essentially I'm getting my icon.

20
00:01:21,030 --> 00:01:28,830
And while that kind of works, since I'm looking for a data label, well, I kind of get that data label

21
00:01:29,010 --> 00:01:29,860
from the Asaji.

22
00:01:30,270 --> 00:01:32,060
This is the value that I'm looking for.

23
00:01:32,310 --> 00:01:37,830
That's the one that I would need, because, of course, once I don't know which button less, then

24
00:01:37,830 --> 00:01:42,070
of course I will be able to change these two values over here.

25
00:01:42,420 --> 00:01:46,530
So first, before we do anything as far as the functionality in the value.

26
00:01:47,610 --> 00:01:54,900
I just want to make sure that I'm actually hovering over the button, so we'll go with if an event target,

27
00:01:55,230 --> 00:02:01,920
so whatever I'm hovering over and then we can simply go with class list and then contains.

28
00:02:02,250 --> 00:02:09,810
So in religious terms, I'm just saying, hey, listen, check if the target that I'm hovering over,

29
00:02:10,110 --> 00:02:13,920
does it have a class of ikon?

30
00:02:14,250 --> 00:02:20,660
If it does beautiful, that means that it is my button because remember the button has the classroom

31
00:02:20,670 --> 00:02:23,280
icon, not the font.

32
00:02:23,280 --> 00:02:23,940
Awesome icon.

33
00:02:24,030 --> 00:02:24,480
Correct.

34
00:02:24,750 --> 00:02:29,130
So if that is the case, then of course I will get that data label.

35
00:02:29,550 --> 00:02:33,120
If it is not the case, well, doesn't matter then don't do anything.

36
00:02:33,480 --> 00:02:40,020
And then as far as accessing that data label, well, again, we need to go back to the analogy land

37
00:02:40,320 --> 00:02:42,150
and we go with data set.

38
00:02:42,450 --> 00:02:49,650
Now, since I name this data hyphen label, that is the name of my attribute, if I would want to get

39
00:02:49,650 --> 00:02:51,530
the value in what I want.

40
00:02:51,570 --> 00:02:57,080
Yes, I would need to go with data set dot and the name is label.

41
00:02:57,450 --> 00:03:04,380
So if you'll call this Uncle Bobby and of course you'll have to go with data set and then dot and then

42
00:03:04,380 --> 00:03:05,890
whatever is the name.

43
00:03:06,240 --> 00:03:11,910
So in here I'm just checking whether I'm hovering over the button, not the icon, which is good.

44
00:03:12,150 --> 00:03:19,980
So now I have my button and of course I'll have to have some kind of new variable and I'll set new value

45
00:03:20,220 --> 00:03:23,180
and then I'm going to be looking for a different target.

46
00:03:23,190 --> 00:03:25,650
So my button, this points to the button.

47
00:03:25,950 --> 00:03:33,540
And I remember in order to get data attribute, I just need to go with VeriSign and then DOT and then

48
00:03:33,540 --> 00:03:36,590
label and now I'm getting that particular value.

49
00:03:36,840 --> 00:03:40,840
And if you want to control log course, definitely do so.

50
00:03:41,130 --> 00:03:42,690
So we're going to go with new value.

51
00:03:43,700 --> 00:03:51,290
And as I'm hovering notice now, I'm getting these values for those labels, so now we need to put two

52
00:03:51,290 --> 00:03:52,030
and two together.

53
00:03:52,520 --> 00:03:58,190
So we are getting the ages, the passwords, the numbers and all that.

54
00:03:58,670 --> 00:04:01,900
And we already have that in our object.

55
00:04:02,180 --> 00:04:07,260
So there was a way for us to access them dynamically on this object.

56
00:04:07,670 --> 00:04:15,430
So if you want again, you can control a log of the new or I'm sorry person, that should be our object.

57
00:04:15,710 --> 00:04:19,190
So if you can still log notice, this gets me that object.

58
00:04:19,190 --> 00:04:19,630
Correct.

59
00:04:20,180 --> 00:04:24,500
So what I'm looking for here is, of course, the value for the property.

60
00:04:24,920 --> 00:04:26,960
So I already have the property name.

61
00:04:27,350 --> 00:04:27,760
Correct.

62
00:04:27,980 --> 00:04:29,330
That is in my label.

63
00:04:29,570 --> 00:04:35,750
And then the second thing is, of course, this value I have the property name in the object.

64
00:04:36,080 --> 00:04:44,570
So what we can do is we can just dynamically access the object property value and we simply do so by

65
00:04:44,570 --> 00:04:49,940
using the square brackets in here set value instead of hard coating anything.

66
00:04:50,270 --> 00:04:52,090
I'm just going to go with that person.

67
00:04:52,400 --> 00:05:01,540
So that is my object and I'll dynamically access the property value bypassing and the property.

68
00:05:01,760 --> 00:05:09,260
Again, if you need to go back to my JavaScript Nugget series, please do so because there I go to way

69
00:05:09,320 --> 00:05:11,450
more detail how we can access them.

70
00:05:11,600 --> 00:05:16,420
At the end of the day, it is just so I'm not going to spend too much time on it.

71
00:05:16,700 --> 00:05:21,880
And also remember that when we talk about the title, I also want to change it.

72
00:05:22,160 --> 00:05:25,580
And in this case I'm getting already the string correct.

73
00:05:26,120 --> 00:05:28,340
Because remember in here we're just passing in the string.

74
00:05:28,580 --> 00:05:36,440
So what we could do is instead of console logging everything meaning the person object, I'm just going

75
00:05:36,440 --> 00:05:45,290
to go with set and title and that one will be equal to my new value string.

76
00:05:45,740 --> 00:05:50,000
And what you'll notice right now that, yep, we get this random user beautiful.

77
00:05:50,300 --> 00:05:58,190
But as you're hovering over the buttons, notice how we're changing these values around.

78
00:05:58,490 --> 00:06:06,440
So we have the emails, we have age, street, phone and all that good stuff can get different user.

79
00:06:06,650 --> 00:06:09,220
And again, we can do exactly the same.

80
00:06:09,780 --> 00:06:10,790
That was the project.

81
00:06:10,950 --> 00:06:14,570
Hopefully everyone enjoys it and I hope the next one.