1
00:00:00,000 --> 00:00:02,150
Let's talk about resizing the window.

2
00:00:02,145 --> 00:00:03,695
At this point in time,

3
00:00:03,690 --> 00:00:11,450
we've always had some sort of selector in a set of quotations like our box.

4
00:00:11,445 --> 00:00:16,755
But we can also set a selector to be your window or your document.

5
00:00:16,755 --> 00:00:18,005
And so for this,

6
00:00:18,000 --> 00:00:20,250
we want to see the viewport changing.

7
00:00:20,250 --> 00:00:22,820
Now that viewport is this entire white area.

8
00:00:22,815 --> 00:00:24,785
How big is that exactly?

9
00:00:24,780 --> 00:00:27,330
And we sort of looked into this in the last lesson

10
00:00:27,330 --> 00:00:30,080
when we did box dot elder with Box dot,

11
00:00:30,075 --> 00:00:32,495
inner width and window height,

12
00:00:32,490 --> 00:00:34,390
window dot with things like that.

13
00:00:34,390 --> 00:00:36,820
What happens when we resize our page?

14
00:00:36,815 --> 00:00:41,245
Well, we can take different actions based on different window sizes.

15
00:00:41,240 --> 00:00:51,860
So let's go ahead and do Window dot on, resize function, console.log.

16
00:00:51,860 --> 00:00:55,060
And then we want to console.log the window width.

17
00:00:55,055 --> 00:00:57,145
And this is why I got you to do this in the last lesson.

18
00:00:57,140 --> 00:01:07,400
Window dot width by window dot height.

19
00:01:07,400 --> 00:01:11,540
And so let's open up our tools here and that's redox

20
00:01:11,540 --> 00:01:20,780
this and refresh the page.

21
00:01:20,780 --> 00:01:23,540
And anytime I move this,

22
00:01:23,540 --> 00:01:26,420
you can see that those numbers are changing.

23
00:01:26,420 --> 00:01:28,390
And the height isn't changing,

24
00:01:28,385 --> 00:01:29,425
but the width is changing,

25
00:01:29,420 --> 00:01:31,930
the width is getting smaller and smaller and smaller.

26
00:01:31,925 --> 00:01:34,765
And so no, we can do something based on this.

27
00:01:34,760 --> 00:01:37,820
We can say if the page width is less than,

28
00:01:37,820 --> 00:01:41,920
let's say 230 changed the background color to black.

29
00:01:41,915 --> 00:01:45,295
Now, this isn't a very ugly example,

30
00:01:45,290 --> 00:01:48,080
but this is a good practice examples.

31
00:01:48,080 --> 00:01:49,130
So let's go ahead and get rid of that.

32
00:01:49,130 --> 00:01:59,490
And we can say if the window width is less than or equal to 230.

33
00:01:59,970 --> 00:02:05,530
We now know that we can change the body dot

34
00:02:05,530 --> 00:02:14,730
CSS background color to be black or otherwise,

35
00:02:14,725 --> 00:02:19,795
we can do the same thing and change the background color to white.

36
00:02:22,170 --> 00:02:27,030
Alright, so this is going to stay black or white rather,

37
00:02:27,025 --> 00:02:30,735
entailing gets down to two hundred thirty. Two thirty.

38
00:02:30,730 --> 00:02:35,570
There we go. And it's going to toggle just like that.

39
00:02:36,540 --> 00:02:40,020
Now we can do the same thing based on height as well.

40
00:02:40,015 --> 00:02:43,735
And I'm just going to put that console log back in here,

41
00:02:43,730 --> 00:02:46,810
where we're going to log the width and the height.

42
00:02:46,805 --> 00:02:51,325
And I'm going to change where this is docked,

43
00:02:51,320 --> 00:02:54,200
change out to the bottom here and refresh the page.

44
00:02:54,200 --> 00:02:57,560
Refresh. And now when I resize,

45
00:02:57,560 --> 00:02:59,960
we're gonna see the width isn't changing,

46
00:02:59,960 --> 00:03:01,100
but the height is changing.

47
00:03:01,100 --> 00:03:05,060
And we could take some sort of action if someone's page is, for example,

48
00:03:05,060 --> 00:03:06,740
on the 87 pixels tall,

49
00:03:06,740 --> 00:03:09,260
do something else, you could give them a warning.

50
00:03:09,260 --> 00:03:11,270
You could, you could literally delete

51
00:03:11,270 --> 00:03:13,520
everything from your Document Object Model and just say,

52
00:03:13,520 --> 00:03:16,730
hey, your browser is a way to small for this website.

53
00:03:16,730 --> 00:03:19,510
In fact, your browser, if it's 87 pixels tall,

54
00:03:19,505 --> 00:03:23,215
is way too small for any website.

55
00:03:23,210 --> 00:03:25,490
And that is how we resize the window.

56
00:03:25,490 --> 00:03:27,860
Now it's not actually super useful at this point in time.

57
00:03:27,860 --> 00:03:32,210
And I haven't used this in a number of probably a number of years.

58
00:03:32,210 --> 00:03:35,870
But it is good to know because sometimes I run into old code that's doing this and then

59
00:03:35,870 --> 00:03:39,620
I just convert it over to the CSS media query to make it responsive.

60
00:03:39,620 --> 00:03:43,120
And this is sort of where CSS starts to take over for JavaScript.

61
00:03:43,115 --> 00:03:48,205
But sometimes you need to know this in JavaScript as well.

62
00:03:48,200 --> 00:03:51,830
Especially if you're going to be creating a game of some kind.

63
00:03:51,830 --> 00:03:53,780
If you're going to create a game, you're going to want to know what

64
00:03:53,780 --> 00:03:56,320
the dimensions are of the game,

65
00:03:56,315 --> 00:03:58,555
the viewport, that game portal here,

66
00:03:58,550 --> 00:03:59,660
this whole white section,

67
00:03:59,660 --> 00:04:03,780
you're going to want to know what that size is and work with it.