Adding Buttons

[00:00:00]
>> Brian Holt: So let's go right to buttons.
>> Brian Holt: So under the div with all the pictures, I want you to create another div called buttons.
>> Brian Holt: And inside of buttons, I want you to put, as you may imagine, two buttons. Button. Class equals button and previous. And then, we're gonna put prev in there.

[00:00:28]
And then, another one, which is gonna be next. And put next in there.
>> Brian Holt: And let's go get over here in Luna Gallery so you can see here that they're coming up as well.
>> Brian Holt: Now, one of these buttons, since we're gonna start at the first element, right?

[00:00:46]
If we start at the first element, it means you can't go back, right? So we're gonna have to disable the previous button. Because initially, in the very first state, you can't go back, right? Make sense? So what we're gonna do here is, we're gonna say disabled.
>> Brian Holt: And you can see there, now the first the Back button is disabled.

[00:01:09]
>> Brian Holt: Now, what's cool about disabling a button, we're about to hop into the JavaScript to make this work to browse through all of the images, right? If I have an event listener on the button and then I disable the button, it will not fire the event listener, even if I click on it.

[00:01:26]
So I have to, I guess, de-disable. You have to enable the button for the event listener to fire.
>> Brian Holt: That's very convenient cuz then we don't have to keep track of that stuff. All we have to do is disable the button. And it's also cool, cuz you can see down here, that we were able to select that disabled button just by putting colon disabled.