Original subtitles

1 1

Welcome to the first of three wonderful projects 2

2

that we're gonna build in this section. 3

3

And let's get started right away. 4

4

And here I have a working demo 5

5

of the project that we're gonna build 6

6

over the next couple of videos. 7

7

And this project is called Guess My Number! 8

8

And I went with this kind of retro design 9

9

like inspired by the old 80s game. 10

10

Just to make it a bit more fun. 11

11

So as the name says, 12

12

the goal of this project 13

13

is to simply guess a secret number 14

14

which is between one and 20. 15

15

So here in this input we can type a number. 16

16

Let's say 10, then we click Check! 17

17

And then here on the right side we get a message. 18

18

In this case it says, 19

19

that our guess was Too Low! 20

20

Also we can see that we started with a Score of 20 21

21

and now after one failed guess it decreased to 19. 22

22

So basically after each guess that we fail, 23

23

the score decreases by one. 24

24

So let's try another one. 25

25

It's still Too Low! and our Score decreased again. 26

26

Let's try 18. 27

27

And now it's too high. 28

28

So we get this different message. 29

29

And now it's correct. 30

30

So you see that we get this Correct number! message. 31

31

The screen turns green 32

32

and also we now have the Highscore here of 17. 33

33

So a Highscore is another feature 34

34

of this small application. 35

35

Then if you want to play again, 36

36

we can simply click the Again! button 37

37

and it all resets everything except for the Highscore. 38

38

So the Highscore is kept 39

39

and so if I'm quicker in this round, 40

40

my Highscore will then become better. 41

41

Let's start again at 10. 42

42

So maybe I can do it faster. 43

43

Well, I think I cannot. 44

44

It's Too high! 45

45

And so my Highscore stays the same 46

46

as it was before. 47

47

Okay. 48

48

So with this I think you understood 49

49

how this project works. 50

50

So let's actually get to work. 51

51

And as always grab your starter files 52

52

from the GitHub repository. 53

53

I already have mine here. 54

54

And then let's open up this folder. 55

55

So that's this one. 56

56

And let's start by taking a look 57

57

at the files that we have here. 58

58

First up, we have the Prettier configuration. 59

59

So exactly the one that we used 60

60

in the Editor setup section. 61

61

And from now on we will always use this configuration 62

62

in every single project. 63

63

Then we have an empty Script. 64

64

We have the CSS Style, 65

65

which you can take a look at 66

66

if you're interested at the same for the HTML. 67

67

Now the HTML will actually be important, 68

68

because that's where we will find the class names 69

69

of all of these Elements 70

70

that we gonna have to select 71

71

to make this project work. 72

72

But more about that later. 73

73

And... 74

74

Yeah. 75

75

Let's close up this sidebar 76

76

and focus on those gripped here. 77

77

So as you just saw, 78

78

all of this interface here basically 79

79

is implemented in HTML. 80

80

So again, that is this document. 81

81

Okay. 82

82

And this whole HTML document 83

83

is made up of smaller HTML Elements. 84

84

For example, 85

85

this message that we see here is in our HTML, 86

86

this paragraph here with the message class. 87

87

And so now in JavaScript, 88

88

we can actually select this Element 89

89

based on this class. 90

90

So a little bit like we can select Elements in CSS. 91

91

We can do the same in JavaScript. 92

92

And if you're not at all familiar with HTML and CSS, 93

93

then please watch the HTML and CSS crash course, 94

94

that is in the previous section. 95

95

Anyway, before we learn what the DOM 96

96

and DOM Manipulation actually are, 97

97

let's quickly learn an easy way 98

98

of selecting an Element like this in JavaScript. 99

99

And this is how it works. 100

100

We write document.querySelector 101

101

So this querySelector is basically 102

102

a method that's available on the document object. 103

103

And more about that later. 104

104

Now into this method, 105

105

we need to pass in a Selector. 106

106

And again, this Selector 107

107

is exactly the same Selector 108

108

that we would use in CSS. 109

109

So we pass in the string 110

110

and we want to select the Element 111

111

with the class name of message. 112

112

And so we need to write a . 113

113

and then message 114

114

Again, this is exactly how we would select 115

115

the same Element using CSS. 116

116

Right? 117

117

Now if it was an ID instead of a class, 118

118

we would use the # 119

119

Right? 120

120

But in this case, it is really a class. 121

121

And so let's use the . 122

122

And now we can quickly take a look 123

123

at the result of this selection here, 124

124

using the Console. 125

125

And remember that we set up the cl snippet 126

126

in the Editor setup section. 127

127

So I just write cl 128

128

and then I get console.log automatically here. 129

129

Now in case you skipped that section, 130

130

you can always go back and see how I did that 131

131

or you can just write console.log manually. 132

132

So I give it a Save. 133

133

And now I do another thing 134

134

that we learned in the Editor setup section, 135

135

which is to open up this project 136

136

using the live-server. 137

137

Right? 138

138

So let's open up the Terminal here 139

139

by clicking New Terminal. 140

140

Okay. 141

141

Let's clear it using Command + K. 142

142

And again, we learned how to do all of these 143

143

in the Editor setup section. 144

144

So if you skipped that, 145

145

then please go back and watch that one first. 146

146

Anyway we see that we're already in the folder. 147

147

So Guess-My-Number that's exactly the folder. 148

148

And now all we need to do is to type live-server 149

149

hit Enter and then it will open up 150

150

a New Tab in our browser. 151

151

So this is the demo here 152

152

that I'm gonna keep on the right side. 153

153

And then here on the left side, 154

154

is the actual project that we are building. 155

155

Of course nothing works yet, 156

156

but let's just open up the Console. 157

157

So Inspect Console. 158

158

Give it some more space. 159

159

And so indeed we actually already have 160

160

the p Element here selected. 161

161

So that's what we did here. 162

162

So document.querySelector('.message') 163

163

And so in the Console, 164

164

we then get basically this entire Element. 165

165

And as we hover over it, 166

166

it actually even gets selected here on the page. 167

167

Great. 168

168

So this is the first, 169

169

basically DOM manipulation that you did. 170

170

Great job. 171

171

Now this Element here itself 172

172

is not really that useful. 173

173

So instead let's actually get this text. 174

174

So this Start guessing here. 175

175

And we can do that. 176

176

Simple enough. 177

177

All we have to do is another . 178

178

and then textContent 179

179

So, this part here first select the Element. 180

180

And so the result of this querySelector method 181

181

is gonna be an Element. 182

182

And then on that Element, 183

183

we can read the textContent property. 184

184

And so that's why we use another . here 185

185

and remember when we have multiple . operators, 186

186

they are executed from left to right. 187

187

And so first, this operation here is done. 188

188

Then these selected here 189

189

basically will get replaced with the Element itself. 190

190

And then on that Element, 191

191

we can read the textContent property using another . 192

192

So let's give it a Save. 193

193

This will then reload automatically. 194

194

And yes, now we get Start guessing... 195

195

Which is really just a textContent of this Element. 196

196

Great. 197

197

So now we kind of know 198

198

how to establish this connection 199

199

between our code and the user interface. 200

200

So in other words, the HTML document 201

201

that's being displayed in the browser. 202

202

So this was a quick introduction to the DOM 203

203

and how to select an Element. 204

204

But what is the DOM actually? 205

205

And what is DOM Manipulation? 206

206

Which is the big topic of this section. 207

207

Well, let's find out in the next video.