1
00:00:00,270 --> 00:00:05,910
This lesson, we're going to add in a little bit of styling so that we can hide and show pages, so

2
00:00:05,910 --> 00:00:12,480
by default we're going to use a style tag and by default, what we want is for page.

3
00:00:12,870 --> 00:00:21,180
So all the class page and using display and we're not going to show any one of those pages until they're

4
00:00:21,180 --> 00:00:22,650
ready to be shown, of course.

5
00:00:23,100 --> 00:00:25,560
And then we'll add in another class.

6
00:00:25,560 --> 00:00:26,690
So we'll call it visible.

7
00:00:27,060 --> 00:00:33,120
And this is the one that's going to toggle the visibility of the pages and we'll use display block in

8
00:00:33,120 --> 00:00:33,450
this one.

9
00:00:33,480 --> 00:00:35,250
So this one will make it visible.

10
00:00:35,460 --> 00:00:38,780
And we're going to control all of this, of course, with JavaScript.

11
00:00:39,060 --> 00:00:45,330
And while we've got our styling and all we're adding in our styling, we can also update and add in

12
00:00:45,750 --> 00:00:46,640
some buttons.

13
00:00:46,660 --> 00:00:49,400
So this actually is going to look a little bit more like a button.

14
00:00:49,680 --> 00:00:55,590
So setting up as a pointer, maybe all buttons or most buttons will have some type of padding.

15
00:00:56,790 --> 00:00:58,350
And then we've got our border.

16
00:00:59,310 --> 00:01:02,340
So most buttons will as well have some type of border.

17
00:01:03,330 --> 00:01:09,820
And I usually like to text, align, center the buttons, let's set a background color for the button.

18
00:01:10,110 --> 00:01:17,730
How about we pick blue for the button and the font will be white, so text will be white.

19
00:01:18,270 --> 00:01:19,110
So it's refresh.

20
00:01:19,920 --> 00:01:24,360
And we see, of course, that our buttons are not visible quite yet.

21
00:01:24,900 --> 00:01:27,390
So we want to make sure that we make them visible.

22
00:01:27,780 --> 00:01:35,700
So when we load the game, let's set that up and we're going to set and make it visible and I'll show

23
00:01:35,700 --> 00:01:36,490
you how to do that.

24
00:01:36,510 --> 00:01:38,820
So we are on the main class.

25
00:01:39,120 --> 00:01:42,270
So this is the one we want to use and we want to make this one visible.

26
00:01:42,510 --> 00:01:45,390
We've got that within our play area mean.

27
00:01:45,690 --> 00:01:54,300
So when our dorm loads so we've got our dorm loaded, our getData are going to use that play area mean

28
00:01:54,960 --> 00:01:57,390
and apply a class to it.

29
00:01:57,810 --> 00:01:59,340
So do a class list.

30
00:01:59,670 --> 00:02:08,310
And in order to add a class to any elements, you can use class list, add in JavaScript, so that will

31
00:02:08,310 --> 00:02:09,500
add visible to it.

32
00:02:09,780 --> 00:02:12,950
So when I refresh, there's our buttons, we can see them again.

33
00:02:13,320 --> 00:02:14,790
Let's clean this up also.

34
00:02:14,790 --> 00:02:18,270
So we are going to get rid of that second button because we don't need it.

35
00:02:18,570 --> 00:02:21,690
We're going to get rid of all of this data because we don't need it.

36
00:02:22,170 --> 00:02:26,880
We're going to get rid of the console messages because of course, we don't need those as well.

37
00:02:27,210 --> 00:02:33,900
So get rid of some of this stuff here because we don't really need any of the stuff as it is working.

38
00:02:33,900 --> 00:02:37,350
So we don't need to kind of go through it again, over and over again.

39
00:02:37,950 --> 00:02:42,270
So we're ready to have the game start when we click start game.

40
00:02:42,540 --> 00:02:49,530
So that moves us into the starting position and we're already under start game to update some values.

41
00:02:49,830 --> 00:02:52,890
So let's use the player object to player score.

42
00:02:53,160 --> 00:02:54,870
So set the score to zero.

43
00:02:55,140 --> 00:03:01,560
And the reason that I'm doing it, I'm adding it in here again is that we want to make sure that the

44
00:03:01,560 --> 00:03:07,650
player score is zero and this means that we're starting out with a new set.

45
00:03:08,010 --> 00:03:11,400
We can also move this into our start game.

46
00:03:11,400 --> 00:03:17,190
I small because of course, we don't need to make use of this until our game has started.

47
00:03:17,550 --> 00:03:27,810
So adding in that also let's use what we just did before with the play area and we'll do a mean and

48
00:03:27,810 --> 00:03:29,400
class list.

49
00:03:29,850 --> 00:03:31,980
So this is the same one that we did before.

50
00:03:32,160 --> 00:03:34,980
But this time we want to remove an element.

51
00:03:35,220 --> 00:03:39,480
So we're going to remove visible from that class.

52
00:03:39,480 --> 00:03:44,160
So we've added it up here to make it visible and now we're removing it.

53
00:03:44,160 --> 00:03:48,630
And this is how you can add and remove classes from elements using JavaScript.

54
00:03:48,960 --> 00:03:51,180
And we also want to add.

55
00:03:52,610 --> 00:04:00,440
Visible, so instead of remove same syntax except add instead of visible, and we want to add it to

56
00:04:00,440 --> 00:04:08,420
our game area, and if we go over to the element just we got to make sure that we are actually removing.

57
00:04:08,420 --> 00:04:13,590
So just slide that down and we can see that we've got our main area.

58
00:04:13,610 --> 00:04:14,960
So it still has visible.

59
00:04:17,020 --> 00:04:21,880
And they just noticed that we do have an error here, so this one should actually be game, it shouldn't

60
00:04:21,880 --> 00:04:22,330
be made.

61
00:04:22,960 --> 00:04:24,100
So let's update that.

62
00:04:25,130 --> 00:04:31,610
And now when we click it, you can see that it disappears and the visible goes to the game area, so

63
00:04:31,610 --> 00:04:32,770
watch that one more time.

64
00:04:33,020 --> 00:04:35,420
So by default, we start up the page.

65
00:04:35,630 --> 00:04:42,530
When the dome has loaded, we're adding the class of visible is making this main area visible.

66
00:04:42,830 --> 00:04:48,350
And when we click it, we hide it and we're removing out the visible class.

67
00:04:48,350 --> 00:04:55,630
So that's making it not visible and it's adding visible class to the game area.

68
00:04:55,760 --> 00:05:02,540
And this way you can have multiple pages and you can have multiple pages and apply that same structure

69
00:05:02,660 --> 00:05:07,250
in order to add and remove classes and hiding various pages as needed.

70
00:05:07,280 --> 00:05:09,410
Go ahead and add this into your project.

71
00:05:09,650 --> 00:05:13,280
And coming up next, we show you how we're going to build out our game board.

72
00:05:13,280 --> 00:05:14,390
So we need a game board there.

73
00:05:14,390 --> 00:05:16,370
And this is all going to be done with JavaScript.