Original subtitles

1 1

I promise that we're gonna start working 2

2

on the project really soon, 3

3

but for now we need another reference lecture. 4

4

So here, we're gonna learn about styles, 5

5

and attributes, and classes, 6

6

and you will be able to keep all 7

7

of the relevant tools here in one simple lecture 8

8

so that you can reference all of them in the future. 9

9

And some of these tools we will use later in the project, 10

10

but it's impossible to create examples 11

11

for all the functions and methods 12

12

that I'm gonna show you now, 13

13

but they are still important, so let's go. 14

14

And let's actually keep working 15

15

on our cookies message banner here, okay. 16

16

So we're gonna start by talking about styles 17

17

and we already said CSS styles before, 18

18

but there are still some more things to learn. 19

19

But first let's go back to the basics, 20

20

so to set a style on an element 21

21

we get the element.style and then dot the property name 22

22

and remember this we'll have to use the camelCase version, 23

23

so backgroundColor, and then a string with the value. 24

24

So here the color that I want is this one 25

25

so it's just kind of dark blue. 26

26

So indeed now the style nicely got applied 27

27

to our element. 28

28

And again, we didn't have to select it manually first 29

29

because we already had it stored here 30

30

in this message variable, which is this element 31

31

that we created manually. 32

32

We can also set the width, dot width, 33

33

and remember that we have to write the CSS value exactly 34

34

as we would do in CSS, 35

35

and so we always have to include the unit. 36

36

So in this case, I'm gonna set it to 37

37

a larger percentage so that it occupies this wide gap here, 38

38

and so now it got a little bit wider, okay. 39

39

And remember that these styles are actually set 40

40

as inline styles, so styles set directly here in the DOM. 41

41

So, here in the style attribute of this element, 42

42

we now have the background color and the width, okay, 43

43

and so these again are called inline styles. 44

44

Now you might think that we are able 45

45

to also read styles using this, so using the style property, 46

46

but let's see what's gonna happen, 47

47

so message.style, and let's say we want to get the height, 48

48

so let's see what we get and we get, 49

49

well basically nothing, 50

50

and that's because using the style property 51

51

like this here only works for inline styles 52

52

that we set ourselves also using this style property. 53

53

So it's gonna work for example, for the background color, 54

54

so let's copy this one and now here we actually get 55

55

the background color and again, 56

56

because it is an inline style, 57

57

so a style that we set manually ourselves, 58

58

but we cannot get a style that is hidden inside of a class 59

59

or maybe that doesn't even exist. 60

60

So for example here, now let's say we wanted 61

61

to get the color, 62

62

so the color is defined in the style sheet, 63

63

but if we try to log it here, then it's nowhere to be found. 64

64

Now we can still get the styles if we really want to, 65

65

all we need to do is to use the getComputedStyle function, 66

66

so that sounds a bit weird, and this is how it works, 67

67

so getComputedStyle and VS Code, 68

68

already suggested here to me, 69

69

and so here we need to passen the element. 70

70

So that's message, and now you see, 71

71

we get this huge object here and so this contains, 72

72

all of the properties with all of the values, 73

73

so this is huge and so in practice, 74

74

what we then do is to simply take a certain property 75

75

like color from there, 76

76

and so you'll see this here is the color, 77

77

or let's say we wanted the height 78

78

and so this is the computed styles, so you see computed, 79

79

which means that it's the real style 80

80

as it appears here on the page. 81

81

And even if we do not declare it in our CSS, 82

82

so for example, the height, we didn't define ourselves, 83

83

but the browser of course needed to calculate the height 84

84

to display it and so we can then get access to that value, 85

85

and so you see it's this amount of pixels. 86

86

So let's now say we wanted to increase the height 87

87

of this message banner here by 40 pixels, 88

88

so we could get this height 89

89

and then simply add 40 to that. 90

90

So let's create a variable called height, 91

91

or actually let's do it directly, 92

92

let's say message.style.height 93

93

should be equal to getComputerStyle.height 94

94

plus 40, and then don't forget the unit, so 40 pixels, 95

95

but now we're gonna run into a problem 96

96

because as you see this value here itself comes in pixels, 97

97

so this here is a string, okay, 98

98

well actually all of this here, 99

99

which is the same as we had before up here, 100

100

so the result of this is a string. 101

101

So here we're trying to add a number to a string, 102

102

which of course is not gonna work 103

103

because, well, it has this pixel here. 104

104

So let me show you that nothing here happened, 105

105

but remember that we already learned 106

106

about a nice function which can essentially take 107

107

the number out of this string, 108

108

so basically parse the number from here. 109

109

And that is remember Number.parseInt or parseFloat, 110

110

in this case it's a floating point number, 111

111

so let's use parseFloat here actually, of this value, 112

112

and then we need to specify also the number 10 113

113

in this function, remember, and so now 114

114

it actually works all right, so beautiful, 115

115

it took that number here and only this number part 116

116

without the pixels, edit 40 and 10, edit the pixel there, 117

117

so that's a bit too much, 118

118

so let's leave it like this, okay, beautiful, 119

119

so this getComputedStyle can become an really handy. 120

120

But now finally, let's also work with CSS custom properties, 121

121

which we usually just call CSS variables, 122

122

so what I mean here is these variables 123

123

that we have here, so all of these, 124

124

they are called custom properties, but again, 125

125

they are more like variables. 126

126

And the idea of CSS variables 127

127

is of course very similar to the idea 128

128

of variables in JavaScript, 129

129

so this way we can change the value 130

130

in many places all over our CSS files 131

131

by simply changing the value here. 132

132

Now, if we can change the value here, so here in our CSS, 133

133

then we can also change it right from JavaScript, 134

134

so let's go back here or actually let's first see 135

135

where these properties are defined, 136

136

so they're defined in the document root 137

137

and so in JavaScript that is equivalent to the document, 138

138

so basically the document element. 139

139

So document.documentElement, 140

140

as we learned in the last video, 141

141

so that is the route that we just saw in CSS 142

142

and now again style, but now we can do, setProperty, okay, 143

143

and then the name of our custom property, 144

144

so let's say we want to change our primary color, 145

145

so color-primary and then the value 146

146

that we want to set it to, let's say orangered, 147

147

but of course any color value would work here. 148

148

And so you see that everywhere in our style 149

149

where we used this color, 150

150

which has is a nice green color, now turned orange, 151

151

so here, here, and really all over the place, all right. 152

152

So with this we can easily change the style 153

153

of our page, simply by setting one property. 154

154

So with custom properties, we cannot do it, 155

155

like this here, but instead we need to use setProperty 156

156

and then we pass in the name of the property and the value. 157

157

And by the way, we can do the same for all properties, 158

158

so we could also use setProperty to set the color, 159

159

or the background color, or the width, 160

160

or really whatever we want, okay, 161

161

but usually it's just easier to simply do it like this, 162

162

and that's why I always do that. 163

163

So that's it for styles, 164

164

let's talk a little bit about attributes now. 165

165

All right, so in HTML just to remember, 166

166

all of these are attributes, so this source, alt, 167

167

even the class, and the ID are simply attributes 168

168

of this element and so in JavaScript we can 169

169

of course access and change these different attributes. 170

170

So let's actually select that logo that I just showed you, 171

171

and the class of that is nav__logo, 172

172

so that's two underscores, 173

173

and so now we can access some of these, 174

174

let's say default properties, 175

175

so like the alt or the source attribute. 176

176

So you see here we get the alternative text, 177

177

which is this alt and then also this source, 178

178

now this looks a bit different 179

179

than the one we have here, 180

180

but more about that in a second, all right. 181

181

So this works because on images they are supposed 182

182

to have the alt, and the source attributes on them 183

183

and so if we specify them in HTML, 184

184

then JavaScript will automatically create these properties 185

185

on the object, but if we add some other property 186

186

that is not a standard then JavaScript, 187

187

will not automatically create a property on the object. 188

188

So let's add for example, 189

189

designer and set it to Jonas, okay, 190

190

and so if we now tried to read, logo.designer, 191

191

that's not going to work, so you see it's undefined 192

192

and again, that is because this is not a standard property 193

193

that is expected to be on images. 194

194

Just another one that works here and that's a bit different 195

195

than you might expect is className, 196

196

so the className of this element is just this class. 197

197

And so you might think that it should be just class, 198

198

but for historical reasons, 199

199

it has to be className like this, okay, 200

200

so this is a non-standard and that's why it doesn't work. 201

201

At least it doesn't work like this 202

202

but of course there is another way 203

203

of reading this value from the DOM, 204

204

it's just a little bit more difficult, 205

205

but it's not a problem, so we can use getAttribute, 206

206

and then here we can pass in the string, 207

207

designer and that indeed it returns to us Jonas. 208

208

Now just as we can read these values 209

209

for these attributes, we can also set them, 210

210

for example, we can say logo dot the alt text 211

211

should be Beautiful minimalist logo. 212

212

And so now let's check that out, 213

213

and so indeed well, that's actually the hero, (chuckles) 214

214

so all I want is this, so yeah, 215

215

it says Beautiful minimalist logo now, alright. 216

216

Oh, and by the way, there's also the opposite 217

217

of getAttribute, which is setAttribute, 218

218

so we can also say for example, 219

219

company and then set it to Bankist, 220

220

and so again, if we check it out now, 221

221

then there should be 222

222

this new attribute created, right here. 223

223

Now remember that I told you that the URL here, 224

224

so basically, actually the source is different 225

225

than what we have in the HTML, 226

226

so this URL here of this image 227

227

is basically the absolute URL, 228

228

while what I have here, so this one here, 229

229

is just a relative URL, so relative to the folder 230

230

in which the index.HTML file is located, 231

231

so that's completely different 232

232

and if we want to get just literally this URL 233

233

that we have here, then we also have 234

234

to use getAttribute, okay. 235

235

So getAttribute and then SRC, 236

236

let me actually put these together 237

237

so we can see the difference, 238

238

and of course, I need to lock this to the console as well, 239

239

and so here you see the absolute version 240

240

and then here the relative. 241

241

So sometimes we really need the relative one 242

242

and then make sure you use this one, so getAttribute, 243

243

so sometimes that's very important to keep in mind 244

244

and so that's why I showed it to you here. 245

245

And the same is actually true 246

246

for the href attribute on links, 247

247

so where is the link, 248

248

I think down here I've a Twitter link, 249

249

so yeah, that's this one, so let's get this class here. 250

250

So very quickly just to show you, because on links, 251

251

this is also sometimes very important, querySelector, 252

252

so just so you can see what I mean here, 253

253

so link.href and link.getAttribute 254

254

and then href again, 255

255

well in this case they're probably the same anyway, yeah, 256

256

because both of them were already absolute anyway, 257

257

so in this case, that is not a big deal. 258

258

But for example, in one of these links here 259

259

in the top, there it might be relevant, okay. 260

260

So let's actually try that, so let's use this one, 261

261

so the button showModal, so the nav-link button, 262

262

which here you'll see is simply this hash, 263

263

so let's put that here, oh, we're missing the dot 264

264

and now indeed you see that the href property 265

265

is the absolute URL once again, 266

266

while you're using getAttribute simply returns 267

267

the URL as I wrote it in the HTML. 268

268

Finally, there is also a special type of attributes 269

269

and that's data attributes. 270

270

So data, and data attributes 271

271

are a special kind of attributes 272

272

that start with the words data. 273

273

So let's add one here to our image here, 274

274

and let's say, so data-version-number equals 3.0, 275

275

so again, it has to start with data, all right, 276

276

and then dash, and then whatever we want. 277

277

And what's special about this 278

278

is that now this attribute is at logo.dataset 279

279

and then dot versionNumber, and here that's dataset, 280

280

don't know where that came from. 281

281

And so here we use camelCase 282

282

while here we have the dash. 283

283

So just like property names, 284

284

we need to transform this here into camelCase, 285

285

so that's important to keep in mind. 286

286

So for these special attributes, 287

287

they are always stored in the dataset object 288

288

and indeed then down here we have that 3.0 289

289

so we use actually data attributes quite a lot 290

290

when we work with the UI and especially 291

291

when we need to store data in user interface, 292

292

so basically in the HTML code, 293

293

and we will see how useful that can be 294

294

throughout the rest of this project 295

295

and of the course. 296

296

Finally to finish this here, just to make it complete, 297

297

let's talk about classes and even though at this point, 298

298

we actually already know, 299

299

all there is to know about classes. 300

300

So you know that there is logo.classlist.add, 301

301

and I will not do anything here, 302

302

so there is add, remove, there is toggle, 303

303

and there is contains, 304

304

so these are the four that you really need to know. 305

305

And here apparently we need to pass in something 306

306

maybe the empty string works, but I'm not sure, 307

307

well, apparently it doesn't, 308

308

let's just write some name here, just c for class, 309

309

okay, and keep in mind that you can also add 310

310

multiple classes by passing in multiple values. 311

311

And of course here I'm just writing, 312

312

completely fake class names just to make a point, okay. 313

313

Now, just as we could read the class name here, 314

314

using the class name property, 315

315

we could also use that to set a class, 316

316

so we could do logo.className and I had said that, 317

317

well let's say to Jonas. 318

318

However, don't use this, don't use, 319

319

because this will override all the existing classes 320

320

and also it allows us to only put one class 321

321

on any element, all right, so again, only one class 322

322

and it will override whatever is already there, 323

323

while these four methods here make it really nice 324

324

to work with the classes by simply allowing us 325

325

to add and remove classes based on their names, 326

326

without interfering with the classes 327

327

that are already there. 328

328

Just keep in mind that this one here 329

329

is really called contains and not includes 330

330

like it is called in a race. 331

331

So I hope that this serves as a nice reference 332

332

for all these different ways of working with classes, 333

333

attributes, and styles in JavaScript. 334

334

But now in the next lecture, 335

335

let's finally start to work on our project here.