Welcome in this lesson, we're going to be setting up our reaction games, first thing that we need
is a mean container, so setting up a class and this is where all of the game play will take place.
Also within here, adding in an element that we can contain the score with him.
So setting up another div, giving it a class of score so we can access it using our JavaScript.
And then one last element that we're going to need and giving it a class of button so we can style it
as a button start game here.
Also adding in some styling to make this look a little bit better.
So making it look more like a button, do a center text allowing for that as well, just trying to make
it look more like button.
So setting up a border radio.
Then lastly, let's center it.
So do a margin auto.
Also do some styling for the container.
Should be the full size of available space that we have for us and margin auto so we can center that
element as well.
Let's also add some styling for skort.
You can add in a default value for score of zero.
So we've got our default value there.
Four score and let's center this one as well.
It's doing a margin.
Auto will center that element.
So now that we've got our core S.O.S and HTML set up, let's use JavaScript in order to select our elements.
So setting up some objects in order to contain that element, content can use document query selector
to select the element, selecting the element with the class of container.
And when you refresh, just to make sure that we did select the right element, we see we do have our
container now as a JavaScript, we've got a start game option and we only have one element.
So again, we can use query selector and selecting that element with score.
I said this would be a start game and then we'll do one more four.
So if the class of start game.
And then lastly, let's do one more for the score area.
I'll call it score area so that we can have another variable four score.
And lastly, let's set up an object for a player will have a score and we can utilize this as we build
out our application.
So this is a global object that we can make use of.
So once you've set that up, we're ready to add some functionality into the button as well as begin
the gameplay.
So that's all still coming up in the next lessons.
So go ahead and open up your editor, create some elements on the page, apply some styling.
You can customize the styling and then select those elements using JavaScript and make sure that they
are selected properly by adding in and referencing it into the console so that you make sure that you
do have those correct elements and you're ready to move on to the next part of the project.