In this section, we are going to be building out a word scrambling game.
We need to first set up a few elements within our HTML in order to handle some of our JavaScript content.
So selecting out, creating a div with a message.
And this is where we can communicate what the player provides and some message information.
Next, let's create an input so the input type is going to be text.
And this is where the player can enter in the guess of the word.
And then lastly, we've got a button and once again type button and we can just label it.
Guess save that refresh and we've got our guess area.
And this is where the scrambled word will appear within the div.
Now we need to initiate the next part of the game.
And actually this should be start.
And we'll start out with this giving to the class of hidden.
Let's set up a class within our HTML using display property and let's set it to display none.
So we start the game with a start button and next we want to set up our JavaScript so that that button
becomes interactive.
And we can also pass messages to the player and also unhide that input area because that's where the
player needs to enter in their guess.
Set that up in JavaScript using JavaScript objects.
We're going to select the element with the class of message using query selector doing a dot message
to indicate that this is a class that we're selecting.
Next, let's set up and select our input area so we can call it guess using the same format.
So document query selector, we only have one input, so that's our way to identify it.
We only have the one.
And the lastly we've got a button and once again using query selector, we're going to select the element
with the tag of button.
We want to make button interactive.
So selecting a button, adding an event, listener interaction that we want is a click and we'll add
that function directly in here.
So an anonymous function directly within the event listener and always that's a good idea to make sure
that everything is working properly up until this point.
So I'm going to console logout a message of clicked, do a quick refresh hit start and we get clicked.
So coming up next, go ahead and set this up for yourself.
So set up your basic HTML.
Use JavaScript to add the HTML elements as JavaScript objects, set up some scissors if you need to,
as well as adding an event listener so that the button is now interactive.
And coming up next, I'm going to show you how we can start generating out some content for the user
to play the game.
So that's still to come.