So the DOM actually also includes CSS Styles.
And so with DOM manipulation, we can also change Styles.
So let's try that out now.
And what I want to do here is to change the background
of this entire page here to a green color.
Whenever the player guesses the right number,
so when the player wins the game.
And we will also make this number here, wider then.
So let me just demonstrate that here.
So let's quickly win this game here.
Seventeen.
And so you see,
we want this green background,
and also this number here being wider.
And for that, of course, we need to manipulate the Styles
of this page.
So the CSS.
Okay, so that should happen here in this scenario,
where the player wins the game.
So where the guess is equal to the secret number
and actually, let's add some comments here
to make this code a little bit easier to understand.
So this one,
when
player wins,
this first one is
when there is no
input.
This is when
guess is
too high.
And this one here,
this one guess is too
low.
So this now at least looks a little bit nicer.
But anyway, let's now learn how to manipulate CSS Styles.
So we want to manipulate the Style of this whole page.
And so what we need to do
is to select the whole body of this page first.
Okay, so the body is basically this entire visible part
of the website.
So it's basically this whole element.
Alright.
So as always, we need to start by selecting the element
that we want to manipulate.
So
Document Dot querySelector,
and then the selector.
And now it's just the body element so there's no Dot
because that's for classes.
It's just really the element name.
And since there's only one body,
it's going to work just fine.
So here, we select the body.
And now we want to change the CSS Style.
So here, we need to write Style.
So we access basically,
the Style property of this element and then
another Dot
and then the name of the property that we want to change.
And in this case, it is the background color.
So background
and in CSS, we write the background color like this
background Dash
color,
right.
However, in JavaScript that's not allowed.
And so in JavaScript
all these property names that have two words
like background color
will simply adopt the Camel case notation
that I already explained you before,
and that we've been using all the time.
So instead of background Dash color
it's going to be background
uppercase C
for color like this.
And the same rule applies to all the other property names
that have multiple words.
So Style Dot background color,
and now we set it to something.
And let's get the actual color
from or
CSS.
So you see that background color,
here is the one that we're trying to define.
And we will specify it to this color value.
So this is a standard RBG value in hexadecimal.
And so we set it equal to 10, we must write a string,
and then the value we want to set it to.
So just like before, to set anything on the DOM,
we simply use the Equal sign.
So we have all of this.
So the background color property on the Style property,
and we want to set it to this value,
and so we set it equal to the value.
Okay,
so that's one part.
And now let's also increase the width
of this number here.
Okay,
that's important because I want to show you something there.
So Document Dot querySelector.
And that is the element with the class of number.
And again,
we want to change the Style.
So Dot Style,
Dot
width,
and then again we need to specify a string.
So whenever we are manipulating a Style,
we always need to specify a string .
We cannot just write like a number like 30,
it has to be a string.
In India, we need a unit.
And now I already closed the file so let's open it up again.
And the number that I'm looking for
currently has a width
of 15
REM.
And now I want to double it. So 30 REM,
so
30.
REM,
and again it needs to be inside of a string.
I cannot just write 30 REM,
or 30. So just a number,
that would not work,
we have to specify a string,
which in this case contains the number
plus
the unit.
So the same would be for percentages or pixels,
or whatever unit we used in CSS.
Okay, give it a safe now.
And now let's actually try the correct number right away.
So 12.
And
yes,
it worked.
Let's actually get rid of the console here,
then the page looks a bit nicer.
And we can also by the way
get rid of the terminal here
in VS code
because even if we close this panel here,
this process will still keep running,
the only way we stop this process from running
is by hitting here this trash can,
which will kill the terminal or by hitting Ctrl C.
So let's close it because this takes up too much space.
But now Yeah, so this worked just fine.
Now these Styles are actually set as Inline Styles.
So of course, we are not changing
the CSS file or anything like that.
And let me just show that to you.
So actually, I will need back the Dev tools here.
Make it a bit larger now just to show it to you.
And
so Indeed, it is an Inline Style.
So a Style that is applied directly in
the HTML using the Style attribute.
And the same is going to be true for the body.
Exactly.
So we see here, this is the background color
that we just applied.
Alright.
So of course not changing the CSS file
or anything like that.
Okay.
And that's it actually,
that's really the fundamentals of manipulating Styles
in CSS
The most important thing to remember
is to use the Style property.
And then on there is where we specify the CSS property.
And we need to specify that property
in the Camel case notation in case there is two words
and then the value always needs to be a string.
So that's all you need to know in order to change Styles
like we just did here.
Awesome.
We're doing great progress in this project.
And I hope that you're enjoying it so far.
And that you find it a lot of fun
to be able to manipulate a webpage like this.
Anyway, in the next video,
we will implement this reset button here basically
where we can play the game again.
And so I hope to see you there soon.