Original subtitles

1 1

Welcome back. 2

2

Let's now start working on project 3

3

number two of this section. 4

4

And in this small project, 5

5

we're gonna build our first UI component. 6

6

And that is this modal window 7

7

that we can see here, 8

8

by opening, or by clicking actually, 9

9

on one of these buttons. 10

10

So I'm sure you've seen this kind 11

11

of component all over the place when visiting webpages. 12

12

And so it's simply this window here, basically, 13

13

and this overlay, which gets overlaid 14

14

over the rest of the page, right. 15

15

So no matter which of these three buttons we click, 16

16

it will always open this modal window. 17

17

And to close this window, as you already saw, 18

18

we can either click this button here, 19

19

or we can click outside of the window. 20

20

So basically, on this overlay, 21

21

and again, I'm sure that you have seen this functionality 22

22

when visiting other webpages. 23

23

So that worked as well. 24

24

And finally, we can also close this window 25

25

by hitting the Esc key on our keyboard, like this. 26

26

Now okay and this is actually very simple 27

27

and very easy to build, 28

28

probably way easier than it looks like. 29

29

But it will still be very useful 30

30

to learn how to work with classes. 31

31

And that's super important, because manipulating classes 32

32

is actually the main way in which we manipulate webpages. 33

33

Okay, now, here on the left side, I still have to code 34

34

from the previous project open. 35

35

And that's because I wanted to show you 36

36

how to close the live Server. 37

37

So let's go back to the terminal. 38

38

And so as we hit new terminal, 39

39

it actually creates a new terminal. 40

40

So if we want to go to the first one 41

41

that was already running, we need 42

42

to go here to this menu here. 43

43

And then number one, which is this node. 44

44

So to change this, now we hit Ctrl C, 45

45

and that's even control on a Mac. 46

46

So it's not Command C, it is Ctrl C. 47

47

And I guess on Windows, it's gonna be the same. 48

48

But if it's not, you can just click this trash can here. 49

49

And that will also then kill the terminal. 50

50

So as I hit Ctrl, C, the process has finished. 51

51

And so the live Server is no longer running. 52

52

So if I come here, to this URL, 53

53

so this local host URL, 54

54

plus the current port, which is 8080. 55

55

So if I now reload this page, it will be gone. 56

56

So there's no connection possible anymore, 57

57

because I just killed the live Server okay, 58

58

just wanted to let you know about that. 59

59

Okay, anyway, let's now close up this folder here 60

60

and open a new one. 61

61

And, as always, I already have here the starter files 62

62

for this modal project. 63

63

So let's open up a new VS code window. 64

64

And let's open up this one. 65

65

And once again, I have the prettier configuration here. 66

66

And then the index, the JavaScript and the CSS styles. 67

67

Okay, open up script. 68

68

And actually, we can open all of them, 69

69

because we will want to take a look at the three files. 70

70

Okay. And as before, we still are using strict mode. 71

71

And so I already included 72

72

that here at the top of the file. 73

73

Okay, and now let's get to work actually. 74

74

Now this time, we will actually start 75

75

by selecting everything that we're gonna need 76

76

for this project so that's usually 77

77

what we do when we build a project like this. 78

78

So we select the elements that we need, 79

79

and then we store the selections into variables. 80

80

Okay, and then we can use them over and over again. 81

81

So that's way better than selecting the same elements 82

82

over and over again, like we did in the last project. 83

83

Alright, but in our last project, 84

84

I didn't want to overcomplicate stuff 85

85

and do too many things at the same time. 86

86

And so I just selected all the stuff multiple times. 87

87

But again, this time, we will have 88

88

all the necessary selections. 89

89

So all the necessary elements that we're gonna need, 90

90

nicely organized here at the top of the file, 91

91

each in its own variable. 92

92

So let's take a look at the HTML. 93

93

And so here we see the three buttons. 94

94

So that these three buttons, 95

95

and then we actually already have the modal window, 96

96

here in the code. 97

97

So this div element here. 98

98

So it's already in the code it's simply hidden. 99

99

That's why it has this hidden class. 100

100

And now in the CSS, let's come here 101

101

to the bottom of the file. 102

102

And so the hidden class, 103

103

simply set the display to none. 104

104

And so that's why the window is currently hidden. 105

105

All right so again, as I said in the beginning, 106

106

in this project, we will work with Classes. 107

107

And so, this hidden class is the main class 108

108

that we will be concerned with. 109

109

So, anyway, this means that we will not 110

110

basically create the HTML 111

111

for the modal window using JavaScript, 112

112

it is already there, all we will do is to show it 113

113

and to hide it, according 114

114

to the clicks on the buttons. 115

115

So that's the modal. 116

116

And that is the overlay. 117

117

So that's basically this dark part here, 118

118

which hides the background. 119

119

And then here, we have this button 120

120

to close the modal window. 121

121

And so that's all that we need. 122

122

So again, we need to select the modal, 123

123

the overlay, the close modal button, 124

124

and then of course, the show modal buttons. 125

125

Okay, so let's do that 126

126

So const, modal, is document dot query selector. 127

127

And then just like before, we are looking 128

128

for the element with the class of modal. 129

129

Okay so, just like we did in the first project, 130

130

we select an element using the selector, 131

131

but then this time, we actually store the results 132

132

of the selection so the selected element 133

133

in this variable okay. 134

134

So that's the element with the class model. 135

135

Now we want overlay, and then close modal. 136

136

So overlay, and of course, 137

137

we could give these any names 138

138

that we want it. 139

139

But these names make it easy 140

140

to understand what they are. 141

141

So I'm giving them the same names 142

142

as the class names, basically. 143

143

So that's the overlay. 144

144

And now the close modal button. 145

145

Let's call this one actually a button. 146

146

So btn, which stands for button, 147

147

and then close modal document, dot query selector. 148

148

And then this class is close dash modal. 149

149

Okay and now finally, we also want the show modal buttons. 150

150

Now, there are actually three elements with this class name. 151

151

So let me show you what happens 152

152

when we simply select in the same way 153

153

that we did before. 154

154

So let's say button, or buttons, actually, 155

155

because we want multiple, openmodal, 156

156

and then document dot query selector dot openmodal okay. 157

157

And so what will happens 158

158

when we lock this to the console. 159

159

So buttons, openmodel, that's the one. 160

160

And now to actually see this, we need 161

161

to again, start the live Server. 162

162

So new terminal, clear this console. 163

163

And then all they have to do is 164

164

to type live-Server hit enter. 165

165

And here we go. 166

166

So this is our modal window now. 167

167

And this one, we can now close. 168

168

And actually, it has the exact same URL. 169

169

So it's always this 127 001, which stands 170

170

for localhost at Port 8080. 171

171

So if we reloaded this one, 172

172

it would show us the same thing. 173

173

Okay, so we can just close one of them. 174

174

And so it looks exactly the same as the demo. 175

175

But of course, nothing is gonna happen yet. 176

176

'Cause as you know, we have no event handlers on any 177

177

of these buttons yet. 178

178

But now, I wanted to take a look at the console. 179

179

And Yep, and now 180

180

here we get no for some reason. 181

181

So it means that it could not select anything 182

182

here for this selector. 183

183

And so let's take a look yeah, 184

184

actually it is show modal and not open. 185

185

Okay, so let's fix that. 186

186

So it's not open it is show 187

187

and maybe you have spotted 188

188

that if you took a more careful look 189

189

at the HTML than I did. 190

190

Now Anyway, now we see this button here selected. 191

191

However, as you can see, 192

192

it is only the first one okay. 193

193

And so now we see the limitation 194

194

of or query selector method here 195

195

for the first time, 196

196

so whenever we use query selector 197

197

with a selector, which actually matches multiple elements, 198

198

only the first one will get selected. 199

199

And so here, we need another one. 200

200

But it's pretty similar. 201

201

It's called query selectorAll. 202

202

So that's a pretty obvious name, 203

203

but it's gonna do the job. 204

204

So as I save now, now, you see 205

205

that we get something called a Nodelist here. 206

206

So let me open that. 207

207

And now as I hover, you see 208

208

that these are actually all of our three buttons. 209

209

Okay, so this NodeList here is a little bit like an array. 210

210

It's not exactly like an array. 211

211

But here for now, it works 212

212

as though it was an array. 213

213

Okay, and so now, if we want to do something, 214

214

for example, to all of these buttons, 215

215

then we can simply loop through this NodeList 216

216

and do something with them. 217

217

So let's actually quickly do that. 218

218

So we will now again, use the for loop. 219

219

And now, I hope there is no need 220

220

to explain any more how this one works. 221

221

So I should stay below the length 222

222

of this NodeList, which again, 223

223

for our purposes here works 224

224

just like an array buttons, 225

225

open modal dot length, and then at the end 226

226

of iteration, increase the counter. 227

227

And so in each iteration, 228

228

what we want to do is simply 229

229

to log to the console, the text content 230

230

of each of them all right, 231

231

so what we want to do is buttons, open modal. 232

232

And then we take the current one. 233

233

And so this here is now an element okay, 234

234

it's one of these elements. 235

235

And, well, now it already logged 236

236

because it saved the file. 237

237

But yeah, anyway, each 238

238

of these here is one element. 239

239

And to now on each of them, 240

240

we can simply use the text content property, 241

241

just like we did in the last project all right. 242

242

So let's save it again. 243

243

And indeed, now we get to three text contents 244

244

for all the three buttons. 245

245

And here, you might have noticed 246

246

that I didn't even use the curly braces to define a block. 247

247

And that's because just like an if else statement, 248

248

if there is only one line of code 249

249

that I want to execute, I actually don't have 250

250

to create this block okay, I can 251

251

just write one line after the for loop. 252

252

And then that's the one 253

253

that will be iterated over and over again okay. 254

254

So again, this works just fine. 255

255

And now I have a way of selecting multiple elements 256

256

with the same class and then 257

257

with the for loop, I can do something 258

258

for each of them. 259

259

In this case, all we did was to log their text content 260

260

through console, but in the future, 261

261

we will then be able 262

262

to do real stuff using this technique. 263

263

Okay, and that's it for this video. 264

264

In the next one, we will actually 265

265

already make this model window work. 266

266

So don't wait and let's move on 267

267

to the next video right away.