Hello and welcome to the first lesson of this section here, we're going to be building out the HTML
and the structure so that we can bring in our JavaScript and make our game interactive.
So we need to have a few different elements on the page.
So this one can be a span.
I'm going to give it a class.
So this is our message area where we can communicate with the user, give them information about what
to do.
And for now, I'm just going to write in here press to start.
And this will also output something for us to view within our browser.
Also, we need a scoring area.
We can just call this one score.
And then lastly, let's create an element to contain our main game.
And then within here, in case we need to add any additional elements, we're going to have our game
area.
So this is where all of the gameplay is going to take place within here.
And we're just going to leave them blank because relying on JavaScript to fill in all of the elements
and manipulate them and make a game out of it.
So the next thing we want to do is open up our JavaScript area.
So this is when our script tags and select those elements are going to make this bigger because there's
not much to see right now.
And selecting those elements so that we have them in JavaScript objects so that we can make use of them
within our code.
I'm going to use query selector to select the elements you can use select by class name you could use
get element by ID.
So there's a number of different ways to select the elements that we want to manipulate taking in the
score.
So you're going to have that as an object in JavaScript.
We can also have our game area.
So it's an important one.
We're going to utilize these objects throughout the upcoming lessons.
So it is important always to start out to have a good start to it so that you don't have to.
So you can reference them really easily within your script and also will select the game message area
as well, the same way using the query selector and selecting the element by its class name.
So once we have that, usually I like to check just to make sure that we do have those elements selected.
So now if I go into the console, if I type in score, we're going to see an output for Schaus with
selecting the element with the class of square.
Next, selecting our game area object once again, selecting our game area element.
And what it does is it outputs the corresponding element information out into the console and that just
make sure and double checks for us that we have actually selected the correct elements and now we can
use them as objects in JavaScript, manipulate them, apply different functionality to them.
And that's all coming up in the upcoming lessons.
So for now, before the next lesson, open up your editor and create a basic game structure.
So an area where you can communicate with the user, send messaging, also a scoring area and then a
main game play area, and then using JavaScript admin as objects and double check within the console
to make sure that you do have them ready to go and ready to be used in the upcoming lessons within the
code.