Edge Case

[00:00:00]
>> Brian Holt: Now, the last tricky thing that we kind of have to do here is, what happens when we reach the end? We do have to check if we're at the end. So how are we gonna do that? How do we know that we're at the end of images?

[00:00:10]
Cuz eventually I'm gonna click Next, and I'm gonna run out of pictures here.
>> Brian Holt: I think this is the last image. So if I click Next, now it's just gonna, you went somewhere that I don't know how to do. So I need to once it reaches the end, stop it.

[00:00:27]
So how do I know I'm at the end?
>> Speaker 2: The length of the NodeList.
>> Brian Holt: That's it, it's exactly right. So here I'm gonna say if,
>> Brian Holt: NodeList, yeah. What I call galleryImgs, galleryImgs.length
>> Brian Holt: === currentlySelected + 1. Now why + 1? So if I have 12 images in here, the last element in that array is 11, right?

[00:01:03]
Because we start at 0 with indexes, right? And so currently selected is going to be 11, if we've reached the end of it. So you also could have put -1 over here, that's fine as well. You can either add one on one side or subtract one on the other side.

[00:01:20]
Depends on whatever speaks to you. I like + 1, so I'm gonna stick with that.
>> Brian Holt: If that happens, then we've reached the end of the Next, right? So all we have to do then is say, nextBtn.disabled = true.
>> Brian Holt: Okay, now if we come back over here and click through all of our Luna pictures.

[00:01:53]
>> Brian Holt: Hopefully, we should get to this point and now Next button is disabled. And again, I can click on this now. And despite the fact that I haven't removed this event listener here, it's not gonna fire because the button is disabled.
>> Speaker 3: I have a NodeList but nothing happens when I click on Next.

[00:02:13]
>> Brian Holt: Okay, so if nothing's happening when you clicked Next. So even if you console log there, it's not saying-
>> Speaker 3: Should I be console and down logging?
>> Brian Holt: Just here, just say this happens, right? And if I come over here to my, let me refresh this. If I click Next then it should say this happens, right?

[00:02:36]
>> Speaker 3: Yep.
>> Brian Holt: So that is happening?
>> Speaker 3: Mm-hm.
>> Brian Holt: So problem is you have an error somewhere inside of your, inside of your code somewhere.
>> Brian Holt: Tough to say without looking at it, but I'll look at it with you.
>> Speaker 3: I'm looking at it.
>> Brian Holt: Even when looking at stuff.

[00:02:59]
I can look at it with you at the break.
>> Brian Holt: Is it working for other people here so far?
>> Brian Holt: So pretty cool, right? We built an image gallery and it took us about 20 lines of code to do it. So what has this been to demonstrate to you is one, this is a useful thing that you could put on to a production website today, right?

[00:03:29]
Rotating through images is something that every website does. And two, just a little bit of JaveScript goes a long way with doing, if you’re more interested in the styling sides of websites. Cuz who doesn't wanna look at puppy pictures?