Event Handling Exercise

[00:00:00]
>> So we're gonna go back to your index.html page that you were playing around with your characters. And this time under each of your character, I want you to go ahead and add a favorite button to it. And when a user clicks on that favorite button, go ahead and update a separate list that tracks your favorite characters.

[00:00:16]
And as a bonus, if you have some time, go ahead and actually create a form that will allow you to add more characters to whatever the preset of data already exists. Cool, so what I'm gonna do now for the solution is we're gonna go ahead and run through this.

[00:00:36]
[SOUND] Okay, so inside of my index.html file. All right, the first thing we're gonna do is we're gonna add a button to each character. Well, we have our list here that we have, and all we're gonna do is I'm gonna do this. I'm gonna just for the sake of making it easier, let's make the p element wrapping around that.

[00:00:56]
So we save that. This is good. And then we can then go ahead and add a button. So that's just what we're gonna do. And I'm gonna add a star here for favorite. There we go, we have a favorite button. Great, Now what we need to do is actually we add a favorite character, so @click, we'll say favoriteCharacter.

[00:01:20]
We haven't read the method yet. So, we go down inside of our app here, and so inside of data, we don't need that, so we need it here, so we need methods for favorite character. And this is where the argument actually comes into play, because at this point, well, there's a couple of things.

[00:01:38]
One, we need a favoriteList. So I like to try to go alphabetical whenever it makes sense. So favoriteList, that's just an array. And so what we wanna do is wanna do this.favoriteList.push. What are we pushing? We wanna push the character that's actually being called. And so the way we detect this is we go inside of our favorite character.

[00:02:00]
And we're in our loop, so we can actually pass character directly to our function, which means character now should be here. And can go ahead and push that over. And so to show that that works, let's go ahead and add another list right here. This time we'll just add h2 of favorite Characters.

[00:02:24]
Once again, I see a typo there, I'll fix that real quick, v-for character in favoriteList. And then inside of here, we're just gonna render out the character. Okay, so as we can see here, actually nothing's showing up. So actually, this is a good instance where we might actually wanna do No favorite characters yet.

[00:02:43]
So this is where the v-if works well. So v-if favorite characters, or favoriteList.length. [SOUND] Actually, you know what, I usually prefer the greater than 0 as my first one. So we're gonna swap this. We're gonna go down here and we swap the v-if for the ul, cuz that's my preferred default state.

[00:03:05]
And this empty state is really a fallback for when it doesn't have it. There you go, No favorite characters yet. Vue favorite Toph, there we go, Toph, Zuko, and Katara, everything's working. Now of course, you can do deduping and all that fun stuff, but I'll leave you all to play with that.

[00:03:21]
And then there you go, create form. Okay, and then let's go ahead and add the characters as well. So what we wanna do next is we wanna actually then add a new character. How do we do that? Well, at this point, the easiest thing for me to do is let's go ahead and create another h2.

[00:03:38]
And this h2 will be New Character. And then what do we have? We have basically one attribute, which is the character-name. And so we'll say name, and then we'll have the input, and this will be text, that's fine. And then what we're gonna do is we're gonna do, if we think about the data structure we're probably looking for, eventually characters have more attributes, right?

[00:03:59]
So if we think about the reactive data we're looking for, we can say there's gonna be a new character object that we're basically gonna be tracking inside of here. So with that, we can then say v-model equals newCharacter. And you know what, we actually know how we kinda want it structured.

[00:04:15]
So we're actually gonna go ahead by default, go ahead and actually define the name inside of the data so we're clear to future developers. That is not an implicit thing, and then newCharacter.name. And so to show that that works, what we're gonna do once again is let's go ahead and use the pre element.

[00:04:32]
And so the pre element is a handy little trick to actually render your reactive data in a way that's actually readable. So here, I'll show you the difference. So if we save here and refresh, you'll see that the name is actually being rendered kind of in its codeblock form.

[00:04:46]
But if you didn't do a pre element and you just did the p element, for example, which is what I might do on my default. You'll see that it basically automatically just renders it as a normal string. So the pre element, it's not as obvious in this particular case.

[00:04:57]
But when you have like JSON objects that's multiple lists, it's really nice to have it automatically formatted with just using an HTML element without having to do anything special. So there we go. And now if we come in here, hey, there we go, look, things are actually changing.

[00:05:11]
So once again, if I say Appa, right? And then nothing's adding yet, why? Because we haven't actually had a way to actually push the character to it. So how might we do that? Well, for the sake of showing you all something new, right, we talked about v-model and all that stuff, and we can click on the button to add it.

[00:05:29]
But what if instead, we did something a little bit more fun. Let's not do a button this time. What it you wanted to do a keyup, and then when you hit Enter, then we push it, how would that work? Well, we can actually do an @keyup event, and then we can say basically addNewCharacter.

[00:05:46]
And so if we come in here, and we go to methods, and we go addNewCharacter. At this point, we do know what the new character is. So we don't need to pass any arguments to it because that is already being tracked inside of our reactive data. So what we get to do is we can do this.characterList.push.

[00:06:05]
What are we pushing? We're pushing the newCharacter. And not just any newCharacter, it's this newCharacter. So we refresh that and do Appa, you'll see, that's weird, what's happening? Well, any guesses?
>> Every keyup.
>> Yep, every keyup is just firing off, is like, [SOUND] we don't want that.

[00:06:28]
We only wanna do it when we hit keyup Enter. And so some of you are probably thinking, okay, so I know what I'm gonna do, I'm gonna get the event. I'm gonna do event.target, and then I have to figure out what the key code is. But I got you all one easier.

[00:06:46]
Yep, so now let's see what we got here. So we can do here, I mentioned before about modifiers to the API. On the keyup, Vue also knows we have common things we're using all the time. An Enter, an Escape keys, those are common. So all we can do is we do .enter on this, refresh, Appa is fine, hit Enter, and then there you go.

[00:07:09]
The reason it's blinking is because of that odd character. So actually, I think that functionality is basically done. So that's [SOUND] don't do that. Right, I had that whole list thing, that's fine. Okay, then if I just add it twice, they go. Now you'll see both of them.

[00:07:28]
And so the final thing just from like a code cleanup perspective is probably just, once we push the character just newCharacter =, just like a new object. So just to prove that that works, Appa, Enter, that's fine. Then we can say like Azula. There we go, Appa, Azula.

[00:07:49]
You can see that our name input is being reset properly.