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.