Adding a Delete Icon

[00:00:00]
>> This is really where we're gonna try to make it a touch more interactive, a touch more exciting, maybe show that there are ways to add more client-side just stuff than is there right now. So we're gonna talk about deleting and events. So we need a good icon if we're gona do deleting.

[00:00:17]
I did ask ChatGPT, [SOUND] to give me an icon. It produced this savage for me and yes, I call these savages. If I'm gonna call them pigs, I gotta call them savages, okay, you can't just choose one and not the other one, okay? And so here we go, we're gonna copy the savage code, you're gonna definitely want this code.

[00:00:33]
If you're gonna want that savage, go ahead, take it, it's beautiful, it is now yours. So what we're gonna do. Is we want to do some deleting, but I wanna highlight a really cool part of HTMX. You can use actual verbs, not like fake verbs, okay? We're not doing a post getting a 200 back and getting a 400 error status underneath, we're actually using real endpoints with real verbs.

[00:00:56]
That means you no longer have to do this stupid thing. How many people did that with all the fun times back in the day where you'd have GET and POST, and then you'd always have like a POST contact/delete/id, you like put the verb inside of the path. It's kind of annoying, it's kind of dumb.

[00:01:12]
So with HTMX, we can just do the thing, you just do it, so it's fantastic. Would you look at that that right there? We have contacts/id, I'm very excited about that. So we're gonna update our html. Let's add a delete icon next to an address. An address of course is a name and an email address.

[00:01:32]
And so we're gonna first include the icon next to the address. We're gonna make a delete handler for contacts/id, and then next we're gonna make an endpoint, we're gonna make endpoint updates for this, okay? So should be pretty easy. Let's do this. All right,
>> Anyway, you could post the current code to a branch?

[00:01:51]
>> We could post the current code to a branch. Yeah, let's do that, let's just do that right now. Git status, I'm gonna do like this. Git add this, git commit batman. And we're gonna check out the checkpoint -1, there we go. Git push origin checkpoint -1, boom, there you go.

[00:02:10]
So it's up there right now, you can go get that code so you can start exactly in a fresh location where I'm at. Because from here on out our programming won't be nearly as extensive cuz that first part, anytime you start a project there's like a lot of things you kind of got to do now.

[00:02:23]
We're gonna get into the finer grain detail, okay, we're gonna go deep in. So are you guys ready? Everyone ready? Everyone has the delete icon. I don't think I have the delete icon anymore, I'm not sure if I copied and pasted over it. So, there we go, just in case, I have the delete icon.

[00:02:38]
We're feeling good, looking good, I'll put it one more time inside twitch chat. And let's start. All right, so we're gonna jump over to our templates. And I said we're gonna go all the way down to our contact, and now we need to put this little delete icon in there.

[00:02:51]
So what I'm gonna do is I'm gonna go like this style=display flex, flax on those kids without tail wind. I am now not that one, I'm now gonnna put in the savage. I'm gonna wrap it like every good thing you do in HTML, you put divs around it.

[00:03:06]
What is that? I don't care, put a div on it. And then I'm gonna go style equals=width 1 rem. I forgot what rem stands for, but I think it's root font size cuz stands for font size. Classic, really. And so now, look at that, we got a little trash can icons right next to that.

[00:03:28]
How great is that? That's beautiful. Let's also add in a little pointer, so when we put our pointer over it, we get like a little finger on it. That always makes me feel good, right? Cursor, pointer, right, so that should make it go. Yeah, look at that. You can't even see it, cuz, okay, it's not the size of the cursor that really matters here, but it's really tiny, I can barely even see it, but it is a pointer icon.