Transcript from the "Adding Interaction" Lesson
So we're gonna put script underneath, inside of the body, underneath the last HTML part, put script.
>> Brian Holt: Source equals.slash gallery.
>> Brian Holt: Or just gallery without it, either way.
>> Brian Holt: Now you may ask the question, why am I putting this the last thing on the page? Why don't we put it in the head or anything like that?
[00:00:52] Well, the way that the browser works is, it is going to download your HTML and the browser gonna start reading it line by line, and it's going to hit this link, it's going to pause doing everything with the HTML. It's going to wait to download that CSS, apply all that CSS.
[00:01:08] And then it will continue going down. In general, this is a good idea with CSS, because you want your things to show up styled. If I put this at the end of the document, it's gonna show up all garbage looking, and then it's gonna apply the CSS. So it's good with CSS to put in the head.
So you don't want to prevent the user from seeing things on the page. So that's why we put it all the way at the bottom.
>> Brian Holt: Another advantage of putting it down here at the bottom. Let's say I just put it here, for some dumb reason. If inside of this gallery.js, I tried to refer to this div, the class buttons right there, I would not be able to, because this hasn't been created yet, because this is being downloaded and executed here, right?
>> Brian Holt: So, let's go to our gallery.js.
[00:02:38] So, what we wanna do is, anytime someone clicks Next, we want to take away the active class from this picture, and we want to apply the active class to the next picture. So let's go ahead and go down here. I'm gonna pull out the previous button, so const prev button equals documents, that Elements by, let's do query selector, query selector.prev, like that, right, and would do the same thing for next button.
So next button.
>> Brian Holt: Let's just make this vtm, because I'm lazy and I don't wanna type that much. Next.
>> Brian Holt: Okay.
>> Brian Holt: So we're going to add event listeners to this, we're going to prevBtn.addEventListener. On click. I'm gonna run some sort of function her, right?
>> Brian Holt: Same thing with next button.
So let's just focus on next button first, and then we'll come back to previous button.
>> Brian Holt: So next button, let's say, we'll come back to you.