Exercise 7 Next Dot 2! Please Help!


#1

Here is my code:

var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});

$('.arrow-next').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();

    var currentDot = $('.active-dot');
    var nextDot = currentDot.next();

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

    if (nextSlide.length == 0) {
     nextSlide = $('.slide').first();
     nextDot = $('.dot').first();
    }      

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');

});
}

$(document).ready(main);

here is the error it gives me:

Oops, try again. When on the last slide, it looks like next arrow isn't wrapping back to the first dot. Look back at the instructions and check the code inside the if statement.


#2

@chrisantoon,

++ the build of FLIPBOARD script ++

The structure of the =main= function should look like

var main = function() {
     //Begin of =main= FUNCTION-BODY
        $('.dropdown-toggle').click(function(){
              $('.dropdown-menu').toggle();
        });

        $('.arrow-next').click( function() {
             //code which gets executed when =click=ed
        });
        $('.arrow-prev').click( function() {
             //code which gets executed when =click=ed
        });
     //End of =main= FUNCTION-BODY
};

And the =main= function should be executed when the document is fully loaded and READY

$(document).ready( main );

==============================

+++++ flipboard click Eventhandler structure
Within the =main= function

var main = function() {
     //Begin of =main= FUNCTION-BODY
       //your code
     //End of =main= FUNCTION-BODY
};
$(document).ready( main );

you are placing =click= Eventhandlers,
which are attached to specific HTML-Elements by using
a jQuery-Selector.like $('.arrow-prev')

var main = function() {
     //Begin of =main= FUNCTION-BODY
        $('.arrow-prev').click();
     //End of =main= FUNCTION-BODY
};
$(document).ready( main );

Now as a so-called argument of the =click= Eventhandler
you are placing a so-called anonymous function

var main = function() {
     //Begin of =main= FUNCTION-BODY
        $('.arrow-prev').click( function() {
             //code which gets executed when =click=ed
        });
     //End of =main= FUNCTION-BODY
};
$(document).ready( main );

======================================

+++++ flipboard the next && prev steps
You will have to keep a strict order in your code.....

s t e p s - - f o r - - n e x t S l i d e
-1
-1a create a selection of nextSlide (2 steps, capture 'active-slide, capture next() slide )'
-1b create a selection of nextDot
-2 check if selection of nextSlide is EMPTY
-2a if EMPTY change nextSlide selection to first slide
-2b and change nextDot selection to first Dot
-3 swap -active-slide- and -active-dot- class from current to next
Step3 is done by

   currentSlide.fadeOut(600).removeClass('active-slide');
   nextSlide.fadeIn(600).addClass('active-slide');
   currentDot.removeClass('active-dot');
   nextDot.addClass('active-dot');

s t e p s - - f o r - - p r e v S l i d e
-1
-1a create a selection of prevSlide
-1b create a selection of prevDot
-2 check if selection of prevSlide is EMPTY
-2a if EMPTY change prevSlide selection to last slide
-2b and change prevDot selection to last Dot
-3 swap -active-slide- and -active-dot- class from current to prev
Step3 is done by

    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

+++++++++++++++++++++++++++++++++++++
++ jquery length explained AND DOM pictures of flipboard
https://www.codecademy.com/forum_questions/5615308ab62548021c0000e4