1
00:00:08,130 --> 00:00:15,800
Hey, everyone, in this lesson, we're going to talk about CSX manipulation, so now things are going

2
00:00:15,800 --> 00:00:23,810
to get more interesting because after some event happens, instead of just sending a message to the

3
00:00:23,810 --> 00:00:32,330
console or something through the alert function, we're going to actually change the success of some

4
00:00:32,330 --> 00:00:32,960
element.

5
00:00:33,260 --> 00:00:37,850
So we have this button here, so let's work with it.

6
00:00:38,090 --> 00:00:43,070
So we have this idea of color button that just copied this.

7
00:00:43,280 --> 00:00:45,500
And let's go to Visual Studio Code.

8
00:00:46,130 --> 00:00:51,410
So now we can just copy the code we wrote on the previous lesson.

9
00:00:51,440 --> 00:00:55,550
So here we just use the UNCLICK event.

10
00:00:55,820 --> 00:00:58,570
Let's copy this without the comment.

11
00:00:59,000 --> 00:01:04,580
So like this controversy and now down here we can just based it.

12
00:01:04,940 --> 00:01:10,790
So now the elements that we want to monitor events on.

13
00:01:11,800 --> 00:01:13,410
It's called color.

14
00:01:17,170 --> 00:01:24,610
Button, so when there's a click on this button, we are going to do something, so this time we are

15
00:01:24,610 --> 00:01:26,650
not going to do the alert.

16
00:01:27,950 --> 00:01:40,580
So now let's just copy this selection method, so get Element Bayada again, but this time, instead

17
00:01:40,580 --> 00:01:50,960
of using an event or using the inner HTML property we've been using, let's just use the style property.

18
00:01:51,110 --> 00:01:56,640
And now inside here, we have properties for all the CSF properties.

19
00:01:56,900 --> 00:02:01,940
So if we want to change like the background color.

20
00:02:03,080 --> 00:02:07,250
We can just do it like this and then type back.

21
00:02:09,430 --> 00:02:16,360
Ground colour, so why am I not using the dot notation?

22
00:02:16,690 --> 00:02:22,690
This is because I have a dash here, so this is not following the variable naming rules.

23
00:02:23,020 --> 00:02:26,420
So I cannot use DOT for the background color.

24
00:02:26,830 --> 00:02:29,030
I can only do it like this.

25
00:02:29,050 --> 00:02:31,990
So then I'm going to change this property.

26
00:02:32,320 --> 00:02:37,090
So let's just peak value like purple.

27
00:02:39,430 --> 00:02:43,090
All right, let's save this, let's go back to our page.

28
00:02:46,180 --> 00:02:53,530
So when we refresh the page, when we click on the button, we can see that now the color is changing,

29
00:02:53,860 --> 00:02:55,130
which is really cool.

30
00:02:55,510 --> 00:03:01,940
So let's go there and let's do some more see assess changes.

31
00:03:02,290 --> 00:03:05,260
So this time, I'm just going to copy this.

32
00:03:07,900 --> 00:03:16,060
And instead of changing the background colour, I'm just going to use the transform property, so if

33
00:03:16,060 --> 00:03:21,920
you know success, you can change any success property from JavaScript.

34
00:03:22,270 --> 00:03:31,450
So in this case, the transform is just following the variable naming rules so we can use the dot notation.

35
00:03:31,450 --> 00:03:32,260
So dot.

36
00:03:33,290 --> 00:03:34,700
Transform.

37
00:03:37,330 --> 00:03:49,090
And then just like we would write on the success, let's try translate X, so let's move the element

38
00:03:49,450 --> 00:03:51,460
to the left or to the right.

39
00:03:52,390 --> 00:03:56,910
So in this case, let's move it 100 hundred pixels to the right.

40
00:03:57,400 --> 00:03:58,660
So let's save this.

41
00:04:01,430 --> 00:04:09,080
Refresh the page when we click on the button, not only it's going to change the color, but it is always

42
00:04:09,080 --> 00:04:13,340
going to be moved a hundred pixels to the right.

43
00:04:13,460 --> 00:04:17,630
Before we move ahead, just one thing that I want to show you.

44
00:04:17,930 --> 00:04:25,490
I just mentioned that since this property does not follow the variable naming rules because it has a

45
00:04:25,490 --> 00:04:31,790
dash, so we can only use the braces, but we can actually use the dot.

46
00:04:32,800 --> 00:04:37,690
And use the lower cammo case, so if you do back.

47
00:04:40,590 --> 00:04:41,340
Ground.

48
00:04:43,210 --> 00:04:52,750
And then after the dash, every word should start with upper case, so background color just like this.

49
00:04:53,230 --> 00:04:54,450
Let's save this.

50
00:04:54,460 --> 00:04:56,020
Let's see if this works.

51
00:05:00,460 --> 00:05:04,180
Let's click the button, we can see that this is working.

52
00:05:04,480 --> 00:05:06,970
So this is just a workaround.

53
00:05:06,970 --> 00:05:17,380
So if you have a CSX property called font size, you can use the DOT notation just by doing font.

54
00:05:18,460 --> 00:05:26,350
Sise using the lower cammo notation, so I just wanted to show you this, and now just one less thing

55
00:05:26,350 --> 00:05:31,750
before we move ahead is that we can actually simplify this code.

56
00:05:31,990 --> 00:05:35,050
So I'm just going to copy this for now.

57
00:05:35,320 --> 00:05:37,950
I'm going to comment all this code.

58
00:05:38,200 --> 00:05:40,660
So this is one way of writing it.

59
00:05:41,020 --> 00:05:46,840
So let's based it here and let's just try to simplify this code.

60
00:05:47,080 --> 00:05:49,870
So as you can see, we are repeating this.

61
00:05:50,170 --> 00:05:55,570
So here we select the element, we select the element again and again.

62
00:05:55,780 --> 00:06:04,750
And we know that Shava script is a verbose, which means that we need to write a lot of code to get

63
00:06:04,750 --> 00:06:05,650
things done.

64
00:06:05,830 --> 00:06:16,030
So this is a very long statement gat element by and then the idea of the element between parentheses.

65
00:06:16,360 --> 00:06:23,260
When I was starting out with JavaScript, I was a bit annoyed by this because the statements were very

66
00:06:23,260 --> 00:06:23,920
long.

67
00:06:24,010 --> 00:06:26,670
But we can actually simplify this.

68
00:06:26,680 --> 00:06:33,490
So since we just selected the elements and we are setting in on claque element on it.

69
00:06:34,820 --> 00:06:43,100
When we go inside it, the element that is getting the event, which is this one, can be changed to

70
00:06:43,100 --> 00:06:44,810
the this keyword.

71
00:06:44,990 --> 00:06:45,950
So this.

72
00:06:47,980 --> 00:06:50,230
And here we can also use.

73
00:06:51,350 --> 00:07:01,430
This so the element that's receiving the event can be called inside the function as this, so let's

74
00:07:01,430 --> 00:07:05,860
save this and let's see if this is going to work the same way.

75
00:07:06,140 --> 00:07:11,810
So now I'm clicking on it and we can see that we have the same result.

76
00:07:12,110 --> 00:07:14,540
So this is one way of doing it.

77
00:07:14,750 --> 00:07:24,380
And I'm going to show you a different way, because sometimes we want to apply a click event to an element,

78
00:07:24,560 --> 00:07:28,990
but then inside here, we just want to change another element.

79
00:07:29,270 --> 00:07:31,580
So there is another way of doing this.

80
00:07:32,150 --> 00:07:34,490
So let me just comment on this.

81
00:07:37,970 --> 00:07:42,410
And now what we can do is just creating a variable called button.

82
00:07:44,990 --> 00:07:49,220
And we are going to select this element.

83
00:07:54,280 --> 00:08:01,360
So now that we did this, we can just use the variable name so we don't have to call this method every

84
00:08:01,360 --> 00:08:04,870
time, so now we can just use the name of the variable.

85
00:08:05,050 --> 00:08:13,220
So button dot unclick and then we can just do button that style, button that style again.

86
00:08:13,510 --> 00:08:16,040
So this is another way of doing this.

87
00:08:16,390 --> 00:08:18,220
Let's save this now.

88
00:08:18,220 --> 00:08:21,430
Refreshing the page and clicking on the button.

89
00:08:21,670 --> 00:08:24,040
We can see the same result.

90
00:08:24,250 --> 00:08:26,740
So let's try something different now.

91
00:08:26,740 --> 00:08:32,410
Instead of using the on click button, let's just use the.

92
00:08:33,680 --> 00:08:35,360
On mouseover.

93
00:08:37,020 --> 00:08:45,810
So let's see how this is going to work now, so button that on, Miles over, let's save this.

94
00:08:47,390 --> 00:08:55,460
Refresh the page, so now we have the button when we covered the cursor over the button, we can see

95
00:08:55,460 --> 00:09:01,250
that now the event has been detected and our function has been executed.

96
00:09:01,260 --> 00:09:10,520
So this changes everything we've seen so far because now we can monitor events on our page and then

97
00:09:11,060 --> 00:09:13,670
we can just send messages.

98
00:09:13,670 --> 00:09:16,760
We can change the success of any element.

99
00:09:16,950 --> 00:09:26,330
So this means that we can open and close menus, we can pass photos on a photo slider, we can expand

100
00:09:26,330 --> 00:09:28,700
our collapse sections.

101
00:09:29,060 --> 00:09:34,490
So this is the starting point of something that's going to be really, really cool.

102
00:09:34,730 --> 00:09:37,730
So that was all that I wanted to say for the moment.

103
00:09:37,730 --> 00:09:44,720
In the next video, we are going to learn a few more get element methods of see you then.