1
00:00:03,530 --> 00:00:06,090
In the previous exercise,

2
00:00:06,090 --> 00:00:08,370
we saw how we can leverage

3
00:00:08,370 --> 00:00:11,820
the JavaScript-based controls
that are provided for

4
00:00:11,820 --> 00:00:14,820
the Bootstrap
JavaScript components

5
00:00:14,820 --> 00:00:18,240
in order to control
the behavior of the components.

6
00:00:18,240 --> 00:00:23,370
In particular, we saw the
use of the carousel and

7
00:00:23,370 --> 00:00:25,140
how we were able to introduce

8
00:00:25,140 --> 00:00:26,880
two buttons to control

9
00:00:26,880 --> 00:00:29,190
the cycling behavior
of the carousel.

10
00:00:29,190 --> 00:00:33,645
Now, I'm not fully satisfied
with that implementation.

11
00:00:33,645 --> 00:00:36,510
I would like to now
collapse the whole thing

12
00:00:36,510 --> 00:00:39,270
into one single button
that can both

13
00:00:39,270 --> 00:00:42,690
indicate the current behavior of

14
00:00:42,690 --> 00:00:46,625
the carousel and also be able
to control the carousel.

15
00:00:46,625 --> 00:00:50,225
So let's see how we can leverage

16
00:00:50,225 --> 00:00:53,180
further jQuery code in order

17
00:00:53,180 --> 00:00:56,800
to achieve this,
in this exercise.

18
00:00:56,800 --> 00:01:00,575
To achieve that, we'll
go back to the code

19
00:01:00,575 --> 00:01:03,995
in index.html where we
defined the two buttons.

20
00:01:03,995 --> 00:01:08,960
I'm going to now
remove this div for

21
00:01:08,960 --> 00:01:11,135
the button group because
we are going to have

22
00:01:11,135 --> 00:01:14,510
only one single button
instead of two buttons.

23
00:01:14,510 --> 00:01:18,620
So I have removed the div
around the two buttons.

24
00:01:18,620 --> 00:01:20,660
I'm also going to delete
one of the buttons,

25
00:01:20,660 --> 00:01:22,415
because we're going to work with

26
00:01:22,415 --> 00:01:25,640
just a single button
for this exercise.

27
00:01:25,640 --> 00:01:28,640
So let me change the indentation.

28
00:01:28,640 --> 00:01:32,450
So now, this particular
button that we have there,

29
00:01:32,450 --> 00:01:36,090
I'm going to rename
this button as carouselButton.

30
00:01:37,120 --> 00:01:40,580
We will start out with
this button being

31
00:01:40,580 --> 00:01:43,940
a button with the pause icon.

32
00:01:43,940 --> 00:01:46,280
We're going to flip the icon for

33
00:01:46,280 --> 00:01:49,235
this button through
JavaScript code.

34
00:01:49,235 --> 00:01:50,750
So how do we do that?

35
00:01:50,750 --> 00:01:53,480
Taking a look at our web page,

36
00:01:53,480 --> 00:01:56,855
we'll now see that we have
one single button here,

37
00:01:56,855 --> 00:02:00,830
which is currently
indicating the pause there.

38
00:02:00,830 --> 00:02:05,530
Now, my hope at the end
of this exercise

39
00:02:05,530 --> 00:02:07,580
is to turn this button into

40
00:02:07,580 --> 00:02:10,730
a single control whereby
if I click on this button,

41
00:02:10,730 --> 00:02:15,210
it will pause the cyclic
behavior of the carousel,

42
00:02:15,210 --> 00:02:17,120
and then simultaneously turn

43
00:02:17,120 --> 00:02:19,790
this button into a play button,

44
00:02:19,790 --> 00:02:21,590
meaning that this icon will

45
00:02:21,590 --> 00:02:23,705
be replaced with the play icon.

46
00:02:23,705 --> 00:02:27,170
So that this single button
indicates what

47
00:02:27,170 --> 00:02:29,090
the current state of

48
00:02:29,090 --> 00:02:33,400
the cyclic behavior of my
carousel is. How do we do that?

49
00:02:33,400 --> 00:02:34,940
We need to go and edit

50
00:02:34,940 --> 00:02:38,010
the JavaScript code in
order to achieve that.

51
00:02:38,010 --> 00:02:41,240
Going down to the JavaScript code

52
00:02:41,240 --> 00:02:43,910
at the bottom of index.html page.

53
00:02:43,910 --> 00:02:47,450
So here, we had
this script that we had

54
00:02:47,450 --> 00:02:49,580
included earlier in order

55
00:02:49,580 --> 00:02:52,325
to activate
the two buttons there.

56
00:02:52,325 --> 00:02:54,980
I'm going to edit this code

57
00:02:54,980 --> 00:02:58,685
to make use of that single
button that we have there.

58
00:02:58,685 --> 00:03:00,860
So coming down here,

59
00:03:00,860 --> 00:03:01,910
I'm going to remove

60
00:03:01,910 --> 00:03:03,950
this second part because we

61
00:03:03,950 --> 00:03:06,190
only have one single
button now here,

62
00:03:06,190 --> 00:03:08,575
which is the carouselButton,

63
00:03:08,575 --> 00:03:10,630
and whenever that is clicked,

64
00:03:10,630 --> 00:03:14,555
you need to do something
in response to doing that.

65
00:03:14,555 --> 00:03:16,400
So if the carousel button is

66
00:03:16,400 --> 00:03:18,640
clicked, then what do you do?

67
00:03:18,640 --> 00:03:22,370
Now, fortunately, depending on

68
00:03:22,370 --> 00:03:26,630
whether the button is
a Play button or a Pause button,

69
00:03:26,630 --> 00:03:29,170
we'll be able to take
an appropriate action.

70
00:03:29,170 --> 00:03:30,620
But how do we know whether it

71
00:03:30,620 --> 00:03:32,300
is a Play button
or a Pause button?

72
00:03:32,300 --> 00:03:35,960
So this is where we're
going to make use of

73
00:03:35,960 --> 00:03:39,005
some jQuery code in order to

74
00:03:39,005 --> 00:03:42,890
identify whether this is a play
button or a pause button.

75
00:03:42,890 --> 00:03:45,230
To help us to identify this,

76
00:03:45,230 --> 00:03:50,750
we're going go inside here
and then use an if statement,

77
00:03:50,750 --> 00:03:53,255
and inside there,
I'm going to test

78
00:03:53,255 --> 00:03:56,585
to see whether this is
a play or a pause button.

79
00:03:56,585 --> 00:03:59,010
So here I say,

80
00:04:00,550 --> 00:04:08,955
carouselButton.children span.

81
00:04:08,955 --> 00:04:10,530
So which means that,

82
00:04:10,530 --> 00:04:12,115
for this carousel button,

83
00:04:12,115 --> 00:04:19,380
inside where if there is
an element with the span tag,

84
00:04:19,380 --> 00:04:22,790
so we obviously know that
in our carousel button,

85
00:04:22,790 --> 00:04:24,620
we had the span tag which

86
00:04:24,620 --> 00:04:28,910
contained the Font
Awesome icon there.

87
00:04:28,910 --> 00:04:31,025
So for that span tag,

88
00:04:31,025 --> 00:04:34,440
we're going to check hasClass.

89
00:04:36,020 --> 00:04:39,540
So we're going to
check this hasClass,

90
00:04:39,540 --> 00:04:42,020
and then the class
that we're going to

91
00:04:42,020 --> 00:04:46,440
check for is fa-pause.

92
00:04:46,910 --> 00:04:49,170
So which means that,

93
00:04:49,170 --> 00:04:53,445
if the span tag has
the fa-pause class,

94
00:04:53,445 --> 00:04:55,760
then we know that this button is

95
00:04:55,760 --> 00:04:58,085
currently acting as
the pause button.

96
00:04:58,085 --> 00:05:00,770
So obviously, when
the button is clicked,

97
00:05:00,770 --> 00:05:03,135
the user is expecting that

98
00:05:03,135 --> 00:05:07,195
the cyclic behavior
should be paused.

99
00:05:07,195 --> 00:05:09,200
So that's what we identify here.

100
00:05:09,200 --> 00:05:11,480
So you now see that
we are writing

101
00:05:11,480 --> 00:05:15,260
some more advanced
JavaScript code using

102
00:05:15,260 --> 00:05:19,775
the jQuery syntax in order
to make this work correctly.

103
00:05:19,775 --> 00:05:23,615
So inside here, so
what do I need to do?

104
00:05:23,615 --> 00:05:27,105
Now, so which means
that if the button

105
00:05:27,105 --> 00:05:31,605
is currently a Pause button,

106
00:05:31,605 --> 00:05:34,615
then, obviously when
the button is clicked,

107
00:05:34,615 --> 00:05:37,250
you want to pause the carousel.

108
00:05:37,250 --> 00:05:41,825
Then, in addition, we want
now to be able to flip

109
00:05:41,825 --> 00:05:48,680
that icon from a pause
icon to a play icon.

110
00:05:48,680 --> 00:05:50,750
So what we will do is,

111
00:05:50,750 --> 00:05:53,540
we will say right
there after this,

112
00:05:53,540 --> 00:06:11,175
we'll say
$carouselButton.children span,

113
00:06:11,175 --> 00:06:15,330
and then we'll say, removeClass.

114
00:06:15,330 --> 00:06:23,915
So we're going to
remove the pause class.

115
00:06:23,915 --> 00:06:25,990
So notice how this works.

116
00:06:25,990 --> 00:06:29,185
We're going to remove the
pause class from that,

117
00:06:29,185 --> 00:06:33,990
and then, we're going
to add the playClass.

118
00:06:33,990 --> 00:06:38,170
So that way your
button's icon is now

119
00:06:38,170 --> 00:06:42,370
going to be flipped from a
Pause button to a Play button.

120
00:06:42,370 --> 00:06:45,250
So we're going to
remove the pauseClass.

121
00:06:45,250 --> 00:06:48,340
I'm going to just
copy this code and

122
00:06:48,340 --> 00:06:49,960
then paste it right

123
00:06:49,960 --> 00:06:52,300
there and then do
the edit to this code.

124
00:06:52,300 --> 00:06:55,930
Same thing, for the carouselButton
for the children span,

125
00:06:55,930 --> 00:06:58,855
I'm going to instead
now of the removeClass,

126
00:06:58,855 --> 00:07:03,355
I would say addClass,
and then fa-play.

127
00:07:03,355 --> 00:07:05,800
So that way, what
we are doing is,

128
00:07:05,800 --> 00:07:07,765
we are flipping that button from

129
00:07:07,765 --> 00:07:10,695
a Pause button to a Play button.

130
00:07:10,695 --> 00:07:16,310
Also, we are pausing

131
00:07:16,310 --> 00:07:19,355
the cycling behavior
of the carousel.

132
00:07:19,355 --> 00:07:22,795
Now, if this is
not the case then,

133
00:07:22,795 --> 00:07:24,870
it should be a Play button so

134
00:07:24,870 --> 00:07:30,060
the opposite effect
should be introduced.

135
00:07:30,060 --> 00:07:33,815
Then, I'm going to
simply copy this code,

136
00:07:33,815 --> 00:07:38,900
and then do the other tests
for the situation

137
00:07:38,900 --> 00:07:44,105
where the button is a playButton.

138
00:07:44,105 --> 00:07:49,020
So I would say else,
now obviously,

139
00:07:49,020 --> 00:07:54,750
I don't need this if here
but just to be doubly sure,

140
00:07:54,750 --> 00:07:57,220
I'm going to put that in there.

141
00:07:58,060 --> 00:08:00,830
Because there are
only two possibilities,

142
00:08:00,830 --> 00:08:02,750
either it's a Pause
button or a Play button,

143
00:08:02,750 --> 00:08:06,530
but just for my reassurance,

144
00:08:06,530 --> 00:08:10,010
I'm going to put that
as an fa-play there.

145
00:08:10,010 --> 00:08:12,950
Now inside there,
I'm going to change

146
00:08:12,950 --> 00:08:16,530
this from pause to cycle.

147
00:08:16,530 --> 00:08:18,230
Because from
the previous exercise,

148
00:08:18,230 --> 00:08:19,700
you remember that if you want

149
00:08:19,700 --> 00:08:21,575
the cycling behavior to resume,

150
00:08:21,575 --> 00:08:29,205
you would have to set
the carousel action to be cycle.

151
00:08:29,205 --> 00:08:33,840
Then similarly, for
the remaining two statements,

152
00:08:33,840 --> 00:08:37,875
I am going to remove
the playClass

153
00:08:37,875 --> 00:08:42,715
and then add the pauseClass.

154
00:08:42,715 --> 00:08:48,095
So notice how we are
using a little bit of

155
00:08:48,095 --> 00:08:52,310
advanced jQuery code to be

156
00:08:52,310 --> 00:08:56,854
able to dynamically
change the buttons icon,

157
00:08:56,854 --> 00:08:58,460
and at the same time,

158
00:08:58,460 --> 00:09:03,140
induce the appropriate cycling
behavior on our carousel.

159
00:09:03,140 --> 00:09:05,760
Taking a look at our web page,

160
00:09:05,760 --> 00:09:09,390
you now see that
my carousel is cycling,

161
00:09:09,390 --> 00:09:14,465
and you see that this button
is currently a Pause button.

162
00:09:14,465 --> 00:09:16,130
When I click on this button,

163
00:09:16,130 --> 00:09:21,855
notice how it changes from
Pause to a Play button there,

164
00:09:21,855 --> 00:09:23,865
and then simultaneously,

165
00:09:23,865 --> 00:09:27,325
my cycling behavior of
the carousel is paused.

166
00:09:27,325 --> 00:09:28,840
So at this point,

167
00:09:28,840 --> 00:09:31,460
my carousel will remain paused at

168
00:09:31,460 --> 00:09:34,700
that location until
I click the button.

169
00:09:34,700 --> 00:09:36,950
So now, if I click
this button again,

170
00:09:36,950 --> 00:09:40,130
note the change from the Play
button to a Pause button,

171
00:09:40,130 --> 00:09:42,320
and then the cycling behavior of

172
00:09:42,320 --> 00:09:44,795
the carousel will
resume on the spot.

173
00:09:44,795 --> 00:09:46,625
So using a single button now,

174
00:09:46,625 --> 00:09:50,570
I'm able to both control

175
00:09:50,570 --> 00:09:54,695
the behavior of the carousel
and also simultaneously,

176
00:09:54,695 --> 00:09:57,125
display the current state

177
00:09:57,125 --> 00:09:59,460
of my carousel's
cycling behavior.

178
00:09:59,460 --> 00:10:00,740
If that is a Pause button,

179
00:10:00,740 --> 00:10:03,050
that means that my carousel
is currently cycling.

180
00:10:03,050 --> 00:10:04,535
If that is a Play button,

181
00:10:04,535 --> 00:10:06,560
then my carousel is paused.

182
00:10:06,560 --> 00:10:08,630
So to resume it,

183
00:10:08,630 --> 00:10:10,175
I will have to click
on the button.

184
00:10:10,175 --> 00:10:14,600
So this is one more
additional change

185
00:10:14,600 --> 00:10:17,120
that you can do to the exercise.

186
00:10:17,120 --> 00:10:20,480
So now, you see
how in our code we

187
00:10:20,480 --> 00:10:24,629
made use of the hasClass method,

188
00:10:24,629 --> 00:10:27,000
and we also saw the use of

189
00:10:27,000 --> 00:10:30,990
the removeClass and
addClass methods,

190
00:10:30,990 --> 00:10:33,770
jQuery methods that we applied

191
00:10:33,770 --> 00:10:36,845
in order to manipulate the DOM to

192
00:10:36,845 --> 00:10:39,545
reflect the behavior as

193
00:10:39,545 --> 00:10:43,445
pertinent in
this particular case.

194
00:10:43,445 --> 00:10:47,755
With this, we complete
this exercise.

195
00:10:47,755 --> 00:10:51,450
It's time for you to
do a Git commit with

196
00:10:51,450 --> 00:10:56,710
the message more
Bootstrap and jQuery.