Transcript from the "Feed Event" Lesson
[00:00:00]
>> Brian Holt: We're gonna pick up where we left off. Right now we have them kind of cycling through all their various states, but we still can't click on them. So we're gonna go ahead and work on the feed method now.
>> Brian Holt: So, I'm gonna come down here,
>> Brian Holt: We're gonna add an event listener,
[00:00:26]
>> Brian Holt: Down here near the bottom. And we're just gonna say document.get element by ID, nope query selector. Query selector,
>> Brian Holt: .bg, so we are gonna listen for events at the background level, right. So anything that happens inside of this background we're gonna add an event listener,
>> Brian Holt: That whenever someone clicks on it we're gonna call a feed method that we're about to write or feed function rather.
[00:01:04]
Okay, so line 119 there, that's one I wrote,
>> Brian Holt: Document.querySelector(' .bg ').addEventListener( click' go to feed):.
>> Brian Holt: Okay, and then here underneath this I'm gonna put a method called function feed that takes an event.
>> Brian Holt: And just to show you, we're gonna log out the event.current target, not current target but rather target, target,
[00:01:40]
>> Brian Holt: To show you what that looks like, so we can make sure to grab the right element.
>> Brian Holt: So if I go in here to the console,
>> Brian Holt: You can see here that depending on where I click different things are gonna be called. And only when I click on the mole hungry,
[00:02:02]
>> Brian Holt: Is that going to allow us to get the right mole? So, we're gonna have to check whenever someone clicks on, whenever a feed happens right, if we go back over to our code. We have to check whenever someone clicks on the event we have to make sure that they're actually gonna click on an image, right?
[00:02:24]
So the first question I'm gonna ask here, if (event.target.tagname is not equal to IMG, remember, this is always all in caps.
>> Brian Holt: Then we're going to return, right? If they didn't click on an image then they definitely didn't click on one of these moles over here, right?
>> Brian Holt: So that's the first thing.
[00:02:55]
The next question we need to ask if they did click on an image was that mole hungry? Now there's a couple of ways we could look for that. [COUGH]
>> Brian Holt: So we can say, or, which is what the two bars mean, (event.target.classList.contains("hungry").
>> Brian Holt: And doesn't, so actually,
>> Brian Holt: So here in front of event I'm gonna put exclamation point.
[00:03:37]
[COUGH] So let's talk about that line there for just a second.
>> Brian Holt: The first thing here, we're gonna make sure it's an image, right? If it's not an image, we're just going to return.
>> Brian Holt: The second thing we're gonna check is we're gonna make sure was it a hungry mole?
[00:03:58]
>> Brian Holt: And if it's not a hungry mole, which is what the exclamation point, right? That's what the explanation says not right? So if the classes does not contain hungry, then we're not gonna run any of this functionality and we're just gonna return. So now if I Save this and Refresh over here, notice that it'll only be logged out here if I click on one of the hungry moles.
[00:04:20]
So there, that one I was able to click on, I'm clicking on other things and then there you can see again that it logs out, right? So we’re only getting hungry moles down here.
>> Brian Holt: So now that we’re down here I’m guaranteed at 109, that they clicked on a hungry mole, right?
[00:04:41]
So now we’re gonna have to go do all the things to move them from hungry to the fed state, right? That's when they have the worm hanging out of their mouth.
>> Brian Holt: Or I can even show you here, this one. So that's when they've been fed.
>> Brian Holt: So the thing first where it says mole.status = 'fed' right?
[00:05:10]
>> Brian Holt: Mole.next. So how long are we gonna show them the happy face?. And I just did it with the same getSadInterval. So I'll show it to him for a second or a half second, whatever you chose to do.
>> Brian Holt: Okay. And your gonna say mole.node.children[0].src,
>> Brian Holt: '=./mole-fed.png'.
>> Brian Holt: And you're also going to remove,
[00:05:54]
>> Brian Holt: The hungry, right? Because it has the hungry class on it, it no longer is hungry at this point.
>> Speaker 2: Where is mole coming from?
>> Brian Holt: I have to grab it, I didn't do that yet, so const mole, thank you.
>> Brian Holt: So,
>> Brian Holt: If they click on this image right here, right?
[00:06:21]
>> Brian Holt: How do we know which one they clicked on?
>> Brian Holt: Well, we had this data index right there, right?
>> Brian Holt: So we know that they clicked index 6, that's why we put that there in the first place. So what we're gonna say is moles(event.target.DataSet.index),
>> Brian Holt: Right?
>> Brian Holt: Now this isn't quite it,
[00:06:53]
>> Brian Holt: Because if you remember,
>> Brian Holt: Store as global variable, temp0. So, temp0 is this particular little image right there, right. You can see the one that I have highlighted right there. So if I say temp0, let's make this a little bit bigger so you can see it,
>> Brian Holt: Temp0.dataset.index, you can see it's 6 right?
[00:07:24]
But, what's the the problem with that? It's a string right? It's not a number it's a string right? Because we a pulling it out of the dom, we had the problem previously right? So we have to turn this into a number just like we did with the calculator.
[00:07:39]
So easy enough, parseInt,
>> Brian Holt: Like that.
>> Brian Holt: So now this mole will be the one that we clicked on, as represented up here, right? So we can get a handle on that one. That make sense?
>> Speaker 2: So what happens in the game now for you when you click on the moles to feed them?
[00:08:07]
>> Brian Holt: Well, it's gonna kinda break the game cuz I haven't really drawn it full circle yet, but it should show a fed mole if I click on it. And now they're disappearing.
>> Speaker 2: All right, glad it's not just me.
>> Brian Holt: Probably because,
>> Brian Holt: Yeah, let's close the loop here cuz I think it doesn't know what to do with fed because we haven't provided for fed up here.
[00:08:48]
>> Brian Holt: 6, 0, okay, so that looks like it's working, right? It's getting the correct number, so that should be getting the correct mole, mole.status = 'fed', mole.next = SadInterval, children[0] src =./mole fed. Okay, and that looks like it all should be working fine.