WEBVTT

1
00:00:01.170 --> 00:00:05.340
<v Jonas>So the DOM actually also includes CSS Styles.</v>

2
00:00:05.340 --> 00:00:09.860
And so with DOM manipulation, we can also change Styles.

3
00:00:09.860 --> 00:00:11.653
So let's try that out now.

4
00:00:13.130 --> 00:00:16.630
And what I want to do here is to change the background

5
00:00:16.630 --> 00:00:19.910
of this entire page here to a green color.

6
00:00:19.910 --> 00:00:22.830
Whenever the player guesses the right number,

7
00:00:22.830 --> 00:00:25.360
so when the player wins the game.

8
00:00:25.360 --> 00:00:29.083
And we will also make this number here, wider then.

9
00:00:30.190 --> 00:00:32.040
So let me just demonstrate that here.

10
00:00:34.100 --> 00:00:36.283
So let's quickly win this game here.

11
00:00:38.440 --> 00:00:40.190
Seventeen.

12
00:00:40.190 --> 00:00:41.520
And so you see,

13
00:00:41.520 --> 00:00:43.490
we want this green background,

14
00:00:43.490 --> 00:00:46.780
and also this number here being wider.

15
00:00:46.780 --> 00:00:50.230
And for that, of course, we need to manipulate the Styles

16
00:00:50.230 --> 00:00:51.440
of this page.

17
00:00:51.440 --> 00:00:52.663
So the CSS.

18
00:00:55.050 --> 00:00:58.170
Okay, so that should happen here in this scenario,

19
00:00:58.170 --> 00:01:00.140
where the player wins the game.

20
00:01:00.140 --> 00:01:03.130
So where the guess is equal to the secret number

21
00:01:03.130 --> 00:01:05.510
and actually, let's add some comments here

22
00:01:05.510 --> 00:01:08.870
to make this code a little bit easier to understand.

23
00:01:08.870 --> 00:01:10.140
So this one,

24
00:01:10.140 --> 00:01:10.973
when

25
00:01:12.060 --> 00:01:13.133
player wins,

26
00:01:14.570 --> 00:01:15.710
this first one is

27
00:01:16.710 --> 00:01:18.440
when there is no

28
00:01:19.470 --> 00:01:20.303
input.

29
00:01:23.860 --> 00:01:25.240
This is when

30
00:01:25.240 --> 00:01:27.130
guess is

31
00:01:27.130 --> 00:01:28.130
too high.

32
00:01:33.116 --> 00:01:34.616
And this one here,

33
00:01:35.639 --> 00:01:37.200
this one guess is too

34
00:01:38.820 --> 00:01:39.653
low.

35
00:01:40.960 --> 00:01:44.990
So this now at least looks a little bit nicer.

36
00:01:44.990 --> 00:01:49.710
But anyway, let's now learn how to manipulate CSS Styles.

37
00:01:49.710 --> 00:01:53.500
So we want to manipulate the Style of this whole page.

38
00:01:53.500 --> 00:01:54.840
And so what we need to do

39
00:01:54.840 --> 00:01:57.963
is to select the whole body of this page first.

40
00:01:59.540 --> 00:02:03.490
Okay, so the body is basically this entire visible part

41
00:02:03.490 --> 00:02:04.563
of the website.

42
00:02:06.320 --> 00:02:09.083
So it's basically this whole element.

43
00:02:10.110 --> 00:02:11.600
Alright.

44
00:02:11.600 --> 00:02:15.060
So as always, we need to start by selecting the element

45
00:02:15.060 --> 00:02:16.543
that we want to manipulate.

46
00:02:17.550 --> 00:02:18.383
So

47
00:02:18.383 --> 00:02:20.283
Document Dot querySelector,

48
00:02:22.000 --> 00:02:23.460
and then the selector.

49
00:02:23.460 --> 00:02:26.800
And now it's just the body element so there's no Dot

50
00:02:26.800 --> 00:02:28.710
because that's for classes.

51
00:02:28.710 --> 00:02:31.860
It's just really the element name.

52
00:02:31.860 --> 00:02:33.580
And since there's only one body,

53
00:02:33.580 --> 00:02:35.690
it's going to work just fine.

54
00:02:35.690 --> 00:02:37.430
So here, we select the body.

55
00:02:37.430 --> 00:02:40.060
And now we want to change the CSS Style.

56
00:02:40.060 --> 00:02:43.500
So here, we need to write Style.

57
00:02:43.500 --> 00:02:44.980
So we access basically,

58
00:02:44.980 --> 00:02:47.950
the Style property of this element and then

59
00:02:47.950 --> 00:02:49.260
another Dot

60
00:02:49.260 --> 00:02:52.470
and then the name of the property that we want to change.

61
00:02:52.470 --> 00:02:55.043
And in this case, it is the background color.

62
00:02:56.290 --> 00:02:57.990
So background

63
00:02:57.990 --> 00:03:01.470
and in CSS, we write the background color like this

64
00:03:01.470 --> 00:03:03.370
background Dash

65
00:03:03.370 --> 00:03:04.290
color,

66
00:03:04.290 --> 00:03:05.220
right.

67
00:03:05.220 --> 00:03:07.930
However, in JavaScript that's not allowed.

68
00:03:07.930 --> 00:03:09.210
And so in JavaScript

69
00:03:09.210 --> 00:03:12.110
all these property names that have two words

70
00:03:12.110 --> 00:03:13.880
like background color

71
00:03:13.880 --> 00:03:16.620
will simply adopt the Camel case notation

72
00:03:16.620 --> 00:03:18.537
that I already explained you before,

73
00:03:18.537 --> 00:03:20.840
and that we've been using all the time.

74
00:03:20.840 --> 00:03:22.770
So instead of background Dash color

75
00:03:22.770 --> 00:03:24.930
it's going to be background

76
00:03:24.930 --> 00:03:26.340
uppercase C

77
00:03:26.340 --> 00:03:28.380
for color like this.

78
00:03:28.380 --> 00:03:31.530
And the same rule applies to all the other property names

79
00:03:31.530 --> 00:03:33.440
that have multiple words.

80
00:03:33.440 --> 00:03:35.770
So Style Dot background color,

81
00:03:35.770 --> 00:03:37.890
and now we set it to something.

82
00:03:37.890 --> 00:03:39.890
And let's get the actual color

83
00:03:39.890 --> 00:03:41.380
from or

84
00:03:41.380 --> 00:03:42.393
CSS.

85
00:03:43.900 --> 00:03:46.340
So you see that background color,

86
00:03:46.340 --> 00:03:48.920
here is the one that we're trying to define.

87
00:03:48.920 --> 00:03:52.480
And we will specify it to this color value.

88
00:03:52.480 --> 00:03:57.430
So this is a standard RBG value in hexadecimal.

89
00:03:57.430 --> 00:04:02.430
And so we set it equal to 10, we must write a string,

90
00:04:02.520 --> 00:04:05.320
and then the value we want to set it to.

91
00:04:05.320 --> 00:04:08.940
So just like before, to set anything on the DOM,

92
00:04:08.940 --> 00:04:11.280
we simply use the Equal sign.

93
00:04:11.280 --> 00:04:13.270
So we have all of this.

94
00:04:13.270 --> 00:04:16.830
So the background color property on the Style property,

95
00:04:16.830 --> 00:04:19.800
and we want to set it to this value,

96
00:04:19.800 --> 00:04:23.030
and so we set it equal to the value.

97
00:04:23.030 --> 00:04:23.950
Okay,

98
00:04:23.950 --> 00:04:25.410
so that's one part.

99
00:04:25.410 --> 00:04:28.480
And now let's also increase the width

100
00:04:28.480 --> 00:04:30.470
of this number here.

101
00:04:30.470 --> 00:04:31.400
Okay,

102
00:04:31.400 --> 00:04:35.070
that's important because I want to show you something there.

103
00:04:35.070 --> 00:04:37.483
So Document Dot querySelector.

104
00:04:39.320 --> 00:04:42.703
And that is the element with the class of number.

105
00:04:44.890 --> 00:04:45.840
And again,

106
00:04:45.840 --> 00:04:47.480
we want to change the Style.

107
00:04:47.480 --> 00:04:49.440
So Dot Style,

108
00:04:49.440 --> 00:04:50.273
Dot

109
00:04:50.273 --> 00:04:51.106
width,

110
00:04:51.960 --> 00:04:55.090
and then again we need to specify a string.

111
00:04:55.090 --> 00:04:57.680
So whenever we are manipulating a Style,

112
00:04:57.680 --> 00:05:00.670
we always need to specify a string .

113
00:05:00.670 --> 00:05:03.980
We cannot just write like a number like 30,

114
00:05:03.980 --> 00:05:05.460
it has to be a string.

115
00:05:05.460 --> 00:05:07.920
In India, we need a unit.

116
00:05:07.920 --> 00:05:12.920
And now I already closed the file so let's open it up again.

117
00:05:12.950 --> 00:05:15.450
And the number that I'm looking for

118
00:05:15.450 --> 00:05:17.310
currently has a width

119
00:05:17.310 --> 00:05:18.143
of 15

120
00:05:18.143 --> 00:05:19.430
REM.

121
00:05:19.430 --> 00:05:22.143
And now I want to double it. So 30 REM,

122
00:05:23.510 --> 00:05:24.850
so

123
00:05:24.850 --> 00:05:25.830
30.

124
00:05:25.830 --> 00:05:27.050
REM,

125
00:05:27.050 --> 00:05:30.270
and again it needs to be inside of a string.

126
00:05:30.270 --> 00:05:32.500
I cannot just write 30 REM,

127
00:05:32.500 --> 00:05:34.840
or 30. So just a number,

128
00:05:34.840 --> 00:05:36.110
that would not work,

129
00:05:36.110 --> 00:05:38.060
we have to specify a string,

130
00:05:38.060 --> 00:05:41.310
which in this case contains the number

131
00:05:41.310 --> 00:05:42.143
plus

132
00:05:42.143 --> 00:05:43.550
the unit.

133
00:05:43.550 --> 00:05:47.120
So the same would be for percentages or pixels,

134
00:05:47.120 --> 00:05:50.400
or whatever unit we used in CSS.

135
00:05:50.400 --> 00:05:52.280
Okay, give it a safe now.

136
00:05:52.280 --> 00:05:55.930
And now let's actually try the correct number right away.

137
00:05:55.930 --> 00:05:57.550
So 12.

138
00:05:57.550 --> 00:05:58.383
And

139
00:05:58.383 --> 00:05:59.216
yes,

140
00:05:59.216 --> 00:06:00.330
it worked.

141
00:06:00.330 --> 00:06:03.030
Let's actually get rid of the console here,

142
00:06:03.030 --> 00:06:05.120
then the page looks a bit nicer.

143
00:06:05.120 --> 00:06:06.570
And we can also by the way

144
00:06:06.570 --> 00:06:08.900
get rid of the terminal here

145
00:06:08.900 --> 00:06:10.700
in VS code

146
00:06:10.700 --> 00:06:13.570
because even if we close this panel here,

147
00:06:13.570 --> 00:06:15.920
this process will still keep running,

148
00:06:15.920 --> 00:06:18.480
the only way we stop this process from running

149
00:06:18.480 --> 00:06:21.550
is by hitting here this trash can,

150
00:06:21.550 --> 00:06:26.020
which will kill the terminal or by hitting Ctrl C.

151
00:06:26.020 --> 00:06:29.820
So let's close it because this takes up too much space.

152
00:06:29.820 --> 00:06:33.040
But now Yeah, so this worked just fine.

153
00:06:33.040 --> 00:06:37.070
Now these Styles are actually set as Inline Styles.

154
00:06:37.070 --> 00:06:38.830
So of course, we are not changing

155
00:06:38.830 --> 00:06:41.780
the CSS file or anything like that.

156
00:06:41.780 --> 00:06:43.750
And let me just show that to you.

157
00:06:43.750 --> 00:06:47.503
So actually, I will need back the Dev tools here.

158
00:06:48.620 --> 00:06:51.653
Make it a bit larger now just to show it to you.

159
00:06:52.610 --> 00:06:53.520
And

160
00:06:55.580 --> 00:06:57.880
so Indeed, it is an Inline Style.

161
00:06:57.880 --> 00:07:00.760
So a Style that is applied directly in

162
00:07:00.760 --> 00:07:03.570
the HTML using the Style attribute.

163
00:07:03.570 --> 00:07:06.770
And the same is going to be true for the body.

164
00:07:06.770 --> 00:07:07.980
Exactly.

165
00:07:07.980 --> 00:07:10.783
So we see here, this is the background color

166
00:07:10.783 --> 00:07:12.293
that we just applied.

167
00:07:13.540 --> 00:07:14.373
Alright.

168
00:07:17.170 --> 00:07:19.520
So of course not changing the CSS file

169
00:07:19.520 --> 00:07:21.540
or anything like that.

170
00:07:21.540 --> 00:07:22.610
Okay.

171
00:07:22.610 --> 00:07:23.800
And that's it actually,

172
00:07:23.800 --> 00:07:27.280
that's really the fundamentals of manipulating Styles

173
00:07:27.280 --> 00:07:28.710
in CSS

174
00:07:28.710 --> 00:07:30.380
The most important thing to remember

175
00:07:30.380 --> 00:07:33.170
is to use the Style property.

176
00:07:33.170 --> 00:07:36.810
And then on there is where we specify the CSS property.

177
00:07:36.810 --> 00:07:39.160
And we need to specify that property

178
00:07:39.160 --> 00:07:43.150
in the Camel case notation in case there is two words

179
00:07:43.150 --> 00:07:45.573
and then the value always needs to be a string.

180
00:07:46.510 --> 00:07:49.760
So that's all you need to know in order to change Styles

181
00:07:49.760 --> 00:07:51.710
like we just did here.

182
00:07:51.710 --> 00:07:52.700
Awesome.

183
00:07:52.700 --> 00:07:55.930
We're doing great progress in this project.

184
00:07:55.930 --> 00:07:58.430
And I hope that you're enjoying it so far.

185
00:07:58.430 --> 00:08:00.600
And that you find it a lot of fun

186
00:08:00.600 --> 00:08:04.760
to be able to manipulate a webpage like this.

187
00:08:04.760 --> 00:08:06.430
Anyway, in the next video,

188
00:08:06.430 --> 00:08:10.760
we will implement this reset button here basically

189
00:08:10.760 --> 00:08:13.210
where we can play the game again.

190
00:08:13.210 --> 00:08:15.303
And so I hope to see you there soon.