In this lesson, we're going to move a little bit away from the JavaScript, and I know the core focus
of this course, of course, is JavaScript, but we do need to make some styling.
And I am going to go through this rather quickly because I find that students, oftentimes, they want
to apply their own styling to the various elements on the page.
So we've got our start button and we've created a button class for that.
So BTM class.
So let's apply some styling and make this look like a button.
So first, adding in a border and give it a grayish color.
Also, the text align center padding.
So most buttons, it's nice to have some padding on the buttons, make the font size a little bit bigger
and update the cursor.
I usually like to use the pointer for buttons so that the user, when they are coming over the button,
that they do see that this is something that is clickable and they can interact with it.
Also the background color.
So let's make it a red background.
So it really pops and stands out and updating the color to be white.
So the text color is going to be white and you can see as you're designing and this is a feature within
brackets that we can see the success is being applied.
Also want to add in some interaction whenever they're hovering over the button.
Let's add border shadow or box shadow effect.
So this would give this box shadow effect whenever we're hovering over it and we can turn it red.
So you can see just save that.
And when we're hovering over it, it's got a little bit of an effect to it.
Maybe we need to do a little bit more.
So update these two three so you can see that it's it's looking like it's more interactive when we're
hovering over it so you can change the size, whatever your personal preference is.
Now let's position the button, the start button.
So we did also give it a class of start.
So adding in some styling to that start where we can position it on the page.
So setting the position and I'm going to set the position to be absolute so that we can position exactly
where we want to locate it and a width of the button get to use percentages because I can use percentages
for the rest of the structure and margin because it's absolute.
I'm got a position at twenty picks off the top and left using percentage.
So 35 percent.
So that will position it in the center because the width of it is 30 and left is 35.
Right is also by default 35 and updating the Z index.
So it stands out over the other elements on the page.
So in case we have anything else, so the button is always going to be floating full center there and
that's the start button.
And we still haven't added it in any of the functionality and we're going to do that in the next case
with JavaScript.
So there's a few other elements that we created.
We need to add some styling to it.
So next one is the main game area.
So I believe we called that game area and we can set this to a width of sixty percent and margin, I
guess, at the margin to so it would center it.
But we are going to be floating them to the left anyway and border for now so that we can see where
the border of this particular boxes.
Let's set the border of the box of the game area and then going back into the index.
Just make sure that I've got all of the names proper.
So that's that game area there.
And with brackets you can press on a mock command and that will open up that particular element success.
So that is connected and proper.
Next, let's update the cell so the cells where the different columns that we want on the Web page and
applying the float's to those.
So we'll just float those and for all of them left so that we get them all aligned and showing up on
the page.
And we don't have any of the staling yet for the other ones.
And you can see it's there's the game area, but we don't have any content in it.
So it's very hard to see.
But it is there there's also the columns that we had.
So these were the different columns that we want it to set.
So setting them with the men width and the Menwith on the column should be one hundred pics.
So even though we're using percentages, we want to set a minimum width because for instance, we don't
want to go less than a certain pixel width as that will ruin the look and the feel of the game.
Next, setting up the border solid.
And let's set a really light border for this one and we might remove those borders.
So usually I like to add in the borders as I'm developing so I can actually see where it's located.
And podding for this is going to be zero.
Next, let's set up the site areas and this is going to be the different side values that we have.
So you can see that we've got the cells and then column and column.
So those are the two columns that we have for the game area.
And we're also going to select the main.
So the main is that center gameplay area where we've got all of the content that's going to be presented
there.
So we're going to set a mean height of.
100 VHI, so that's the vertical height.
So that's going to provide full vertical height of that game area and make it bigger so you can see
where it's being contained.
So nothing yet is contained within those cells and setting minimum width of 806.
And safe.
So now we've got all of our game areas are set up and you can also add background colors if you want
as well.
Next to that I want to do is set up these models.
So we've got these models and these are the ways that we're planning to communicate with the users.
So the first model is model one, and we're going to have two models.
So do model two.
So both of them via their class, selecting those elements.
And initially, we're going to do a display none.
But for now, we'll do a position fixed so that we can position them on the page itself and move the
screen up slightly so they can see them as we're developing them and the background color using our
RGB.
So there's a default RGB.
So if it's not one of the more modern browsers that takes the alpha value within RGB, then we're going
to just set that to just block.
And if we do have the option to do some alpha version so we can do A and provide zero point four for
the GPA.
So it's going to be the background of those models.
And what is going to be 100 percent height is going to also be 100 percent.
That should have one in front of that.
So it's 100.
So this will actually darken out that entire area that we can have for the model popup and left is zero,
up is zero.
So you can see it's appeared at showing up.
So this is what happens whenever the model is visible.
It's going to carry out the rest of the content on the screen.
And that's what we want, because and then we're going to put the model content in kind of like a pop
up just above the model and add in some padding on the top.
So it's moved slightly down.
And this is where the content of the model will start.
So we're adding in that padding and using that index so that it goes on top of the other content so
you can't click anything underneath it and safe.
Now, we can do the model content, some model content, and let's have a background color for this
so that to eat so that we can see that content margin is going to be auto.
So it centers the content setting up minimum height.
So even if there's no content inside, it's going to be at least that high, setting up some padding,
the 30 picks of padding so that the text is slightly inside.
Usually I like to use 50 percent of the available screen space and border radius so slightly round the
borders of that popup window.
So now we've got both of those pop up windows showing up because both of them, remember, had model
content.
The models are going to be useful, whether you're creating it within this game or one of the other
projects, you'll always need a way to connect with your Web users.
So this is always a good way with these pop up models and they look way better and more moderate than
what you would see with the default alerts.
So we also had the model body and model body, too.
So this is the content area for the models.
And it just so happens that within this project we do have both of those, that we do have two models.
Oftentimes you can get away with just one model setting the font size.
So this is where the model content is going to go.
So we want this nice and readable for the users.
And then lastly, we need to handle the different buttons.
So we've got buttons for the various models and we've got one of the models underneath which has the
little X there.
So they're actually stacked one on top of the other because we've got both of them and they're both
positioned in the same spot.
So let's do the deal first and then we can hide the top model and fix up and finish up the bottom model.
So doing the background color for the deal and a nice green color is probably ideal for our deal.
And then we've also have the other one.
That's no deal.
So the no deal class and do a background color for the no deal and this one maybe should be red.
So you can see that those are being presented.
They were both they both shared a class called Offers.
And so that means that within this class we can set default width and we can set some of these default
parameters.
How we want this to look so we can look like make them look like buttons, because this is something
that we want the user to be able to click.
So 50 picks for the heights and we'll do font size like we're turning them all rather large fonts.
And this is something that you could revisit as well afterwards just to make sure that it is as you
want.
I'm going to do a display of inline blocks.
So that makes a slight adjustment on the way it's being presented.
Also the color of the font.
So let's just turn this white and text align center.
So text is center aligned, adding a little bit of padding so it's not sitting right on the edge.
And then.
Out in a little bit of margin, so do a three percent margin, so the margin is going to be dynamic
because of with this dynamic.
So this should roughly center the elements.
And there's a number of different ways that you can center those elements.
Let's do something so the user knows that this is something that can be interacted with.
So setting a color for whenever we hover, so it's a little bit off white font weight.
And you could really spend quite a bit of time on styling, of course.
And I'm sure you probably have better ways to customize it and make it look better than what I'm doing.
But again, this is just something that I want it to set up rather quickly.
So we've got all of that taken care of and let's hide the model one.
So take model one and apply display none.
So that should hide or actually it should be model two that we're hiding because we want to see model
one.
So there we've got the close button.
So on model one, we still need to handle the close button on it.
So that was just with a class of clothes and we can adjust the color of that so it stands out slightly
more and float it over to the right hand side of the page.
It's typically the clothes is sitting on the right hand side and fought side.
So we might want to make this a little bit bigger so it stands out.
So maybe font size three and we can also do the font weight if we want.
So font weight.
And I'll just set this to board for now so that we've got a nice big X so the user knows exactly where
to find this X and still on the clothes, let's set a hover function so the user knows that this is
something that can be interacted with.
Whenever they hover on it, it'll update the color of the font to be black and text decoration.
We're sending the text decoration to one point, setting the cursor to a pointer so it gives us an option.
We can see that it's more interactive now and also maybe I'll update this to be red.
So whenever we hover over it, it'll go red so that we can close it and make this slightly smaller.
So it's more in line with the size of the text.
So it looks good.
And now what we can do, instead of just hiding the one model, we're going to hide both models because
we don't want either one of them showing until we're ready to interact with them.
And this is where the JavaScript is going to come in, where we're going to make all of the JavaScript,
create all of the functionality where we can have these models pop up.
And also we're going to populate the game area, make the start button interactive.
And this is the wrap up for most of the styling of the game.
And we are going to have to make some tweaks, adjustments.
So we are going to have to refer back to the siestas file a little bit in the later lessons.
But for now, we've got a good start and we're ready to start making the interaction.
And usually this is the way that I like to do it, where I like to style it first, create the interaction
with JavaScript so I can see which elements I'm interacting with and how I want them to interact and
then make some minor adjustments and tweaks, styling and then the back to the JavaScript to create
a finished product.
So try this out, add in some styling, make it look nice.
You have to follow the exact styling that I did.
So make sure that you do have the structure where you do have these interaction points and these visible
points for the player.