Original subtitles

Welcome to the first of three wonderful projects

that we're gonna build in this section.

And let's get started right away.

And here I have a working demo

of the project that we're gonna build

over the next couple of videos.

And this project is called Guess My Number!

And I went with this kind of retro design

like inspired by the old 80s game.

Just to make it a bit more fun.

So as the name says,

the goal of this project

is to simply guess a secret number

which is between one and 20.

So here in this input we can type a number.

Let's say 10, then we click Check!

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

In this case it says,

that our guess was Too Low!

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

and now after one failed guess it decreased to 19.

So basically after each guess that we fail,

the score decreases by one.

So let's try another one.

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

Let's try 18.

And now it's too high.

So we get this different message.

And now it's correct.

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

The screen turns green

and also we now have the Highscore here of 17.

So a Highscore is another feature

of this small application.

Then if you want to play again,

we can simply click the Again! button

and it all resets everything except for the Highscore.

So the Highscore is kept

and so if I'm quicker in this round,

my Highscore will then become better.

Let's start again at 10.

So maybe I can do it faster.

Well, I think I cannot.

It's Too high!

And so my Highscore stays the same

as it was before.

Okay.

So with this I think you understood

how this project works.

So let's actually get to work.

And as always grab your starter files

from the GitHub repository.

I already have mine here.

And then let's open up this folder.

So that's this one.

And let's start by taking a look

at the files that we have here.

First up, we have the Prettier configuration.

So exactly the one that we used

in the Editor setup section.

And from now on we will always use this configuration

in every single project.

Then we have an empty Script.

We have the CSS Style,

which you can take a look at

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

Now the HTML will actually be important,

because that's where we will find the class names

of all of these Elements

that we gonna have to select

to make this project work.

But more about that later.

And...

Yeah.

Let's close up this sidebar

and focus on those gripped here.

So as you just saw,

all of this interface here basically

is implemented in HTML.

So again, that is this document.

Okay.

And this whole HTML document

is made up of smaller HTML Elements.

For example,

this message that we see here is in our HTML,

this paragraph here with the message class.

And so now in JavaScript,

we can actually select this Element

based on this class.

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

We can do the same in JavaScript.

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

then please watch the HTML and CSS crash course,

that is in the previous section.

Anyway, before we learn what the DOM

and DOM Manipulation actually are,

let's quickly learn an easy way

of selecting an Element like this in JavaScript.

And this is how it works.

We write document.querySelector

So this querySelector is basically

a method that's available on the document object.

And more about that later.

Now into this method,

we need to pass in a Selector.

And again, this Selector

is exactly the same Selector

that we would use in CSS.

So we pass in the string

and we want to select the Element

with the class name of message.

And so we need to write a .

and then message

Again, this is exactly how we would select

the same Element using CSS.

Right?

Now if it was an ID instead of a class,

we would use the #

Right?

But in this case, it is really a class.

And so let's use the .

And now we can quickly take a look

at the result of this selection here,

using the Console.

And remember that we set up the cl snippet

in the Editor setup section.

So I just write cl

and then I get console.log automatically here.

Now in case you skipped that section,

you can always go back and see how I did that

or you can just write console.log manually.

So I give it a Save.

And now I do another thing

that we learned in the Editor setup section,

which is to open up this project

using the live-server.

Right?

So let's open up the Terminal here

by clicking New Terminal.

Okay.

Let's clear it using Command + K.

And again, we learned how to do all of these

in the Editor setup section.

So if you skipped that,

then please go back and watch that one first.

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

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

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

hit Enter and then it will open up

a New Tab in our browser.

So this is the demo here

that I'm gonna keep on the right side.

And then here on the left side,

is the actual project that we are building.

Of course nothing works yet,

but let's just open up the Console.

So Inspect Console.

Give it some more space.

And so indeed we actually already have

the p Element here selected.

So that's what we did here.

So document.querySelector('.message')

And so in the Console,

we then get basically this entire Element.

And as we hover over it,

it actually even gets selected here on the page.

Great.

So this is the first,

basically DOM manipulation that you did.

Great job.

Now this Element here itself

is not really that useful.

So instead let's actually get this text.

So this Start guessing here.

And we can do that.

Simple enough.

All we have to do is another .

and then textContent

So, this part here first select the Element.

And so the result of this querySelector method

is gonna be an Element.

And then on that Element,

we can read the textContent property.

And so that's why we use another . here

and remember when we have multiple . operators,

they are executed from left to right.

And so first, this operation here is done.

Then these selected here

basically will get replaced with the Element itself.

And then on that Element,

we can read the textContent property using another .

So let's give it a Save.

This will then reload automatically.

And yes, now we get Start guessing...

Which is really just a textContent of this Element.

Great.

So now we kind of know

how to establish this connection

between our code and the user interface.

So in other words, the HTML document

that's being displayed in the browser.

So this was a quick introduction to the DOM

and how to select an Element.

But what is the DOM actually?

And what is DOM Manipulation?

Which is the big topic of this section.

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