Lesson 38

Cycling Through Images using the JavaScript Remainder Operator

Learn how to use the remainder operator (percent sign, aka modulo) to go from the last image to the first image.

Every time you click the next button, the current image index increments. However, it goes beyond the number of elements in the array of image URLs. So we have to reset that index back to 0 when you are seeing the last image and click next.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Summary

Summary of Transcript

In this transcript, a speaker explains how to manage image navigation in an application, particularly focusing on the use of an index to track the current displayed image.

Key Points

Current Index Management:
- The current image index is tracked with values: 0, 1, 2 (corresponding to the first three images).
- Clicking "next" increments the current index. For example, if the current index is 2 (third image), clicking next sets it to 3.
- However, since there is no fourth image (indices are 0-based), it results in an "undefined" image.
Resetting the Index:
- To return to the first image, the current index must be reset to 0.
Using the Modulus Operator:
- The speaker introduces the modulus operator (%) to manage the index circularly.
  - Example:
    - For 1 % 3 the result is 1,
    - For 3 % 3 it’s 0,
    - 4 % 3 results in 1.
- This results in a repeating cycle: 0, 1, 2.
Dynamic Index Management:
- Instead of hardcoding the number of images, it is recommended to use the length of the image array (imageurls.length) to dynamically adjust the modulus operation, ensuring proper indexing no matter the number of images.
Creating a Back Button:
- The speaker challenges the audience to implement a back button using similar logic.
  - A back button would decrease the current index by 1.
  - Careful checks should be implemented to ensure the index doesn't go below 0. If it does, you can set it to the last element index: imageurl.length - 1.
Conclusion:
- The structure presented allows for dynamic handling of navigation in image galleries and encourages experimentation with implementing said features at home.

Challenge

Listeners are encouraged to implement functionality for a back button and handle edge cases, such as negative indices.

Video Transcript

Now one thing I didn't teach you yet is if I click next image, what's going to happen? Somebody guess. It's on the third image right now. Current index should be 012, right? What happens if I click next? What, okay, if I click next, what would be the new value for current index? If current index is 2 right now. It's not going to go back to 0, right? Because we're saying plus 1 here. So if current index is 012, it's 2 plus 1 is 3. So if I click next image, it's going to be 3. Oops. Now if I place 3 here, there's no such thing, no 4th, right? Always plus 1 if you want to find out what element. I can count 0, 1, 2, and then there's no 4th element in the list. Therefore, it's like, okay, I don't find anything here. Undefined. So there's no image. How can we go back to the first one? Well, we have to reset current index to what, to 0, right? That's the problem to solve that. But how would we know? Well, there are many ways to go about this, okay? I don't know if you know about the module. Let me just quickly do it and then we will end this lecture. If you do division, you don't know if you know about module. This percent operator here. Module like you divide by something and take the remainder. If I do 1 divided by 3, the remainder is 1. 2 divided by 3 is 2. But 3 divided by 3, the remainder is 0. And if I do 4, oh, 1, 5 is 2, 6, 0, oh. You can see it always becomes 0, 1, 2, 0, 1, 2, which is perfectly what we want. It keeps 0, 1, 2, then goes back to 0, 1, 2, 0, 1, 2. This is one way we can do this. So for this mathematical operation here, I'm going to do the following. I'm going to module with, in this case it's 3, right? But I could add many elements here. If I do that, like I add another one, another one, that's no longer 3 here, had B2, 5, right? So in order for us to not have to hard code the number there, I'm going to say, OK, this is basically the length or number of elements of the array. So I can say imageurls.length here. And that will always be the exact number of elements. No matter if I place 4 or 5 or 6, it's always going to replace here with that number. So I don't have to hard code it. If I do it this way, it goes back. Elephant, dog, cat. Elephant, go back to 0. Dog, cat, elephant, go back to 0. All right? So that's the power of the module operator. Just divide and take the remainder. The remainder will always be within 0, 1, 2, repeating as the index increases. So that's the image gallery. And I challenge you to do the back button by yourself at home. It's basically taking current index, subtracting 1, very similar, subtract 1. But then you've got to be careful. Just do that one, subtract 1. Once you've solved that, you can do the going back from, if I put negative 1 or whatever, I would solve that problem. That one is easy to do. Just check if it's less than 0. You can go back. And actually, if you click back, do you want to go to the last or do you want to stop? There's two ways. If you want to go back to the last, you can check if it's less than 0, the current index. You can set the current index to the last element index, which is what? Imageurl.link minus 1. Imageurl.link minus 1. So these are my tips for you if you want to try the back button.