complete-javascript-course icon indicating copy to clipboard operation
complete-javascript-course copied to clipboard

Netlify and final folder of Bankist Website has a bug on slider component

Open JonnerPaz opened this issue 2 years ago • 2 comments

Greetings. First of all, I would like to thank Jonas for creating such an awesome course. I have learnt a lot from it. It is my first time opening an issue so hope this works fine and forgive me if my english is a bit off

I have found a bug on slider component of bankist website proyect, where if you click the last dot and wether you use right arrow key from keyboard or the GUI right arrow key, it will not show the first element. But, if you click once again, it will show the second element of the slider component. This looks like it only happens when shifting to the right side, not the other way around. This bug also happens on the proyect shipped to netlify.

My deduction is that dots and arrow keys does not update the same variable, which is "curSlide", so when you jump right into the last element using the dots the bug triggers. I have made a few tweaks to make this work by just updating "curSlide" each time a dot is pressed:

const activateDot = function (slide) {
    curSlide = slide; // This will solve it
    document
      .querySelectorAll('.dots__dot')
      .forEach(dot => dot.classList.remove('dots__dot--active'));

    document
      .querySelector(`.dots__dot[data-slide="${slide}"]`)
      .classList.add('dots__dot--active');
  };

And converting the argument of activateDot on dotContainer event to a number:

dotContainer.addEventListener('click', function (e) {
    if (e.target.classList.contains('dots__dot')) {
      const { slide } = e.target.dataset;
      goToSlide(slide);
      activateDot(Number(slide)); // So it will always be a number, not a string
    }
  });

I didn't do a PR due to the fact that Jonas would not accept it, but I leave it here for anyone who wants to fix this small bug.

JonnerPaz avatar Jun 11 '23 17:06 JonnerPaz

@JonnerPaz thanks for the share I will try this code, If I find any bug or update I will let you know...

SoumyaSubhrajit avatar Jun 11 '23 18:06 SoumyaSubhrajit

@JonnerPaz I have fixed the bug and created pull request. It is my first open source contribution ,I hope it would work well. Thank you.

Madhavdua avatar Jul 09 '23 09:07 Madhavdua