Welcome in this lesson, we are going to be setting up our game board for the coin toss game that we're
going to be creating in the upcoming lessons.
So let's set up our HTML.
We're going to need a div that's going to be our div where we're going to communicate to our player.
We can use a class of message and have some message information in here.
Next, we're going to need some options.
So I set up a button, regular type button and this button can be heads and I'll duplicate this and
create another one that will be tails.
So these are the options that the player has in order to select whether the coin is going to be heads
or tails.
Let's refresh.
And we've got a choice here, heads or tails, and this will initiate our gameplay within the script.
Let's set up our variables to hold our values, setting up an object for message use the document query
selector in order to make a selection of that element.
And the element that we're selecting is a class.
So make sure you put the DOT message the same way as you would with us.
And if we save that refresh, go into our console.
We have a variable called message.
So we have a message object and you can see that it relates down to that HTML element.
And if we were to type in our text to it, we can update the entire text that's contained within there.
And that's what we want to do.
We want to be able to send messages to the player in order to provide progress on the gameplay.
Next, let's select our button and we can call this one buttons, selecting the elements from the page
using query selector.
And this time we're going to use query selector, all because we have more than one element that we're
selecting and we're going to create a node list with the contents of these elements.
We can output that into the console as well.
So buttons refresh and you can see that now we do have a node list because we do have two button elements.
And even if we only had one, we would still generate a node list.
So node list is very similar to an array.
It's a zero based value where it starts with zero.
So the first item is zero.
And you can see that it contains that same element information, except it's within this node list.
So we have to navigate to the different items in order to apply any of the changes to those elements
using JavaScript.
And then this is the second one.
You can see the difference here is we've got a different inner HTML as well.
We still have a lot of the same properties and the outer text is tails and the inner the text content
is tale's as well.
So we can use the content of these elements and determine which button was clicked, attaching an event
listener to these buttons.
And I'm got to show you how to do that in the upcoming lessons.
Where are we going to create our interaction for our gameplay?
So go ahead and set up your HTML, set up a message area, couple of buttons using the button elements
and then use JavaScript to connect to those elements, selecting those elements from the DOM into JavaScript
objects that we're going to use in the upcoming lessons in order to produce our gameplay.