This lesson, we're going to start working through how to play the game, so so far in our game, we've
got some content, some HTML elements here and we've got interactive buttons.
So there's a few things that are missing.
So logically, what we're doing is we're starting the game, pressing the start button.
So we want to make sure something is happening here right off the bat starting.
So we're setting up a temporary variable.
We're selecting the information from the target element and getting that inner text that was contained
within that target element.
And if I console logout that information and before we try that out, we need to make sure we're passing
over that event content.
And I'm going to instead of clicked, I'll pass on that event object as E so let's refresh hit start.
And you can see that we've got a mouse event and we are also we know which element triggered the event
and we're selecting that using E target.
So that's the target element that triggered off the event.
And then within each one of these target elements, we can see we can select that inner text there.
So that inner text is what's appearing under temp.
Now that we have our inner text, we can use that in a condition, checking to see what the value of
the inner text is.
We know that we've got a start button.
And if we want something to happen, when someone presses the start button, this is how we can do that,
where we can say, you clicked start and we can run a block of code here associated with starting the
game.
So we hit start.
You see, we clicked start.
So we're ready to continue to build out some of the gameplay.
We want to toggle these buttons.
So we want to hide the higher and lower and we want to show the start button.
So let's start by doing that where we'll set up a function and we'll just call this toggle buttons,
create our function, toggle buttons, the different buttons to take a look at the classes that they
have available within the buttons.
So for now, we can console logout, we can select the select the button object because we've got all
of the buttons within the constant variable button will select the second one because we know that this
is going to have a class of hide button.
So we do want to see that class list.
So selecting out the class list from that second button, when we refresh the page hit start, you can
see that now we've got a value of hide button is what's available within the class list and we can toggle
that class list.
So this is another method that's available in JavaScript and allows us to toggle a particular value
that's available within the classes.
And the value that we want to toggle is hide button.
And what toggle is going to do is if it's available there, then we're going to remove it.
And if it's not there, then we're going to add it in.
So basically, if we once we apply some styling to hide button where we can set it to display none,
you're going to see that buttons are going to hide.
And so as we toggle them so I do a quick refresh and we see that right now it's returning back false
because this value is present and now we've removed it.
And if we hit it again this time, it's true because it's added in there.
And if you go into the TEMEL, if we do inspect on the HTML, you can see that that particular element,
the one that's got the text of higher when we click start, it's removing that from the class list,
the class hide button, and it's adding it in and that's what toggle is doing.
So what we want to do is ultimately we want to toggle all of the buttons.
There's a number of ways that we can do that.
We can list out all three or we could list them out within a loop.
So for now, what I'll do is I'll list all three of them out.
And what's going to happen now when I hit start is the hide button is going to be added to the start
and it's going to be removed from higher and lower.
And that means that we need to go into our style and apply display none.
So selecting our style file, using display properties and we'll just do a display.
None.
So now when I refresh it, by default, the higher and lower is gone.
When I hit start, the higher lower appears and the start disappears.
And that's exactly what we want for our gameplay because that means the game has started and we're going
to show a card here that is going to be displayed to the player.
We also have to provide some more additional instructions to the player.
So let's update that update our message object in our HTML.
We can set that to higher or lower.
And that's going to be displayed to the player also take our game play, select our entire team.
We're going to clear out anything that's available within our inner turmoil because we're starting a
fresh brand new game.
And this will give us the ability to replay the game.
And we'll also set up a function here, because this is where we want to make a card and we want to
make whatever the value of my card is.
So we need to set up a function to house make a card, which for now, it's not going to do a whole
lot because that would be a blank, empty function as a placeholder, because we need to know what the
card is.
So before we make a card, we need to draw a card.
So we can set a value of my card is equal to whatever gets returned back from, draw a card and we'll
set up a function that's going to allow us to draw new cards.
So set that one that function up as well.
So draw a card.
So now we've got our basic structure.
When the player comes in to the game, they see a start button, they click the start button.
We set up all of the event listeners here for the buttons and we're sending them all over to a function
called Play Game.
Within Play Game, we select our target element and we get our inner text from the target.
So basically we're getting the content of the button that triggered the event.
Click.
We need to draw a card because we need to have a card within play.
And if we don't have a card within play, then we're not going to be able to show anything to the player.
So that's the first thing that we need to do, is draw a card, will set up a function, a blank function
in order to handle that.
And we'll set that up in the upcoming lessons.
And we also are selecting the temp and we're checking to see if it's equal to start.
And we know that if it's equal to start, then we're starting the game.
We update the message to the player.
We see either higher or lower.
We also update the gameplay area to clear out any of that inner HTML.
We make a card and we also toggle the buttons.
So the buttons are something that we can toggle between the different views where by default we start
out with seeing the start button and then we toggle them to see the higher and lower.
And once we want to start the game again, that we're going to toggle this function once again, hiding
the higher and lower buttons and showing the start button.
So this is our quick and easy way to toggle those buttons and add in and remove all those classes from
those buttons.
So coming up next, we need to still build out a deck of cards.
We need to be able to draw a card.
And we also need to be able to visually make a card for the player.
So quite a bit to come.
And that's coming up in the upcoming lessons.
So go ahead and build this out now.
Have your buttons working, toggle buttons, practice, working with class list and update classes that
are available within the active elements.