Welcome in this lesson, it's going to be about building out our HTML structure so that later on we
can incorporate all of the gameplay that is necessary in order to produce our application.
So starting out, we're going to create a div that's going to be a mean div, calling it giving it a
class.
We can assign a score there.
So this is where we can output whatever the score values are that we want to show.
Also setting up another class and we can give this one class of game and then within here we can show
all of the gameplay creating one more div.
So inside of the date, the game class div we create a div and this will be the start screen.
And then here is where we can have all of the welcome message and start button and so on.
So we'll add that in as well.
Next, creating a class and adding.
To this class, we're going to call it game.
And so this is where all of our game play will take place, so we're going to swap between the start
screen and the game area once we start the game.
I'm also going to create a basic class.
I'm going to call it height, and this is going to have one property where we're going to use display
none.
So that way we don't show both of those and we can add and remove the Hyde class as needed in order.
So different screens to the player.
Next, we're going to use JavaScript to connect to our elements on the page.
And within the start screen, we're going to add in an event listener.
So when the user presses the start screen, it can start the game as well.
So selecting the various elements that we have on our page, I'm going to use CONSED and for the score
area, using the document and query selector, we're going to select the element with score and output
that into the JavaScript score object, selecting our start screen using document query selector.
We're going to select the element with a class of start screen.
And you don't have to call them the same, you could call them something different as well.
And next stop selecting our game area and I was going to call it the same thing so that we have some
consistency query selector and selecting the element with the class of game.
So once I've made these selections, I usually like to double check and make sure that we are accessing
them properly.
So opening up your developer console, we can type in score.
We see that we access that div type start screen so that we access that's div and then game area just
to make sure that we're accessing the right device.
So that coming up next, we can focus on the JavaScript and create all of the interactions that are
going to be necessary in order to produce the gameplay.
So one last thing that we wanted to add in before we conclude, and that's adding in an event listener
to start screen and this is going to be a click event.
So whenever the player clicks the start screen where we've got that welcome message, this is going
to trigger off the game start and adding in a function, call it start.
So this is where all of our gameplay will start.
And we'll take a look at that and we'll build that out in the upcoming lessons.
So go ahead and set up your default HTML ad in classes as necessary within the styling and then use
JavaScript to add all of those elements as objects, usable objects within your code so that you're
ready to move on to the next step and then also test out that click event so that make sure that that
is functioning.
And the way to do that, usually I put a console message into that function.
So I know that whenever I'm clicking it, it is being invoked and it is working.
So go ahead and add that into your project and going to be ready to move on to the next step.