Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,330 --> 00:00:05,090
Welcome to the first of three wonderful projects
2
2
00:00:05,090 --> 00:00:07,490
that we're gonna build in this section.
3
3
00:00:07,490 --> 00:00:09,853
And let's get started right away.
4
4
00:00:11,770 --> 00:00:13,540
And here I have a working demo
5
5
00:00:13,540 --> 00:00:15,580
of the project that we're gonna build
6
6
00:00:15,580 --> 00:00:17,810
over the next couple of videos.
7
7
00:00:17,810 --> 00:00:20,890
And this project is called Guess My Number!
8
8
00:00:20,890 --> 00:00:24,130
And I went with this kind of retro design
9
9
00:00:24,130 --> 00:00:27,210
like inspired by the old 80s game.
10
10
00:00:27,210 --> 00:00:29,440
Just to make it a bit more fun.
11
11
00:00:29,440 --> 00:00:30,980
So as the name says,
12
12
00:00:30,980 --> 00:00:32,160
the goal of this project
13
13
00:00:32,160 --> 00:00:34,730
is to simply guess a secret number
14
14
00:00:34,730 --> 00:00:37,940
which is between one and 20.
15
15
00:00:37,940 --> 00:00:41,300
So here in this input we can type a number.
16
16
00:00:41,300 --> 00:00:44,370 line:15%
Let's say 10, then we click Check!
17
17
00:00:44,370 --> 00:00:47,350
And then here on the right side we get a message.
18
18
00:00:47,350 --> 00:00:48,800
In this case it says,
19
19
00:00:48,800 --> 00:00:50,720
that our guess was Too Low!
20
20
00:00:50,720 --> 00:00:54,530
Also we can see that we started with a Score of 20
21
21
00:00:54,530 --> 00:00:58,410
and now after one failed guess it decreased to 19.
22
22
00:00:58,410 --> 00:01:00,870
So basically after each guess that we fail,
23
23
00:01:00,870 --> 00:01:03,063
the score decreases by one.
24
24
00:01:04,580 --> 00:01:06,470
So let's try another one.
25
25
00:01:06,470 --> 00:01:10,250
It's still Too Low! and our Score decreased again.
26
26
00:01:10,250 --> 00:01:12,200
Let's try 18.
27
27
00:01:12,200 --> 00:01:13,500
And now it's too high.
28
28
00:01:13,500 --> 00:01:15,150
So we get this different message.
29
29
00:01:16,870 --> 00:01:18,600
And now it's correct.
30
30
00:01:18,600 --> 00:01:21,360
So you see that we get this Correct number! message.
31
31
00:01:21,360 --> 00:01:23,180
The screen turns green
32
32
00:01:23,180 --> 00:01:26,190
and also we now have the Highscore here of 17.
33
33
00:01:26,190 --> 00:01:28,350
So a Highscore is another feature
34
34
00:01:28,350 --> 00:01:30,600
of this small application.
35
35
00:01:30,600 --> 00:01:32,180
Then if you want to play again,
36
36
00:01:32,180 --> 00:01:34,250
we can simply click the Again! button
37
37
00:01:34,250 --> 00:01:37,243
and it all resets everything except for the Highscore.
38
38
00:01:38,080 --> 00:01:39,970
So the Highscore is kept
39
39
00:01:39,970 --> 00:01:42,490
and so if I'm quicker in this round,
40
40
00:01:42,490 --> 00:01:45,400
my Highscore will then become better.
41
41
00:01:45,400 --> 00:01:46,933
Let's start again at 10.
42
42
00:01:49,400 --> 00:01:50,990
So maybe I can do it faster.
43
43
00:01:50,990 --> 00:01:52,293
Well, I think I cannot.
44
44
00:01:53,340 --> 00:01:54,433
It's Too high!
45
45
00:01:59,550 --> 00:02:01,790
And so my Highscore stays the same
46
46
00:02:01,790 --> 00:02:02,893
as it was before.
47
47
00:02:03,890 --> 00:02:04,723
Okay.
48
48
00:02:04,723 --> 00:02:06,810
So with this I think you understood
49
49
00:02:06,810 --> 00:02:08,400
how this project works.
50
50
00:02:08,400 --> 00:02:10,880
So let's actually get to work.
51
51
00:02:10,880 --> 00:02:13,020
And as always grab your starter files
52
52
00:02:13,020 --> 00:02:15,110
from the GitHub repository.
53
53
00:02:15,110 --> 00:02:17,220
I already have mine here.
54
54
00:02:17,220 --> 00:02:20,113
And then let's open up this folder.
55
55
00:02:25,400 --> 00:02:27,773
So that's this one.
56
56
00:02:29,250 --> 00:02:31,350
And let's start by taking a look
57
57
00:02:31,350 --> 00:02:33,630
at the files that we have here.
58
58
00:02:33,630 --> 00:02:36,850
First up, we have the Prettier configuration.
59
59
00:02:36,850 --> 00:02:39,230
So exactly the one that we used
60
60
00:02:39,230 --> 00:02:41,990
in the Editor setup section.
61
61
00:02:41,990 --> 00:02:44,420
And from now on we will always use this configuration
62
62
00:02:44,420 --> 00:02:45,793
in every single project.
63
63
00:02:47,110 --> 00:02:49,590
Then we have an empty Script.
64
64
00:02:49,590 --> 00:02:51,950
We have the CSS Style,
65
65
00:02:51,950 --> 00:02:53,270
which you can take a look at
66
66
00:02:53,270 --> 00:02:57,010
if you're interested at the same for the HTML.
67
67
00:02:57,010 --> 00:02:59,440
Now the HTML will actually be important,
68
68
00:02:59,440 --> 00:03:02,320
because that's where we will find the class names
69
69
00:03:02,320 --> 00:03:03,893
of all of these Elements
70
70
00:03:03,893 --> 00:03:05,790
that we gonna have to select
71
71
00:03:05,790 --> 00:03:07,800
to make this project work.
72
72
00:03:07,800 --> 00:03:10,160
But more about that later.
73
73
00:03:10,160 --> 00:03:11,700
And...
74
74
00:03:11,700 --> 00:03:12,533
Yeah.
75
75
00:03:12,533 --> 00:03:14,450
Let's close up this sidebar
76
76
00:03:15,850 --> 00:03:18,040
and focus on those gripped here.
77
77
00:03:18,040 --> 00:03:19,410
So as you just saw,
78
78
00:03:19,410 --> 00:03:21,630
all of this interface here basically
79
79
00:03:21,630 --> 00:03:24,350
is implemented in HTML.
80
80
00:03:24,350 --> 00:03:29,190
So again, that is this document.
81
81
00:03:29,190 --> 00:03:30,023
Okay.
82
82
00:03:30,023 --> 00:03:31,590
And this whole HTML document
83
83
00:03:31,590 --> 00:03:35,290
is made up of smaller HTML Elements.
84
84
00:03:35,290 --> 00:03:36,550
For example,
85
85
00:03:36,550 --> 00:03:40,330
this message that we see here is in our HTML,
86
86
00:03:40,330 --> 00:03:43,990
this paragraph here with the message class.
87
87
00:03:43,990 --> 00:03:45,580
And so now in JavaScript,
88
88
00:03:45,580 --> 00:03:47,840
we can actually select this Element
89
89
00:03:47,840 --> 00:03:50,060
based on this class.
90
90
00:03:50,060 --> 00:03:53,590
So a little bit like we can select Elements in CSS.
91
91
00:03:53,590 --> 00:03:56,120
We can do the same in JavaScript.
92
92
00:03:56,120 --> 00:04:00,060
And if you're not at all familiar with HTML and CSS,
93
93
00:04:00,060 --> 00:04:03,620
then please watch the HTML and CSS crash course,
94
94
00:04:03,620 --> 00:04:06,120
that is in the previous section.
95
95
00:04:06,120 --> 00:04:08,460
Anyway, before we learn what the DOM
96
96
00:04:08,460 --> 00:04:11,020
and DOM Manipulation actually are,
97
97
00:04:11,020 --> 00:04:12,710
let's quickly learn an easy way
98
98
00:04:12,710 --> 00:04:16,363
of selecting an Element like this in JavaScript.
99
99
00:04:17,680 --> 00:04:18,930
And this is how it works.
100
100
00:04:20,200 --> 00:04:25,160
We write document.querySelector
101
101
00:04:25,160 --> 00:04:27,780
So this querySelector is basically
102
102
00:04:27,780 --> 00:04:31,010
a method that's available on the document object.
103
103
00:04:31,010 --> 00:04:33,440
And more about that later.
104
104
00:04:33,440 --> 00:04:34,560
Now into this method,
105
105
00:04:34,560 --> 00:04:37,010
we need to pass in a Selector.
106
106
00:04:37,010 --> 00:04:38,850
And again, this Selector
107
107
00:04:38,850 --> 00:04:40,770
is exactly the same Selector
108
108
00:04:40,770 --> 00:04:42,593
that we would use in CSS.
109
109
00:04:43,520 --> 00:04:45,000
So we pass in the string
110
110
00:04:45,000 --> 00:04:46,800
and we want to select the Element
111
111
00:04:46,800 --> 00:04:49,330
with the class name of message.
112
112
00:04:49,330 --> 00:04:51,661
And so we need to write a .
113
113
00:04:51,661 --> 00:04:54,120
and then message
114
114
00:04:54,120 --> 00:04:56,540
Again, this is exactly how we would select
115
115
00:04:56,540 --> 00:04:58,930
the same Element using CSS.
116
116
00:04:58,930 --> 00:05:00,200
Right?
117
117
00:05:00,200 --> 00:05:02,830
Now if it was an ID instead of a class,
118
118
00:05:02,830 --> 00:05:04,157
we would use the #
119
119
00:05:05,260 --> 00:05:06,093
Right?
120
120
00:05:06,093 --> 00:05:09,260
But in this case, it is really a class.
121
121
00:05:09,260 --> 00:05:10,360
And so let's use the .
122
122
00:05:11,250 --> 00:05:13,330
And now we can quickly take a look
123
123
00:05:13,330 --> 00:05:15,830
at the result of this selection here,
124
124
00:05:15,830 --> 00:05:17,420
using the Console.
125
125
00:05:17,420 --> 00:05:20,330
And remember that we set up the cl snippet
126
126
00:05:20,330 --> 00:05:23,000
in the Editor setup section.
127
127
00:05:23,000 --> 00:05:24,730
So I just write cl
128
128
00:05:24,730 --> 00:05:28,330
and then I get console.log automatically here.
129
129
00:05:28,330 --> 00:05:30,830
Now in case you skipped that section,
130
130
00:05:30,830 --> 00:05:34,040
you can always go back and see how I did that
131
131
00:05:34,040 --> 00:05:36,963
or you can just write console.log manually.
132
132
00:05:37,950 --> 00:05:39,470
So I give it a Save.
133
133
00:05:39,470 --> 00:05:41,090
And now I do another thing
134
134
00:05:41,090 --> 00:05:43,980
that we learned in the Editor setup section,
135
135
00:05:43,980 --> 00:05:45,800
which is to open up this project
136
136
00:05:45,800 --> 00:05:47,580
using the live-server.
137
137
00:05:47,580 --> 00:05:48,670
Right?
138
138
00:05:48,670 --> 00:05:51,160
So let's open up the Terminal here
139
139
00:05:51,160 --> 00:05:53,133
by clicking New Terminal.
140
140
00:05:54,510 --> 00:05:55,920
Okay.
141
141
00:05:55,920 --> 00:05:58,090
Let's clear it using Command + K.
142
142
00:05:58,090 --> 00:06:00,380
And again, we learned how to do all of these
143
143
00:06:00,380 --> 00:06:02,820
in the Editor setup section.
144
144
00:06:02,820 --> 00:06:03,800
So if you skipped that,
145
145
00:06:03,800 --> 00:06:06,940
then please go back and watch that one first.
146
146
00:06:06,940 --> 00:06:10,560
Anyway we see that we're already in the folder.
147
147
00:06:10,560 --> 00:06:13,490
So Guess-My-Number that's exactly the folder.
148
148
00:06:13,490 --> 00:06:18,490
And now all we need to do is to type live-server
149
149
00:06:18,840 --> 00:06:21,840
hit Enter and then it will open up
150
150
00:06:21,840 --> 00:06:24,323
a New Tab in our browser.
151
151
00:06:25,420 --> 00:06:26,710
So this is the demo here
152
152
00:06:26,710 --> 00:06:29,250
that I'm gonna keep on the right side.
153
153
00:06:29,250 --> 00:06:30,730
And then here on the left side,
154
154
00:06:30,730 --> 00:06:33,233
is the actual project that we are building.
155
155
00:06:34,170 --> 00:06:36,090
Of course nothing works yet,
156
156
00:06:36,090 --> 00:06:38,730
but let's just open up the Console.
157
157
00:06:38,730 --> 00:06:40,683
So Inspect Console.
158
158
00:06:41,680 --> 00:06:43,063
Give it some more space.
159
159
00:06:46,270 --> 00:06:48,810
And so indeed we actually already have
160
160
00:06:48,810 --> 00:06:51,270
the p Element here selected.
161
161
00:06:51,270 --> 00:06:52,890
So that's what we did here.
162
162
00:06:52,890 --> 00:06:56,100
So document.querySelector('.message')
163
163
00:06:56,100 --> 00:06:56,940
And so in the Console,
164
164
00:06:56,940 --> 00:06:59,980
we then get basically this entire Element.
165
165
00:06:59,980 --> 00:07:01,560
And as we hover over it,
166
166
00:07:01,560 --> 00:07:04,793
it actually even gets selected here on the page.
167
167
00:07:05,810 --> 00:07:06,643
Great.
168
168
00:07:06,643 --> 00:07:07,980
So this is the first,
169
169
00:07:07,980 --> 00:07:11,180
basically DOM manipulation that you did.
170
170
00:07:11,180 --> 00:07:12,770
Great job.
171
171
00:07:12,770 --> 00:07:14,680
Now this Element here itself
172
172
00:07:14,680 --> 00:07:16,920
is not really that useful.
173
173
00:07:16,920 --> 00:07:20,200
So instead let's actually get this text.
174
174
00:07:20,200 --> 00:07:21,733
So this Start guessing here.
175
175
00:07:23,120 --> 00:07:23,980
And we can do that.
176
176
00:07:23,980 --> 00:07:25,130
Simple enough.
177
177
00:07:25,130 --> 00:07:27,300
All we have to do is another .
178
178
00:07:27,300 --> 00:07:28,570
and then textContent
179
179
00:07:31,620 --> 00:07:35,480
So, this part here first select the Element.
180
180
00:07:35,480 --> 00:07:38,110
And so the result of this querySelector method
181
181
00:07:38,110 --> 00:07:39,810
is gonna be an Element.
182
182
00:07:39,810 --> 00:07:41,300
And then on that Element,
183
183
00:07:41,300 --> 00:07:44,060
we can read the textContent property.
184
184
00:07:44,060 --> 00:07:46,600
And so that's why we use another . here
185
185
00:07:46,600 --> 00:07:49,570
and remember when we have multiple . operators,
186
186
00:07:49,570 --> 00:07:51,870
they are executed from left to right.
187
187
00:07:51,870 --> 00:07:54,290
And so first, this operation here is done.
188
188
00:07:54,290 --> 00:07:56,920
Then these selected here
189
189
00:07:56,920 --> 00:08:00,040
basically will get replaced with the Element itself.
190
190
00:08:00,040 --> 00:08:01,470
And then on that Element,
191
191
00:08:01,470 --> 00:08:05,127
we can read the textContent property using another .
192
192
00:08:06,290 --> 00:08:07,870
So let's give it a Save.
193
193
00:08:07,870 --> 00:08:10,300
This will then reload automatically.
194
194
00:08:10,300 --> 00:08:13,790
And yes, now we get Start guessing...
195
195
00:08:13,790 --> 00:08:17,500
Which is really just a textContent of this Element.
196
196
00:08:17,500 --> 00:08:18,530
Great.
197
197
00:08:18,530 --> 00:08:19,900
So now we kind of know
198
198
00:08:19,900 --> 00:08:21,500
how to establish this connection
199
199
00:08:21,500 --> 00:08:24,800
between our code and the user interface.
200
200
00:08:24,800 --> 00:08:26,990
So in other words, the HTML document
201
201
00:08:26,990 --> 00:08:29,940
that's being displayed in the browser.
202
202
00:08:29,940 --> 00:08:33,070
So this was a quick introduction to the DOM
203
203
00:08:33,070 --> 00:08:35,210
and how to select an Element.
204
204
00:08:35,210 --> 00:08:37,300
But what is the DOM actually?
205
205
00:08:37,300 --> 00:08:39,150
And what is DOM Manipulation?
206
206
00:08:39,150 --> 00:08:41,970
Which is the big topic of this section.
207
207
00:08:41,970 --> 00:08:44,883
Well, let's find out in the next video.
16429
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.