In the earlier lessons we've generated using our function maker, we've generated our elements and we've
assigned a class of numb to all of them, and now we want to check to see if the user's guess is correct.
And the objective of the game is to match whatever combination we have.
So we want to do is we want to select all of those elements and we want to loop through them.
We can actually use a const because this is going to be an object that's not going to be changing.
And we can call it numbers using document query selector.
And in this case we're going to do query selector all.
So we're going to generate a node list that contains all of the elements with a class of NUM.
And don't forget the Dust Bowl there to prefect's the name of it, so that indicating that those are
classes that we're looking for and for now we're going to output whatever the value of that node list
is into the console.
So using console log to output that into the console.
So when we press the check combo button, I'll clear that out and press chequerboard button.
We get all of these values.
So now what we want to do is we want to loop through them.
I'm going to use a for loop.
There's a number of different ways that we can loop through these different node lists.
And I got to use a simple for loop for this.
So taking the value of numbers and this is an object, so it has a length assigned to it incrementing.
I buy one.
We can loop through each one of those objects within the node list and we can output it by using numbers
and the index value.
So let's try that one more time and refresh hit start check combo.
And we can see that we're outputting each one of these objects.
So there's two values that we want it to get.
So one is the value that's available within it.
So we see we got one three zero four and there's another value that we want to output as well.
And that's the actual correct value.
And that's sitting under element.
Correct.
So if we want to output that value, it's not value.
It's going to be correct.
So now you see that when I press it and check combo, we get all of those values looping through and
outputting here.
So now it's just a matter of checking to see if they are correct and providing a response back to the
player.
And if they do get all of them correct, then they've won the game and they found the combination.
And then we're going to loop it back to start again and have a fresh no color combination.
And this is built out to be fully dynamic.
So in case they want to have more than four numbers, they can always increment this value and have
as many numbers here within the combination as they wish.
And we can also track how many tries they have within a scoring factor.
And we're build all of that out in the upcoming lessons.
So for now, make sure that you have the ability to output the value, make sure you have the ability
to output the correct value.
Looping through all of the elements with the class of num num is what we assign there when we were building
these out and build in a condition to check each one of those as we iterate through or make this bigger,
because it's going to be a fairly long statement.
We're checking to see if these values match.
And also wanted to indicate one thing here as well, so notice that we've got one as a string and one
as a number.
So that's why we just keep using the two equal signs there, because one of them is being output as
a string and one is being output as a number.
So just keep that in mind that within the input fields, we're always returning back string values.
And because we set it within a as an object, we're returning it back as an object there.
So going back into here, we're checking to see if they match and if they do match that we want to do
something with that match.
So using the.
Curly bracket.
We can get rid of that extra line there and will consult log and will output match and if it doesn't
match, then we're going to have an else statement and no match.
So try that one more time.
And this is the foundation for our logic that we're going to use in the upcoming lesson in order to
demonstrate to the user if they've got a match or not.
So right now, obviously, everything should be matching.
We're going to update some of these values so that they're not actually matching.
And I'll clear that out, so we see that we've got no match for the first one, no match for the second
one, no match for the third one, and a match for the last one.
And of course, as we put it into production, we're going to get rid of showing the correct values.
But while we're testing it out and building it out, it's always a good idea to be able to see these
values so that we know that our code is working properly.
So that is still yet to come where we're going to zero these values and have a bunch of zeros here instead
of the right values and then let the user try to guess the combination.
So I didn't the logic into your application where we're checking to see if these values match.
And coming up next, we're going to present to the user if there's no match and also introducing scoring.
So that's all still to come.