Welcome.
This is going to be the lesson we're going to set up our basic game structure, so setting up some of
our HTML and then connecting it to JavaScript object.
So first of all, let's create an area where we can display the score.
We can just give it a class of score and we'll connect to it again with JavaScript.
So try to keep the HTML to a minimal as possible.
Then we've got our game area and then within the game area we can add a few more divs.
One of them can be our start screen.
This is the start screen that's going to be displayed to the player as they come in and we can add in
some content in their price was just right in their press start.
We'll also create a game over message so this can be a class of game message.
So any of the communications and by default I'm going out of class of hide.
And then this is the class that we can toggle to hide and show this particular element and all using
JavaScript.
And the lastly, one more class that we need to create, one more element that we need to create.
And this is going to be our main game area.
So this is where all the action is going to happen and that should be it for the HTML in order to start
our gameplay.
There's a few styles that we do need to take care of as well.
So we created one called height.
And what this one will do, this one will display and show elements.
So by default it will be none.
And when we add it to any one of our elements that we're going to not see that particular element so
we can use that within our JavaScript in order to highlight and show element.
Also, let's set up our game area.
So adding in some styling and this is just some quick styling, just background color.
And we'll do that as Sky-Blue setting a width.
So this is going to be one hundred percent height of one hundred percent as well.
And we'll set the margin to auto, even though we're not going to see it because we're at 100 percent
and 100 percent.
So this is just in case we decide to adjust the size.
Also, let's set up some Class four score as well so we can see the score output, setting this one
as a background color of black and having the text so that we can see it really easily.
We can text, align line center, let's set a height for this one and then font size.
It's a little bit bigger than the standard font and then also a font family to make it look a little
bit more interesting.
So let's refresh.
And so now we've got our score area.
We've got a message to press the start, and we also need to set up our start screen as well.
So our start screen essentially is going to be our start button or start area.
So make it stand out.
We can do a background color of red.
So it really stands out.
We'll position it left twenty five percent, one hundred picks off the top.
The color can be white and setting the width to be fifty percent.
So its center lines add some padding then also a border.
And let's refresh and we can text.
Align this to center as well.
So great.
Next we need to set up JavaScript and now let's select those elements that we created.
So select the one with the class of score using document query selector and selecting the element with
score.
We can also select our start screen into an object, the same format we're using query, select.
And since there's only one and the one that we're trying to select, we can just use query selector
for this one.
Let's also select our game area.
So this is where all the action is going to happen, all the gameplay.
And let's do one more using the documents.
So let's refresh and make sure that we do have the right elements.
So we do have our score.
I'll make this a bit bigger.
We've got our start screen.
So I'm just selecting the objects in JavaScript and I'm not putting them in the console.
And when I put in the console, they should return back the correct element that's been selected into
that object.
And then the last one, we've got our game message.
So everything looks ready to go for the next lesson.
So go ahead and set up your game screen.
Adding in the elements.
You can apply some styling, you can customize the styling as well a bit the elements into objects that
are going to be usable within the upcoming lessons as we called out our application.