1
00:00:01,150 --> 00:00:07,990
In the earlier lessons we've generated using our function maker, we've generated our elements and we've

2
00:00:07,990 --> 00:00:14,200
assigned a class of numb to all of them, and now we want to check to see if the user's guess is correct.

3
00:00:14,200 --> 00:00:18,090
And the objective of the game is to match whatever combination we have.

4
00:00:18,400 --> 00:00:23,740
So we want to do is we want to select all of those elements and we want to loop through them.

5
00:00:23,750 --> 00:00:27,700
We can actually use a const because this is going to be an object that's not going to be changing.

6
00:00:28,480 --> 00:00:34,090
And we can call it numbers using document query selector.

7
00:00:34,090 --> 00:00:36,250
And in this case we're going to do query selector all.

8
00:00:36,370 --> 00:00:41,680
So we're going to generate a node list that contains all of the elements with a class of NUM.

9
00:00:42,900 --> 00:00:48,420
And don't forget the Dust Bowl there to prefect's the name of it, so that indicating that those are

10
00:00:48,420 --> 00:00:54,060
classes that we're looking for and for now we're going to output whatever the value of that node list

11
00:00:54,060 --> 00:00:55,640
is into the console.

12
00:00:55,650 --> 00:00:59,290
So using console log to output that into the console.

13
00:00:59,520 --> 00:01:05,180
So when we press the check combo button, I'll clear that out and press chequerboard button.

14
00:01:05,370 --> 00:01:06,990
We get all of these values.

15
00:01:07,230 --> 00:01:10,050
So now what we want to do is we want to loop through them.

16
00:01:10,240 --> 00:01:11,420
I'm going to use a for loop.

17
00:01:11,470 --> 00:01:15,360
There's a number of different ways that we can loop through these different node lists.

18
00:01:15,930 --> 00:01:18,500
And I got to use a simple for loop for this.

19
00:01:18,930 --> 00:01:24,960
So taking the value of numbers and this is an object, so it has a length assigned to it incrementing.

20
00:01:24,960 --> 00:01:26,130
I buy one.

21
00:01:26,880 --> 00:01:35,250
We can loop through each one of those objects within the node list and we can output it by using numbers

22
00:01:35,850 --> 00:01:37,110
and the index value.

23
00:01:37,140 --> 00:01:42,210
So let's try that one more time and refresh hit start check combo.

24
00:01:42,480 --> 00:01:45,330
And we can see that we're outputting each one of these objects.

25
00:01:45,780 --> 00:01:48,160
So there's two values that we want it to get.

26
00:01:48,180 --> 00:01:51,690
So one is the value that's available within it.

27
00:01:51,960 --> 00:01:57,030
So we see we got one three zero four and there's another value that we want to output as well.

28
00:01:57,180 --> 00:01:59,220
And that's the actual correct value.

29
00:01:59,370 --> 00:02:01,440
And that's sitting under element.

30
00:02:01,440 --> 00:02:02,040
Correct.

31
00:02:02,250 --> 00:02:05,040
So if we want to output that value, it's not value.

32
00:02:05,040 --> 00:02:06,040
It's going to be correct.

33
00:02:06,330 --> 00:02:13,470
So now you see that when I press it and check combo, we get all of those values looping through and

34
00:02:13,470 --> 00:02:14,230
outputting here.

35
00:02:14,400 --> 00:02:19,830
So now it's just a matter of checking to see if they are correct and providing a response back to the

36
00:02:19,830 --> 00:02:20,220
player.

37
00:02:20,340 --> 00:02:24,810
And if they do get all of them correct, then they've won the game and they found the combination.

38
00:02:24,810 --> 00:02:29,130
And then we're going to loop it back to start again and have a fresh no color combination.

39
00:02:29,370 --> 00:02:31,580
And this is built out to be fully dynamic.

40
00:02:31,770 --> 00:02:38,340
So in case they want to have more than four numbers, they can always increment this value and have

41
00:02:38,340 --> 00:02:41,880
as many numbers here within the combination as they wish.

42
00:02:42,090 --> 00:02:46,350
And we can also track how many tries they have within a scoring factor.

43
00:02:46,470 --> 00:02:49,010
And we're build all of that out in the upcoming lessons.

44
00:02:49,200 --> 00:02:54,390
So for now, make sure that you have the ability to output the value, make sure you have the ability

45
00:02:54,390 --> 00:02:55,980
to output the correct value.

46
00:02:56,190 --> 00:03:01,770
Looping through all of the elements with the class of num num is what we assign there when we were building

47
00:03:01,770 --> 00:03:09,480
these out and build in a condition to check each one of those as we iterate through or make this bigger,

48
00:03:09,480 --> 00:03:11,370
because it's going to be a fairly long statement.

49
00:03:11,610 --> 00:03:14,280
We're checking to see if these values match.

50
00:03:15,730 --> 00:03:21,610
And also wanted to indicate one thing here as well, so notice that we've got one as a string and one

51
00:03:21,610 --> 00:03:22,360
as a number.

52
00:03:22,540 --> 00:03:28,480
So that's why we just keep using the two equal signs there, because one of them is being output as

53
00:03:28,480 --> 00:03:30,960
a string and one is being output as a number.

54
00:03:31,510 --> 00:03:37,810
So just keep that in mind that within the input fields, we're always returning back string values.

55
00:03:38,050 --> 00:03:43,270
And because we set it within a as an object, we're returning it back as an object there.

56
00:03:44,260 --> 00:03:49,990
So going back into here, we're checking to see if they match and if they do match that we want to do

57
00:03:49,990 --> 00:03:51,370
something with that match.

58
00:03:52,240 --> 00:03:53,530
So using the.

59
00:03:55,230 --> 00:03:56,130
Curly bracket.

60
00:03:57,200 --> 00:04:05,510
We can get rid of that extra line there and will consult log and will output match and if it doesn't

61
00:04:05,510 --> 00:04:09,110
match, then we're going to have an else statement and no match.

62
00:04:10,520 --> 00:04:12,020
So try that one more time.

63
00:04:12,200 --> 00:04:19,220
And this is the foundation for our logic that we're going to use in the upcoming lesson in order to

64
00:04:19,400 --> 00:04:22,400
demonstrate to the user if they've got a match or not.

65
00:04:22,670 --> 00:04:25,160
So right now, obviously, everything should be matching.

66
00:04:25,340 --> 00:04:29,690
We're going to update some of these values so that they're not actually matching.

67
00:04:30,560 --> 00:04:35,740
And I'll clear that out, so we see that we've got no match for the first one, no match for the second

68
00:04:35,740 --> 00:04:38,690
one, no match for the third one, and a match for the last one.

69
00:04:38,870 --> 00:04:44,260
And of course, as we put it into production, we're going to get rid of showing the correct values.

70
00:04:44,270 --> 00:04:48,560
But while we're testing it out and building it out, it's always a good idea to be able to see these

71
00:04:48,560 --> 00:04:51,540
values so that we know that our code is working properly.

72
00:04:51,740 --> 00:04:57,140
So that is still yet to come where we're going to zero these values and have a bunch of zeros here instead

73
00:04:57,140 --> 00:05:01,440
of the right values and then let the user try to guess the combination.

74
00:05:01,940 --> 00:05:07,040
So I didn't the logic into your application where we're checking to see if these values match.

75
00:05:07,190 --> 00:05:13,330
And coming up next, we're going to present to the user if there's no match and also introducing scoring.

76
00:05:13,340 --> 00:05:14,390
So that's all still to come.