This lesson, we are going to be setting up our Temel for our Rock, Paper Scissors game, and then
coming up, we're going to hook in the JavaScript and make things happen when you're building out an
application.
We usually start with the fundamentals.
So the HTML core structure of the application are going to need a spot to place a score.
So add that in also creating a div and I'm just going to simply create some dips for this.
We need a message area so that we can provide messaging to the player and we're going to need some buttons
to create interaction.
So simply create some buttons and I'm going to give all of these buttons different in HTML.
So we've got a button for rock.
We're going to have a button for papers and we're going to have a button for scissors.
So build out the three buttons, add in the labeling for the buttons or the inner text in our HTML.
We can go out and refresh the page.
And this is our basic structure that we're going to need for the gameplay.
The idea is that the player is going to either pick rock, paper or scissors.
The computer is going to roll a random value.
So either rock, paper, scissors and then depending on which one wins, we're going to update the score
accordingly and also output a message for the player in order to be able to understand what happened.
Results of the gameplay next.
Let's add in our JavaScript, they're going to start by setting up some constant variables.
So the first variable that we're setting up is going to be message.
And we're going to attach this as an object into the element with the class of message.
So we're selecting classes with query selector.
It's the same way as we do with success.
So we do the dot notation for a class.
I can make this a little bit smaller because we don't need as much real estate within the browser,
setting up another object four score and that's document you can use query selector again to select
that particular element with the class of score and then we can add that into our JavaScript and we
also want to select all of our buttons.
So using a document and this time we're using query selector all because we want to grab all of the
available buttons.
And as we know within the page, there's three of them.
So if we were to use query selector, we would simply be selecting the first one.
And we want to actually select all of them because we want to have interactivity on all of them.
And they're all within the same format where they're using the button tag.
And what this is going to do is this is going to build a node list of the buttons.
We're going to have to loop through that node list in order to make them interactive, to add event
listeners.
And as you can see, there's our node list of all of the buttons I'm using Chrome.
So whenever I hover over any of these elements within the node list, you see that it also lights up
here in the top with the associated element.
So go ahead and set this up, build out your HTML and then link to that each HTML as objects in JavaScript
and you can be ready to move on to the next step.
We're going to build building out some interaction and adding event listeners to the objects within
the page.
So it's still to come.