Transcript from the "change Event" Lesson
[00:00:00]
>> Brian Holt: Now we wanna make it so that, I'm not gonna show you the last part which is, once you request the image, how does it display? Cuz I showed you how to do that, and that's gonna be your project for today, is the last kinda part. And then making it styled and look nice.
[00:00:13]
But I wanna show you what happens, if someone selects Pekingese, how to fire that event listener.
>> Brian Holt: So,
>> Brian Holt: Let's actually just move this out. So I'm gonna move this const select out from the function in here.
>> Brian Holt: So I have this select out here, I have the fetch here.
[00:00:40]
Then what I'm gonna do down here is I'm gonna say select.addEventListener. And what do I wanna listen for with this particular event listener? Well it's one that I've shown you before, but it's been re-applying it somewhere else, it's called change. You're basically listening for whenever the user changes that to be something else.
[00:01:03]
So I'm gonna say change function. It's gonna take in an event, right? We've see that before as well.
>> Speaker 2: Can you write e or event?
>> Brian Holt: Mm-hm.
>> Speaker 2: or is it r?
>> Brian Holt: Whatever you wanna call it. I have to abbreviate this as e cuz I'm lazy. And there's lots of people that will always call that e.
[00:01:26]
But for clarity sake for you, I'm putting out events just so you know that's an event, okay. And now I have the event, so I wanna know what the value is of what's being selected. So I'll just show you here say console.log, event.target.value.
>> Brian Holt: So now if I come over here,
[00:02:01]
>> Brian Holt: And refresh the page, if I select Akita here, notice that Akita comes up here, or if I select Basenji, Basenji comes up here. So the event, this is coming from the Dom, right. As soon as an event fires on this particular select, it fires this event. And the event.target is the select.
[00:02:26]
You could have just as easily said select.value here as well, right? Because the event.target and the console.log, select triple equals evet.target. Notice that that's true, right? The select is the event.target. Two separate ways to, I would recommend doing event.target cuz that's normally how you're gonna do it, but,
[00:03:00]
>> Brian Holt: It is the event.target, let's do that.
>> Brian Holt: Okay?
>> Brian Holt: Now anytime this changes, you're gonna get an event fired off and now you have what the user actually selected. You seeing that come up in your console?
>> Speaker 2: Where did you move this select for breeds to outside of the-
[00:03:20]
>> Brian Holt: Just outside of the right? Just somewhere above the event listener.
>> Brian Holt: Right because if it was in here, then it would be out of scope.
>> Brian Holt: Okay, now I have this but what the hell you gonna do with it? [LAUGH] So, let's look at the API docs really quick.
[00:03:44]
Dog API,
>> Brian Holt: And we're gonna look at the documentation, and we wanna get a dog image by breed. Again, I'm reminding you, ignore the sub-breed stuff for now, we're just focusing on breeds. So, there is this API here, dog API breeds slash hound, but whatever we put in here, that's what kind of images we're gonna get back.
[00:04:13]
So if I just copy that, put that in my API. So if I put hound, it's gonna give me literally every hound image that it has. Or if I put poodle, it's gonna give me every poodle image that it has. Let's go back in here, you can limit how many pictures it gives you.
[00:04:37]
This is asking for all, and I don't actually want all. I think I just want, I think random works. Nope, all right, let's figure out which one I want. So for example, if you grab this one,
>> Brian Holt: There we go, so if I put that one, that's gonna give me a random hound.
[00:05:02]
If I put poodle here, it'll give me a random poodle. If I put bichon there, it should, or is it frise? That's what they call them.
>> Brian Holt: Yeah, it'll give you a frise picture right there. So given that, going back over to my code, how am I gonna get the correct breed of what they've selected?
[00:05:28]
Well, it's probably gonna look something like this.
>> Brian Holt: Okay, so I have cancelled out log there, and I'm logging out this so if you just look at what it is right now.
>> Brian Holt: Where is my,
>> Brian Holt: Here we go.
>> Brian Holt: Okay, what do I wanna replace in here?
[00:06:06]
>> Brian Holt: Spoiler, it's what I highlighted. [LAUGH] Well, you remember template strings, right? It's the dollar sign curly brace thing, right? So I wanna put in there, event.target.value. And now if I refresh this, go over to this one. Notice low and behold, there is the correct URL.
>> Brian Holt: Right, and if I click on that, it should take me actually to the correct URL.
[00:06:55]
>> Brian Holt: Yeah?
>> Speaker 2: So if you put that, if you turn that into a variable, you wouldn't be able use it outside of the event listener, right?
>> Brian Holt: Yeah, which is kind of the point, right?
>> Speaker 2: Okay.
>> Brian Holt: Right, because you want, you're going to, let's just pseudo code this out.
[00:07:12]
Like, what are you gonna do once you get this at URL? So, make URL, right, that's the first thing we're gonna do, okay. Then, we're going to use the URL to change. Yeah, fetch right, fetch from the API. Once you have it from the API, then you gonna use the URL to change the current image.
[00:07:36]
>> Speaker 2: You do wanna do that all in the event listener?
>> Brian Holt: Yeah, you can make another function that does it too, that's up to you. I would probably make another function to do it but,
>> Speaker 2: I think I'm just confuse about scope but then. So if I turn that, if I set let URL equal that URL.
[00:07:55]
>> Brian Holt: Okay, that URL. So this is gonna be some URL, right?
>> Speaker 2: Yeah.
>> Brian Holt: Then I'm gonna call here, getnewdoggo or something like that?
>> Speaker 2: Yeah.
>> Brian Holt: Then I would just passing URL.
>> Speaker 2: Okay.
>> Brian Holt: And then I would have a function out here called, get your doggo and that takes in a URL, and now I have it.
[00:08:18]
>> Speaker 2: Okay.
>> Brian Holt: Make sense?
>> Speaker 2: Yeah.
>> Brian Holt: Cool.
>> Brian Holt: So yeah, I guess the other thing you do here is show loading spinner. Fetch on the API, use the API as change the current image, stop showing loading spinner.
>> Brian Holt: It's basically the steps you're gonna take.