Are you ready to apply some game logic visually, we have most of what we need and most of the functionality,
but we don't have a working game.
We have the word, we have it being displayed visually to the player.
We also have clickable letters and they only can be clicked once because we're removing the event listener
after they get clicked and because we've already appended them to output, too, we can select them
and using documents, query selector and we're doing a query selector all.
We're going to select all the elements with a class of letter two.
So these are all the ones that we created earlier as we were looping through the player solution.
We created a bunch of divs there, appending them because we need to have ability to loop through all
of these letters to check, to see if the letter that got clicked is going to match any of the letters
that we have in our output.
And if it is, then we want to write that in.
So that's what we need to loop through those values.
And we can do that within that handler function that we created is taking our solution letter, looping
through, using for each selecting the function.
And this could also be letter one letter and enter.
HTML is not equal to the underscore, and if it's not equal to it, that means that there's a letter
that calculate out the solution, add up a variable, and this is going to count how many letters the
player has.
Right.
So as we loop through and we need to write in the letters here, so it's not going to be just an underscore.
We need to write in a letter actually in there.
So let's do our check to see if the letter that the player selected and we have that value in temp already.
So checking to see if letter and my letter value.
So remember over here when we were building out that letter to we were hiding within the object of value
of my letter, which equaled the letter of the output.
So we can use that now and check that and we need to turn it to uppercase so that they're all matching
uppercase values.
So it's a JavaScript function to to uppercase that.
And we're going to check to see if it's equal to temp.
And if it is, then we know that the player got something right.
So we need to update the inner HTML of that layer object or it could be in our text as well to temp.
So let's see what happens now.
So Head Start and we know what our word is.
JavaScript, when I hit a we see both of the A's fill out G v.
S, and I think I know what the solution is.
JavaScript, of course, very timely to be placed within our course.
So JavaScript, so we got everything right.
And we do have a count of how many letters are correct.
So that leads to the next part where we can provide some type of output for the player that's interacting
with the content.
So that's the next piece of logic that we need to add in.
We need to be able to check to see if the player's solved it, as well as more messaging to the player
so they know what is happening during the gameplay.
So that's still to come in the upcoming lesson.
So now go ahead and add in the logic to check to see if the player selected the right letters.