Let's talk about resizing the window.
At this point in time,
we've always had some sort of selector in a set of quotations like our box.
But we can also set a selector to be your window or your document.
And so for this,
we want to see the viewport changing.
Now that viewport is this entire white area.
How big is that exactly?
And we sort of looked into this in the last lesson
when we did box dot elder with Box dot,
inner width and window height,
window dot with things like that.
What happens when we resize our page?
Well, we can take different actions based on different window sizes.
So let's go ahead and do Window dot on, resize function, console.log.
And then we want to console.log the window width.
And this is why I got you to do this in the last lesson.
Window dot width by window dot height.
And so let's open up our tools here and that's redox
this and refresh the page.
And anytime I move this,
you can see that those numbers are changing.
And the height isn't changing,
but the width is changing,
the width is getting smaller and smaller and smaller.
And so no, we can do something based on this.
We can say if the page width is less than,
let's say 230 changed the background color to black.
Now, this isn't a very ugly example,
but this is a good practice examples.
So let's go ahead and get rid of that.
And we can say if the window width is less than or equal to 230.
We now know that we can change the body dot
CSS background color to be black or otherwise,
we can do the same thing and change the background color to white.
Alright, so this is going to stay black or white rather,
entailing gets down to two hundred thirty. Two thirty.
There we go. And it's going to toggle just like that.
Now we can do the same thing based on height as well.
And I'm just going to put that console log back in here,
where we're going to log the width and the height.
And I'm going to change where this is docked,
change out to the bottom here and refresh the page.
Refresh. And now when I resize,
we're gonna see the width isn't changing,
but the height is changing.
And we could take some sort of action if someone's page is, for example,
on the 87 pixels tall,
do something else, you could give them a warning.
You could, you could literally delete
everything from your Document Object Model and just say,
hey, your browser is a way to small for this website.
In fact, your browser, if it's 87 pixels tall,
is way too small for any website.
And that is how we resize the window.
Now it's not actually super useful at this point in time.
And I haven't used this in a number of probably a number of years.
But it is good to know because sometimes I run into old code that's doing this and then
I just convert it over to the CSS media query to make it responsive.
And this is sort of where CSS starts to take over for JavaScript.
But sometimes you need to know this in JavaScript as well.
Especially if you're going to be creating a game of some kind.
If you're going to create a game, you're going to want to know what
the dimensions are of the game,
the viewport, that game portal here,
this whole white section,
you're going to want to know what that size is and work with it.