In the previous exercise,
we saw how we can leverage
the JavaScript-based controls that are provided for
the Bootstrap JavaScript components
in order to control the behavior of the components.
In particular, we saw the use of the carousel and
how we were able to introduce
two buttons to control
the cycling behavior of the carousel.
Now, I'm not fully satisfied with that implementation.
I would like to now collapse the whole thing
into one single button that can both
indicate the current behavior of
the carousel and also be able to control the carousel.
So let's see how we can leverage
further jQuery code in order
to achieve this, in this exercise.
To achieve that, we'll go back to the code
in index.html where we defined the two buttons.
I'm going to now remove this div for
the button group because we are going to have
only one single button instead of two buttons.
So I have removed the div around the two buttons.
I'm also going to delete one of the buttons,
because we're going to work with
just a single button for this exercise.
So let me change the indentation.
So now, this particular button that we have there,
I'm going to rename this button as carouselButton.
We will start out with this button being
a button with the pause icon.
We're going to flip the icon for
this button through JavaScript code.
So how do we do that?
Taking a look at our web page,
we'll now see that we have one single button here,
which is currently indicating the pause there.
Now, my hope at the end of this exercise
is to turn this button into
a single control whereby if I click on this button,
it will pause the cyclic behavior of the carousel,
and then simultaneously turn
this button into a play button,
meaning that this icon will
be replaced with the play icon.
So that this single button indicates what
the current state of
the cyclic behavior of my carousel is. How do we do that?
We need to go and edit
the JavaScript code in order to achieve that.
Going down to the JavaScript code
at the bottom of index.html page.
So here, we had this script that we had
included earlier in order
to activate the two buttons there.
I'm going to edit this code
to make use of that single button that we have there.
So coming down here,
I'm going to remove
this second part because we
only have one single button now here,
which is the carouselButton,
and whenever that is clicked,
you need to do something in response to doing that.
So if the carousel button is
clicked, then what do you do?
Now, fortunately, depending on
whether the button is a Play button or a Pause button,
we'll be able to take an appropriate action.
But how do we know whether it
is a Play button or a Pause button?
So this is where we're going to make use of
some jQuery code in order to
identify whether this is a play button or a pause button.
To help us to identify this,
we're going go inside here and then use an if statement,
and inside there, I'm going to test
to see whether this is a play or a pause button.
So here I say,
carouselButton.children span.
So which means that,
for this carousel button,
inside where if there is an element with the span tag,
so we obviously know that in our carousel button,
we had the span tag which
contained the Font Awesome icon there.
So for that span tag,
we're going to check hasClass.
So we're going to check this hasClass,
and then the class that we're going to
check for is fa-pause.
So which means that,
if the span tag has the fa-pause class,
then we know that this button is
currently acting as the pause button.
So obviously, when the button is clicked,
the user is expecting that
the cyclic behavior should be paused.
So that's what we identify here.
So you now see that we are writing
some more advanced JavaScript code using
the jQuery syntax in order to make this work correctly.
So inside here, so what do I need to do?
Now, so which means that if the button
is currently a Pause button,
then, obviously when the button is clicked,
you want to pause the carousel.
Then, in addition, we want now to be able to flip
that icon from a pause icon to a play icon.
So what we will do is,
we will say right there after this,
we'll say $carouselButton.children span,
and then we'll say, removeClass.
So we're going to remove the pause class.
So notice how this works.
We're going to remove the pause class from that,
and then, we're going to add the playClass.
So that way your button's icon is now
going to be flipped from a Pause button to a Play button.
So we're going to remove the pauseClass.
I'm going to just copy this code and
then paste it right
there and then do the edit to this code.
Same thing, for the carouselButton for the children span,
I'm going to instead now of the removeClass,
I would say addClass, and then fa-play.
So that way, what we are doing is,
we are flipping that button from
a Pause button to a Play button.
Also, we are pausing
the cycling behavior of the carousel.
Now, if this is not the case then,
it should be a Play button so
the opposite effect should be introduced.
Then, I'm going to simply copy this code,
and then do the other tests for the situation
where the button is a playButton.
So I would say else, now obviously,
I don't need this if here but just to be doubly sure,
I'm going to put that in there.
Because there are only two possibilities,
either it's a Pause button or a Play button,
but just for my reassurance,
I'm going to put that as an fa-play there.
Now inside there, I'm going to change
this from pause to cycle.
Because from the previous exercise,
you remember that if you want
the cycling behavior to resume,
you would have to set the carousel action to be cycle.
Then similarly, for the remaining two statements,
I am going to remove the playClass
and then add the pauseClass.
So notice how we are using a little bit of
advanced jQuery code to be
able to dynamically change the buttons icon,
and at the same time,
induce the appropriate cycling behavior on our carousel.
Taking a look at our web page,
you now see that my carousel is cycling,
and you see that this button is currently a Pause button.
When I click on this button,
notice how it changes from Pause to a Play button there,
and then simultaneously,
my cycling behavior of the carousel is paused.
So at this point,
my carousel will remain paused at
that location until I click the button.
So now, if I click this button again,
note the change from the Play button to a Pause button,
and then the cycling behavior of
the carousel will resume on the spot.
So using a single button now,
I'm able to both control
the behavior of the carousel and also simultaneously,
display the current state
of my carousel's cycling behavior.
If that is a Pause button,
that means that my carousel is currently cycling.
If that is a Play button,
then my carousel is paused.
So to resume it,
I will have to click on the button.
So this is one more additional change
that you can do to the exercise.
So now, you see how in our code we
made use of the hasClass method,
and we also saw the use of
the removeClass and addClass methods,
jQuery methods that we applied
in order to manipulate the DOM to
reflect the behavior as
pertinent in this particular case.
With this, we complete this exercise.
It's time for you to do a Git commit with
the message more Bootstrap and jQuery.