Original subtitles

1 1

So the DOM actually also includes CSS Styles. 2

2

And so with DOM manipulation, we can also change Styles. 3

3

So let's try that out now. 4

4

And what I want to do here is to change the background 5

5

of this entire page here to a green color. 6

6

Whenever the player guesses the right number, 7

7

so when the player wins the game. 8

8

And we will also make this number here, wider then. 9

9

So let me just demonstrate that here. 10

10

So let's quickly win this game here. 11

11

Seventeen. 12

12

And so you see, 13

13

we want this green background, 14

14

and also this number here being wider. 15

15

And for that, of course, we need to manipulate the Styles 16

16

of this page. 17

17

So the CSS. 18

18

Okay, so that should happen here in this scenario, 19

19

where the player wins the game. 20

20

So where the guess is equal to the secret number 21

21

and actually, let's add some comments here 22

22

to make this code a little bit easier to understand. 23

23

So this one, 24

24

when 25

25

player wins, 26

26

this first one is 27

27

when there is no 28

28

input. 29

29

This is when 30

30

guess is 31

31

too high. 32

32

And this one here, 33

33

this one guess is too 34

34

low. 35

35

So this now at least looks a little bit nicer. 36

36

But anyway, let's now learn how to manipulate CSS Styles. 37

37

So we want to manipulate the Style of this whole page. 38

38

And so what we need to do 39

39

is to select the whole body of this page first. 40

40

Okay, so the body is basically this entire visible part 41

41

of the website. 42

42

So it's basically this whole element. 43

43

Alright. 44

44

So as always, we need to start by selecting the element 45

45

that we want to manipulate. 46

46

So 47

47

Document Dot querySelector, 48

48

and then the selector. 49

49

And now it's just the body element so there's no Dot 50

50

because that's for classes. 51

51

It's just really the element name. 52

52

And since there's only one body, 53

53

it's going to work just fine. 54

54

So here, we select the body. 55

55

And now we want to change the CSS Style. 56

56

So here, we need to write Style. 57

57

So we access basically, 58

58

the Style property of this element and then 59

59

another Dot 60

60

and then the name of the property that we want to change. 61

61

And in this case, it is the background color. 62

62

So background 63

63

and in CSS, we write the background color like this 64

64

background Dash 65

65

color, 66

66

right. 67

67

However, in JavaScript that's not allowed. 68

68

And so in JavaScript 69

69

all these property names that have two words 70

70

like background color 71

71

will simply adopt the Camel case notation 72

72

that I already explained you before, 73

73

and that we've been using all the time. 74

74

So instead of background Dash color 75

75

it's going to be background 76

76

uppercase C 77

77

for color like this. 78

78

And the same rule applies to all the other property names 79

79

that have multiple words. 80

80

So Style Dot background color, 81

81

and now we set it to something. 82

82

And let's get the actual color 83

83

from or 84

84

CSS. 85

85

So you see that background color, 86

86

here is the one that we're trying to define. 87

87

And we will specify it to this color value. 88

88

So this is a standard RBG value in hexadecimal. 89

89

And so we set it equal to 10, we must write a string, 90

90

and then the value we want to set it to. 91

91

So just like before, to set anything on the DOM, 92

92

we simply use the Equal sign. 93

93

So we have all of this. 94

94

So the background color property on the Style property, 95

95

and we want to set it to this value, 96

96

and so we set it equal to the value. 97

97

Okay, 98

98

so that's one part. 99

99

And now let's also increase the width 100

100

of this number here. 101

101

Okay, 102

102

that's important because I want to show you something there. 103

103

So Document Dot querySelector. 104

104

And that is the element with the class of number. 105

105

And again, 106

106

we want to change the Style. 107

107

So Dot Style, 108

108

Dot 109

109

width, 110

110

and then again we need to specify a string. 111

111

So whenever we are manipulating a Style, 112

112

we always need to specify a string . 113

113

We cannot just write like a number like 30, 114

114

it has to be a string. 115

115

In India, we need a unit. 116

116

And now I already closed the file so let's open it up again. 117

117

And the number that I'm looking for 118

118

currently has a width 119

119

of 15 120

120

REM. 121

121

And now I want to double it. So 30 REM, 122

122

so 123

123

30. 124

124

REM, 125

125

and again it needs to be inside of a string. 126

126

I cannot just write 30 REM, 127

127

or 30. So just a number, 128

128

that would not work, 129

129

we have to specify a string, 130

130

which in this case contains the number 131

131

plus 132

132

the unit. 133

133

So the same would be for percentages or pixels, 134

134

or whatever unit we used in CSS. 135

135

Okay, give it a safe now. 136

136

And now let's actually try the correct number right away. 137

137

So 12. 138

138

And 139

139

yes, 140

140

it worked. 141

141

Let's actually get rid of the console here, 142

142

then the page looks a bit nicer. 143

143

And we can also by the way 144

144

get rid of the terminal here 145

145

in VS code 146

146

because even if we close this panel here, 147

147

this process will still keep running, 148

148

the only way we stop this process from running 149

149

is by hitting here this trash can, 150

150

which will kill the terminal or by hitting Ctrl C. 151

151

So let's close it because this takes up too much space. 152

152

But now Yeah, so this worked just fine. 153

153

Now these Styles are actually set as Inline Styles. 154

154

So of course, we are not changing 155

155

the CSS file or anything like that. 156

156

And let me just show that to you. 157

157

So actually, I will need back the Dev tools here. 158

158

Make it a bit larger now just to show it to you. 159

159

And 160

160

so Indeed, it is an Inline Style. 161

161

So a Style that is applied directly in 162

162

the HTML using the Style attribute. 163

163

And the same is going to be true for the body. 164

164

Exactly. 165

165

So we see here, this is the background color 166

166

that we just applied. 167

167

Alright. 168

168

So of course not changing the CSS file 169

169

or anything like that. 170

170

Okay. 171

171

And that's it actually, 172

172

that's really the fundamentals of manipulating Styles 173

173

in CSS 174

174

The most important thing to remember 175

175

is to use the Style property. 176

176

And then on there is where we specify the CSS property. 177

177

And we need to specify that property 178

178

in the Camel case notation in case there is two words 179

179

and then the value always needs to be a string. 180

180

So that's all you need to know in order to change Styles 181

181

like we just did here. 182

182

Awesome. 183

183

We're doing great progress in this project. 184

184

And I hope that you're enjoying it so far. 185

185

And that you find it a lot of fun 186

186

to be able to manipulate a webpage like this. 187

187

Anyway, in the next video, 188

188

we will implement this reset button here basically 189

189

where we can play the game again. 190

190

And so I hope to see you there soon.