This lesson, we're going to be setting up our e-mail and then connecting it to our JavaScript to render
out our safe cracking combination game, we need a mean container and give it a class of game.
So this is where all of our gameplay will happen.
Next, we need to have a button and this button.
So this will just be a type button and they're going to give this button initial value of start.
So when we refresh the page, we see a start button and that's where the player's going to start playing
the game.
Let's set up some variables to hold those values.
I call it game area using document query selector selecting that game class element into our game area.
Object in JavaScript.
Also, our button is in the same format with document query selector selecting the button element.
Next, we want to make the button element clickable.
So using button, we're adding an event listener to that button using a click event.
And the function that we're going to be invoking.
This is going to be anonymous function directly within that button element.
We're also going to set up a variable so we'll go variable and this one actually is going to change.
So we're going to use let we'll call it game play and by default, we'll set it to false.
When we click the button, we're going to check to see what the value of gameplay is.
And if the gameplay is currently false, then we're going to set gameplay to true.
And this is going to be how we're going to check to see if our button got clicked for the first time
of our start button got clicked for the first time.
And if it did get clicked for the first time, we're going to take that content of the button.
So update the inner HTML of the button or enter text of the button to try that out.
So refresh hit start and now we have check combo and now we're not doing any additional content to this
gameplay because we're currently in play.
So the game is in play so we can use an air conditioner and output in the console.
And this is where we're going to be checking to see if the player generated the right combination.
So you can see now when I click it the second time, so our buttons actually changed and the functionality
of our button has changed dynamically as well.
And we've only attached that one event listener.
And this is all going by how many times we've iterated through.
So we're using variables really to control how our gameplay progresses.
So go ahead and set this up within your own Ed, setting up a game area so that you can play the game
and we're going to generate all of the HTML elements using JavaScript in the upcoming lesson.
I'll show you how to do that.
We've also got our button.
So this is our main button to create all the interaction for the game.
We only need one button and initially it's going to start.
And then once the game is in play, then it's going to be checking the combination every time the player
passes check combination.
So all of that is still yet to come in the upcoming lessons.