0
1
00:00:00,880 --> 00:00:08,020
Now, when we're writing code for web sites, in order to keep our code tidy and easy to debug, we have to
1

2
00:00:08,020 --> 00:00:13,160
keep in mind the idea of the separation of concerns at all times.
2

3
00:00:13,160 --> 00:00:22,060
And what this means is that your HTML is for content only, and your CSS is there to style
3

4
00:00:22,060 --> 00:00:26,450
your web site, and your Javascript is there for behavior.
4

5
00:00:27,860 --> 00:00:33,740
So we've not been following this rule very closely because we've been trying to change the style of
5

6
00:00:33,740 --> 00:00:35,960
each element using Javascript.
6

7
00:00:35,960 --> 00:00:44,240
We've been writing things like document.querySelector .style.color = “red”, and this is
7

8
00:00:44,240 --> 00:00:51,950
not good practice because we're changing the style of each element using Javascript, whereas ideally
8

9
00:00:52,040 --> 00:00:59,420
all of our styles should actually be inside our CSS. But the problem is that if we wanted our style
9

10
00:00:59,420 --> 00:01:05,210
to change on the fly, say if a user clicks on a button then the color of the background changes,
10

11
00:01:05,210 --> 00:01:10,240
then we kind of need to change that using Javascript and the style property, right?
11

12
00:01:10,610 --> 00:01:15,880
Well, as with all things programming, there's usually another way, and it's usually better.
12

13
00:01:15,880 --> 00:01:17,990
And so this is one of those cases.
13

14
00:01:18,020 --> 00:01:24,860
Now one of the things that we can tap into is something called a class list and it's a property of every
14

15
00:01:24,860 --> 00:01:25,850
DOM object.
15

16
00:01:25,850 --> 00:01:35,810
So, for example, if we query for our button and we tap into its classList property, then you can see that
16

17
00:01:35,810 --> 00:01:42,410
it gives us a list of the classes that are attached to this element that we found.
17

18
00:01:42,410 --> 00:01:49,460
So the element in this case is our button, and you can see that inside the class attribute we've only got
18

19
00:01:49,460 --> 00:01:52,020
a single class, which is btn.
19

20
00:01:52,070 --> 00:02:01,040
Now once we have the list of classes, then we can use methods, for example .add, and we can add classes
20

21
00:02:01,130 --> 00:02:02,480
to the class list.
21

22
00:02:02,480 --> 00:02:10,160
So, for example, if I wanted to add a class, for example invisible, then I can add this new class to the
22

23
00:02:10,160 --> 00:02:14,800
list of classes on our button element in our document.
23

24
00:02:15,110 --> 00:02:22,700
And now, if I hit enter and we check out our button, you can see that it's got the class btn, but it's also
24

25
00:02:22,700 --> 00:02:24,920
got the class invisible.
25

26
00:02:24,920 --> 00:02:32,150
Now what this allows us to do is we can tap into the stylesheet and we can create a separate style for,
26

27
00:02:32,150 --> 00:02:40,010
say, the invisible class, and we can say, maybe, visibility is hidden.
27

28
00:02:40,010 --> 00:02:47,630
So now, if I do the same thing where I add that invisible class to the class list of button, then you
28

29
00:02:47,630 --> 00:02:54,050
can see that as soon as that class is added to our button, the CSS style for invisible gets applied and
29

30
00:02:54,050 --> 00:02:56,060
our button disappears.
30

31
00:02:56,060 --> 00:03:03,260
So this way we can keep all of our styles still inside our style sheet but we can turn it on and off
31

32
00:03:03,350 --> 00:03:04,870
using Javascript.
32

33
00:03:04,890 --> 00:03:11,900
Now, in addition to add, we can also remove. So now, at a different stage, I want my button to reappear.
33

34
00:03:12,110 --> 00:03:19,160
Then I can simply remove that invisible class and all of the styles that are associated with that class gets
34

35
00:03:19,160 --> 00:03:25,100
taken off that button. And the last method that's quite useful is toggle. And toggle simply means that,
35

36
00:03:25,550 --> 00:03:29,360
if the class invisible is already applied then remove it,
36

37
00:03:29,360 --> 00:03:31,760
and if it's not applied then apply it.
37

38
00:03:31,760 --> 00:03:39,400
So now if I just keep using toggle you can see our button comes on and off and on and off.
38

39
00:03:39,410 --> 00:03:43,210
So by doing this we're staying true to the separation of concerns.
39

40
00:03:43,430 --> 00:03:49,310
So that means that when we need to debug our code it's going to be a lot easier this way because if
40

41
00:03:49,310 --> 00:03:54,890
a particular element is not looking the way that we want it to, then we can simply dig into the stylesheet
41

42
00:03:54,980 --> 00:03:55,930
and change it.
42

43
00:03:56,150 --> 00:04:01,280
But if something is not behaving the way that we want it to, then we can go into the Javascript and dig
43

44
00:04:01,280 --> 00:04:02,610
through the code there.
44

45
00:04:02,630 --> 00:04:09,200
Now why don’t you give it a go? Go into Atom, and more specifically the stylesheet, and create a class called
45

46
00:04:09,260 --> 00:04:10,420
huge,
46

47
00:04:10,460 --> 00:04:17,750
and I want you to change the font size in there to 10rem. And when the class huge is applied to any element
47

48
00:04:17,900 --> 00:04:21,670
then it will change the text size to 10rem.
48

49
00:04:21,860 --> 00:04:27,730
And then I want you to go into the Javascript and apply that to our h1 and see how it works.
49

50
00:04:27,740 --> 00:04:30,050
So pause the video now and give that a go.
50

51
00:04:31,830 --> 00:04:32,120
All right.
51

52
00:04:32,120 --> 00:04:34,350
So first let's create our class.
52

53
00:04:34,350 --> 00:04:41,010
We're going to create a class called huge and we're going to change the font size whenever any element
53

54
00:04:41,160 --> 00:04:45,110
gets this class applied to 10rem.
54

55
00:04:45,120 --> 00:04:50,970
And while we're at it, why not just do some other things as well? Let’s change the color to red and change
55

56
00:04:50,970 --> 00:04:54,360
the font weight to bold.
56

57
00:04:54,600 --> 00:05:01,500
And now if we apply this class then all of these styles will be applied to the same element and we can
57

58
00:05:01,500 --> 00:05:05,440
do that using our document.querySelector.
58

59
00:05:05,730 --> 00:05:12,720
And we're going to select our h1, and instead of using .style.color equals red, .style.font-size
59

60
00:05:12,720 --> 00:05:20,730
equals 10rem, then all we need to do is just say .classList.add, and the class we want
60

61
00:05:20,730 --> 00:05:22,830
to add is called huge.
61

62
00:05:22,830 --> 00:05:30,510
And now, if we hit enter, then you can see that our h1 has become 10rem, red and bold, and all
62

63
00:05:30,510 --> 00:05:37,410
of those styles got applied to it just by using a single line of Javascript and keeping our code separated
63

64
00:05:37,500 --> 00:05:42,930
so that our style is still in our stylesheet and our behavior is still in our Javascript.
64

65
00:05:42,930 --> 00:05:48,960
Now in the next lesson we're going to look at not just how we can manipulate styles but we can see how
65

66
00:05:48,960 --> 00:05:53,810
we can manipulate text using elements that we selected in the DOM.
66

67
00:05:53,820 --> 00:05:57,090
So for all of that and more, I’ll see you on the next lesson.