Hello and welcome this lesson, we're going to construct our HTML, add some success, and then start
connecting our JavaScript to document object in order to prepare to build our game.
So the first thing we're going to do is open up our editors, create an indexed HTML.
This is just a regular standard HTML template.
So I've got style head, body and script tags.
So we're going to do this as a one page application.
So all of the code will be sitting within indexed HTML.
We need to create some divs.
This is going to be our main div where we're going to house all of the information and the inputs and
all of the gameplay for the user.
We also need to create some information for the user so we can have a message area for one, adding
in a class of message where we can output message and contents to the user.
We also need an input.
So creating an element, give it a type of number as the user is going to be guessing a number.
And lastly, we do need to have a button.
So this is what the user is going to press in order to make their guess on the number that looks like
that's all the HTML we're going to need and the rest we're going to do in JavaScript.
So opening up within our script area, we're going to select these elements so that we can make use
of them within our code.
So first of all, construct an element, give it a value, a name of output using document query selector.
We're selecting the element with a class of output and outputting it into the variable called output.
And we're going to do the same for the other contents that we have on the page.
So we've got a message area.
So let's construct that message area, selecting it by class.
If you're using query selector all, if you have multiple elements with the same class, it's going
to select the first one and the same thing with query selector.
So if we had multiple classes of output, we would automatically select the first one that appears on
the page.
This is our input.
So this is essentially what the user is going to guess.
And let's call that gets input.
We're selecting it via the input tag so we don't have to be more specific because we only have the one
input.
If you add more than one input you could selected by the name, you could add in a name in order to
distinguish it.
And you can also selected by the type as well.
Also a button.
And we only have one button tag so we can use the query selector button for the tag name.
Usually I do like to go into the console just to make sure that I am getting the elements properly before
I try to use them in JavaScript and see these are all the elements that we created as objects in JavaScript
and typing them into the console will make sure that you've got them as an object that you can utilize
and we're going to make use of those in the upcoming lessons.
So we have our basic structure.
We have a message area, we have a no input, no.
And we also have a button in order to create interaction for the user.
So we're all ready to move on to the next step.
We're going to build the game content and the gameplay.
So that's coming up.
So first, go into your editor and set up your basic structure, connect your JavaScript objects to
your HTML.
You're going to be ready to move on to the next lesson.