1
00:00:00,960 --> 00:00:07,230
All right guys so we have our game and lose case in Win case pretty much complete.

2
00:00:07,230 --> 00:00:15,600
So if we lose our if we win we just get a correct you win if we lose we get three chances in this case

3
00:00:15,870 --> 00:00:18,000
then we get the game over you lost.

4
00:00:18,000 --> 00:00:24,240
So once the game is over we want the option to play again so we're going to go to our game over function

5
00:00:25,500 --> 00:00:31,680
and we're going to go down here and we'll say play again.

6
00:00:32,460 --> 00:00:35,560
And what I want to do is take the gas button.

7
00:00:35,790 --> 00:00:43,890
So guess PTEN and set the value equal to play again.

8
00:00:44,340 --> 00:00:45,010
OK.

9
00:00:45,540 --> 00:00:52,320
And I also want to add a class to it because we need to add a new event handler for this new this new

10
00:00:52,620 --> 00:00:54,380
version of this button.

11
00:00:54,420 --> 00:01:04,420
So we're going to say guess button Daut a class name.

12
00:01:04,680 --> 00:01:14,090
Now I don't want to just said it equals because it already has a class or no it doesn't.

13
00:01:14,100 --> 00:01:21,710
So I guess they could just I guess I could just said it but you know let's just a pen will say plus

14
00:01:21,740 --> 00:01:22,910
equals.

15
00:01:22,910 --> 00:01:23,210
All right.

16
00:01:23,230 --> 00:01:28,510
So we'll append the class play dash again.

17
00:01:29,030 --> 00:01:29,510
All right.

18
00:01:29,720 --> 00:01:32,340
So let's go ahead and win so two.

19
00:01:32,660 --> 00:01:34,270
And we get play again.

20
00:01:34,290 --> 00:01:34,610
All right.

21
00:01:34,610 --> 00:01:41,560
And if we look at the the we inspect this you can see that now we have a class of play again.

22
00:01:41,990 --> 00:01:45,440
OK so now we need an event listener for a play again.

23
00:01:45,440 --> 00:01:53,900
Now remember back in the last section when we talked about event bubbling in event delegation since

24
00:01:53,900 --> 00:02:01,220
this class was added after the page loads we need to use event delegation meaning we have to add the

25
00:02:01,220 --> 00:02:03,200
listener onto a parent.

26
00:02:03,500 --> 00:02:04,000
OK.

27
00:02:04,010 --> 00:02:08,280
And then we need to search for the target that we want which is the play again.

28
00:02:08,630 --> 00:02:12,790
So let's go right above the game over here.

29
00:02:12,980 --> 00:02:15,130
Actually no since it's an event listener.

30
00:02:15,290 --> 00:02:18,630
Let's let's put that at the top.

31
00:02:18,770 --> 00:02:24,920
So go right here and let's say play again.

32
00:02:26,880 --> 00:02:36,440
Eventless sooner so will say game rapper because remember we need to use a parent so they use the game

33
00:02:36,500 --> 00:02:43,050
wrapper and so the whole thing is wrapped in an idea of game which we set Actually I just set it to

34
00:02:43,050 --> 00:02:43,730
game.

35
00:02:43,950 --> 00:02:48,260
I meant to set that game wrapper or we could use game that's fine.

36
00:02:48,600 --> 00:02:53,520
So I just say game Daut out event listener.

37
00:02:54,180 --> 00:03:02,430
OK we want to listen for a mouse down.

38
00:03:02,900 --> 00:03:10,220
Now the reason I'm do actually not to click so I can show you why I'm using Moorestown so I'll say click

39
00:03:12,170 --> 00:03:20,900
call function past in our event object here and now if we console log

40
00:03:24,000 --> 00:03:26,140
one and then anywhere I.

41
00:03:26,200 --> 00:03:29,440
Let's go to our console first.

42
00:03:30,020 --> 00:03:32,660
And when I click in the wrapper.

43
00:03:32,660 --> 00:03:33,480
We get one.

44
00:03:33,500 --> 00:03:33,790
OK.

45
00:03:33,800 --> 00:03:38,530
See that down there we want it to be only if I click play again.

46
00:03:38,600 --> 00:03:49,220
So we're going to have to say if and then and here we're going to see the dot target dot class name

47
00:03:51,050 --> 00:03:56,020
is equal to play again.

48
00:03:56,880 --> 00:04:04,660
Then what we want to do is reload the page OK and we can do that with the window Daut location Daut

49
00:04:05,270 --> 00:04:05,940
reload.

50
00:04:05,970 --> 00:04:08,420
But we looked at that before.

51
00:04:08,420 --> 00:04:09,560
So let's try it out.

52
00:04:09,920 --> 00:04:14,240
So we win and look at that.

53
00:04:14,360 --> 00:04:18,540
It just automatically reloads the page.

54
00:04:18,770 --> 00:04:19,370
It doesn't.

55
00:04:19,370 --> 00:04:23,050
It doesn't stop in and say play again or anything.

56
00:04:23,060 --> 00:04:25,580
So this is because I'm using a click event.

57
00:04:25,580 --> 00:04:35,060
If we change this to mouse down and save and now I when I click Submit now we get the chance to actually

58
00:04:35,060 --> 00:04:39,480
see that we won and we get the chance to mouse down on the play again.

59
00:04:41,020 --> 00:04:47,200
Because what's happening with the click is as soon as we when we click submit that this is it's already

60
00:04:47,200 --> 00:04:49,410
in effect with the play again is already there.

61
00:04:49,470 --> 00:04:55,270
As soon as we release the mouse button then it basically clicks on play again automatically.

62
00:04:55,270 --> 00:05:00,150
So we want it to be just the mouse down not a click OK.

63
00:05:00,790 --> 00:05:04,300
Now if we lose the same thing should happen.

64
00:05:06,520 --> 00:05:10,480
OK so we lost can play again.

65
00:05:10,970 --> 00:05:17,390
So we're pretty much done guys all we need to do now is make the winning number a random number instead

66
00:05:17,390 --> 00:05:18,420
of always two.

67
00:05:18,440 --> 00:05:24,710
So what we're going to do is we're going to set winning number equals to a function called

68
00:05:27,680 --> 00:05:28,710
Get winning numb

69
00:05:31,450 --> 00:05:31,920
OK.

70
00:05:31,940 --> 00:05:33,250
And then we'll go down here

71
00:05:43,990 --> 00:05:49,640
and say function get winning.

72
00:05:50,140 --> 00:05:54,380
Now one thing that I haven't talked about yet is hoisting.

73
00:05:54,380 --> 00:06:01,990
And if you're coming from another programming language it might confuse you that we're able to call

74
00:06:03,430 --> 00:06:10,420
get winning come up at the top and then define it down at the bottom because in a lot of languages you

75
00:06:10,420 --> 00:06:11,200
can't do that.

76
00:06:11,200 --> 00:06:14,620
You have to actually define the function and then use it.

77
00:06:14,830 --> 00:06:17,230
And in javascript we have the functions.

78
00:06:17,260 --> 00:06:21,570
They get something called hoisted where they're actually put to the top.

79
00:06:21,610 --> 00:06:22,180
OK.

80
00:06:22,210 --> 00:06:29,200
When the execution context runs the functions are put to the top and we can so we can call functions

81
00:06:29,200 --> 00:06:31,200
before we actually declare them.

82
00:06:31,390 --> 00:06:37,360
OK I know that that may have been confusing some people but that's just how javascript works.

83
00:06:37,360 --> 00:06:40,030
Javascript is a very strange language.

84
00:06:40,180 --> 00:06:43,170
Relative to other languages.

85
00:06:43,210 --> 00:06:46,390
All right and I plan to talk more about that stuff later on.

86
00:06:46,600 --> 00:06:48,720
But just in case you're wondering.

87
00:06:48,810 --> 00:06:53,070
All right now get winning number see.

88
00:06:53,120 --> 00:07:00,380
So we basically just want to generate a random number between the men and the max so we're going to

89
00:07:00,380 --> 00:07:11,090
pass in min max here and let's go back up top and pass those and so min max actually all these calls

90
00:07:11,120 --> 00:07:17,720
get random number that makes more sense because I mean it's defined as the winning number.

91
00:07:17,740 --> 00:07:27,890
But the function what it actually is doing is getting a random number so change changes to random.

92
00:07:27,950 --> 00:07:28,270
All right.

93
00:07:28,280 --> 00:07:33,440
And then all we're going to do here we have I think we've actually done this to get a random decimal

94
00:07:33,440 --> 00:07:38,250
we can use the math object so let's do a console log

95
00:07:42,930 --> 00:07:49,180
and we'll say math dot ops random and let's save that.

96
00:07:49,190 --> 00:07:52,880
You can see it gives us this random decimal if I reload.

97
00:07:52,880 --> 00:07:56,490
It's going to be just a random decimal.

98
00:07:56,840 --> 00:08:02,150
So what we want to do is we want to multiply this.

99
00:08:02,150 --> 00:08:09,890
So we're going to say times and then we want to open up some parentheses and we want the max.

100
00:08:09,890 --> 00:08:13,840
Take away the men plus 1.

101
00:08:14,030 --> 00:08:14,580
OK.

102
00:08:14,750 --> 00:08:21,230
Now if we did math if we had math at random times 10 it would give us a random number between 0 and

103
00:08:21,230 --> 00:08:22,210
9.

104
00:08:22,220 --> 00:08:27,870
So what we're doing here is we're taking max take away men which is 10.

105
00:08:27,870 --> 00:08:33,200
Take away 1 which would be 9 plus 1 which would be 10.

106
00:08:33,830 --> 00:08:37,130
So this itself will give us between 0 and 9.

107
00:08:37,130 --> 00:08:41,090
So let's save and try and we're going to give us a decimal by the way for now.

108
00:08:41,330 --> 00:08:48,010
But if I keep reloading you'll see 0 up to 9 you won't see 10.

109
00:08:48,020 --> 00:08:52,050
So what we want to do is we want to add the men.

110
00:08:52,130 --> 00:08:55,820
Now we're adding men because it might the men might not be one.

111
00:08:55,820 --> 00:09:00,050
OK we said it to 1 but it could be between five and 10.

112
00:09:00,080 --> 00:09:02,610
All right so you don't want to use plus 1.

113
00:09:02,750 --> 00:09:05,170
You want to use whatever your minimum value is.

114
00:09:05,360 --> 00:09:09,500
So now we save it's going to be between 1 and 10.

115
00:09:09,500 --> 00:09:10,970
You just saw a 10.

116
00:09:10,970 --> 00:09:11,240
All right.

117
00:09:11,240 --> 00:09:18,410
Now obviously we don't want a decimal we want a phone number so we want to wrap this in math Daut floor

118
00:09:18,740 --> 00:09:23,270
which just rounds down OK to a whole numbers.

119
00:09:23,270 --> 00:09:30,230
Now if we save we're going to get a number between 1 and 10 OK.

120
00:09:30,710 --> 00:09:42,640
And if I were to change the values up here like let's say let's say between 15 and 20 and save and keep

121
00:09:42,640 --> 00:09:46,690
reloading you see we'll get something between 15 and 20.

122
00:09:47,110 --> 00:09:49,770
So that's working how it should.

123
00:09:49,780 --> 00:09:50,010
All right.

124
00:09:50,020 --> 00:09:56,670
I'm going to set it back to one in 10 and then down here back to get random number.

125
00:09:56,890 --> 00:10:00,280
We obviously don't want to cancel log this we want to return this

126
00:10:03,190 --> 00:10:06,130
get rid of that ending parentheses.

127
00:10:06,130 --> 00:10:12,360
All right so since we're returning it what we're doing is we're putting that into winning numbers.

128
00:10:12,670 --> 00:10:13,690
So we'll save.

129
00:10:13,810 --> 00:10:18,940
And now the game now too is in isn't the winner at all isn't always going to be the winner.

130
00:10:19,090 --> 00:10:22,530
It's completely random so I'll keep guessing.

131
00:10:22,530 --> 00:10:24,640
I lost the number was eight.

132
00:10:24,640 --> 00:10:26,750
All right I clicked play again.

133
00:10:26,780 --> 00:10:29,720
We can start over.

134
00:10:29,830 --> 00:10:42,150
I'd like to win once at least make sure it's actually working number was three three four.

135
00:10:42,150 --> 00:10:43,670
There you go so far as correct.

136
00:10:43,680 --> 00:10:45,010
You win.

137
00:10:45,840 --> 00:10:47,600
All right guys so that's it.

138
00:10:47,610 --> 00:10:52,950
The game is working how it should all of these rules are now in effect.