This lesson, we're going to add in a little bit of styling so that we can hide and show pages, so
by default we're going to use a style tag and by default, what we want is for page.
So all the class page and using display and we're not going to show any one of those pages until they're
ready to be shown, of course.
And then we'll add in another class.
So we'll call it visible.
And this is the one that's going to toggle the visibility of the pages and we'll use display block in
this one.
So this one will make it visible.
And we're going to control all of this, of course, with JavaScript.
And while we've got our styling and all we're adding in our styling, we can also update and add in
some buttons.
So this actually is going to look a little bit more like a button.
So setting up as a pointer, maybe all buttons or most buttons will have some type of padding.
And then we've got our border.
So most buttons will as well have some type of border.
And I usually like to text, align, center the buttons, let's set a background color for the button.
How about we pick blue for the button and the font will be white, so text will be white.
So it's refresh.
And we see, of course, that our buttons are not visible quite yet.
So we want to make sure that we make them visible.
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
you how to do that.
So we are on the main class.
So this is the one we want to use and we want to make this one visible.
We've got that within our play area mean.
So when our dorm loads so we've got our dorm loaded, our getData are going to use that play area mean
and apply a class to it.
So do a class list.
And in order to add a class to any elements, you can use class list, add in JavaScript, so that will
add visible to it.
So when I refresh, there's our buttons, we can see them again.
Let's clean this up also.
So we are going to get rid of that second button because we don't need it.
We're going to get rid of all of this data because we don't need it.
We're going to get rid of the console messages because of course, we don't need those as well.
So get rid of some of this stuff here because we don't really need any of the stuff as it is working.
So we don't need to kind of go through it again, over and over again.
So we're ready to have the game start when we click start game.
So that moves us into the starting position and we're already under start game to update some values.
So let's use the player object to player score.
So set the score to zero.
And the reason that I'm doing it, I'm adding it in here again is that we want to make sure that the
player score is zero and this means that we're starting out with a new set.
We can also move this into our start game.
I small because of course, we don't need to make use of this until our game has started.
So adding in that also let's use what we just did before with the play area and we'll do a mean and
class list.
So this is the same one that we did before.
But this time we want to remove an element.
So we're going to remove visible from that class.
So we've added it up here to make it visible and now we're removing it.
And this is how you can add and remove classes from elements using JavaScript.
And we also want to add.
Visible, so instead of remove same syntax except add instead of visible, and we want to add it to
our game area, and if we go over to the element just we got to make sure that we are actually removing.
So just slide that down and we can see that we've got our main area.
So it still has visible.
And they just noticed that we do have an error here, so this one should actually be game, it shouldn't
be made.
So let's update that.
And now when we click it, you can see that it disappears and the visible goes to the game area, so
watch that one more time.
So by default, we start up the page.
When the dome has loaded, we're adding the class of visible is making this main area visible.
And when we click it, we hide it and we're removing out the visible class.
So that's making it not visible and it's adding visible class to the game area.
And this way you can have multiple pages and you can have multiple pages and apply that same structure
in order to add and remove classes and hiding various pages as needed.
Go ahead and add this into your project.
And coming up next, we show you how we're going to build out our game board.
So we need a game board there.
And this is all going to be done with JavaScript.