Welcome to our first lesson, where we're going to be setting up our game board and then hooking up
our JavaScript to connect to the elements that we've just created, we're going to need a button.
So this is just going to be a regular button which says start.
So our start button next, we're going to need an area to produce some gameplay.
So create a div for that and we can call this game area.
So give it a class a way to identify it and you can leave that blank because we're going to be doing
everything and as much as possible within JavaScript.
And we also need a way to send a message to the player.
So create another div and give this one a class of message.
And this is where we can output message and information to the player as they're playing the game.
Now, within JavaScript, Saulius going to use the script tag.
So opening the script tags, setting up some variables.
First of all, let's set up a variable for that message area using a document query selector.
That's how we're going to select the element from the page.
Make sure that we do a DOT to indicate that this is a class that we are selecting.
Another value that we need is a button.
So we're going to make that button clickable using document and again query selector in order to select
the element that we want it to use.
And in this case, it's just the button tag that we're going to use.
So we don't need any prefix for that.
We can just use button and that will select the button.
And the last element that we created within our jobs, within our HTML is the game area.
So this can be a game area and using once again document.
Query selector and I usually do use query selector because I find it's the easiest one and it's the
most common one.
So if we're using selecting classes, IDs or tags, it's a simple way to make that selection.
And it's very it's a similar to what you find within CSFs.
So that makes it really easy.
So once you've made those selections next, go out into the console and put the contents of button just
to make sure that everything is there and in place.
And you can see that within our console area we can hover over the button content there that's being
put in the console and that's also lighting up that element.
And as well, if we go to inspect, we see that this is the contents of the button within the within
the console.
We're grabbing that button element and that makes us ready to use it in the next lesson.
We're also, you can add interaction to the button and ideally the way that we want the game to be played.
The player comes in, presses the start button, and then the game begins and the objective of the game.
We're going to generate some circles in different areas within the screen and the player has to click
those.
We're going to time to see how long it takes the player to click those and then output that message,
how long or however long it took the player to play and make the click.
That's the message that we're going to be outputting to the to the player.
So all of that is still yet to come.
So go ahead.
Set up your basic HTML file where you've got the button, the message area, the game area, and then
use JavaScript to place all of these elements into usable objects that we can use within the upcoming
lessons and within the scripting.