Hello and welcome in this lesson, we are going to be setting up the basic game board and the game structure,
we're going to need some HTML.
So setting up a basic div and this div can have our score information.
And the objective of the game is to streak to get as many in a row as correct.
So that's going to be the scoring that we're going to be doing, adding in a class and this class can
be called score.
And then this is where our score will sit.
We'll set a default value of zero so that we can start out.
We also need a way to communicate with our players.
So we're going to set up another div with a class of message so we can output message and information
to the player.
And for now, we'll type in here, click to start.
So this is where the player can get information about what's happening within the gameplay, setting
up a class we can call this one gameplay.
So this is going to be where all of our gameplay is going to take place.
And we're also going to need a few buttons so we can set these up just as a regular button HTML type
button.
And this one can have some inner HTML as set up a couple more buttons.
So type button, I'm going to give this one a class because we do want to highlight these buttons right
off the bat.
So I'm going to just call it height button.
We'll take care of all of this in the JavaScript.
So we need one button for hire and we're also going to need one button for lower, adding that in so
this button will be for lower.
Let's refresh the page and make sure that we do have all of the components we need in order to run our
game.
So we've got our streak, which is our score.
We're going to update this to be in line each HTML device and we've got our click to start.
So this is going to be our basic message and then we've got our start button and are higher and lower.
Next to that we want to do is set up our variables in order to contain our element objects.
Setting up a message we're going to use document query selector in order to make a selection of the
element for this one.
We're selecting the element with the class of message.
So before we select our class, we need to specify that, make sure that you place the dot there to
indicate that we're looking for a class within the dorm also for the score.
Same thing we're setting up and selecting it using query selector, selecting the element with a class
of score, also selecting our button.
And in this case, we need we've got several buttons.
So that's several different button elements in select them using query selector all so that will select
all of the elements into a node list.
So all of the buttons will be within one node list and then we can loop through that node list and attach
event listeners.
And then lastly, let's select our gameplay area.
Once again, using Querrey selector and selecting the element with the class of gameplay.
So now we've got access to all of these using these variables.
So when I type the variables into the console, you can see that we do have access to the correct elements.
When I do button, we've got a node list.
So we've got three elements there because this is query selector.
Also, it'll select all the elements.
If we were to write query selector, we would have only selected the first element.
That's the button that has a button typed and then last one.
Let's just make sure that everything is OK with that one as well.
So that's gameplay.
So that's the best way to check to make sure that you did select out all of the elements as variables
that now you can use within your JavaScript.
So go ahead and set that up, set up the game board with the buttons, the correct HTML elements, and
then use JavaScript to select those elements into variable objects that we're going to use in the upcoming
lessons.