Now back to our application. Let's continue where we left off last. So this is what we had by the end of the chapter where we explored Tailwind CSS. We have this card with the roll here we have a button and this is the bookmark icon. Let's first start by making this particular button interactive. We have this button right here, we forgot to add any hover styles.

We have this button right here, we forgot to add any hover styles. Let's do that now. Let simply say hover and make the background a little dark on hover using BG Amber 700. You can even use ZA pointer, but that's um, up to you. Let's say ZA pointer on hover. Now you'll know that the button is being hovered. Now on click of this button, we might want to see some details of the job requirements.

Now on click of this button, we might want to see some details of the job requirements. Let's wrap this button in our div. Take this entire thing, put it inside the div and we'll make this part of the application reactive using alpine js. But before we do that, we of course need to add that same script tag right here in this head as well. So pure it is, make sure you do that as well. And back to that component,

So pure it is, make sure you do that as well. And back to that component, let's use the X data directive to turn this into a component. So here we can have a variable like show details and set this to false to begin with. And right below this button we can add a div with a paragraph, which is the details of the job requirement. Let me add a paragraph and paste uh, some text here.

of the job requirement. Let me add a paragraph and paste uh, some text here. So these are the details for now. You will be able to see them. So let me change the styles. B class equals text XSM and also add some margin at the top, maybe MT one or MT two. Alright, now we also need another button called hide details. Let me copy the same button styles

called hide details. Let me copy the same button styles and add it below the paragraph right here. Only thing is I'll change this to hide details of course and also maybe change the color of the background to BG. Gray or zinc is what we are using, right BG zinc 200. So I'll remove text white and on hover I'll make this BG Zinc 300 fresh. Yeah, so this is the hide details button.

300 fresh. Yeah, so this is the hide details button. Now what do we have to do on clicking of view details button? We want to show this entire diff and on clicking hide details we do the reverse. To start with, we have set the show details to false. Now on click of view details, we saw that we do this in Alpine using the at click directive, we can simply set show details to false.

that we do this in Alpine using the at click directive, we can simply set show details to false. We can even toggle it, but this is safer. They say show de, oh sorry, show details is true. Sorry. So the moment you click on it show details is true and we add this same at click to the other button as well, hide details. But here we say show details is false. Simply doing this will not help. We'll have to add the X show directive to this paragraph

Simply doing this will not help. We'll have to add the X show directive to this paragraph or this entire diff to hide or show it, right? So here we say X show equals show details. So if show details is true, this will be shown, otherwise it's false. So the moment you added this, it's gone. Now let's click on view details. We are able to see this and click on hide details. It's gone. Of course we wanna hide this button as well.

We are able to see this and click on hide details. It's gone. Of course we wanna hide this button as well. So right here we add the same X show. And here we show this if it's false. So we'll have to use not of show details. Okay, now if everything goes well, clicking on this, make this button as well disappear. Yep, that's great. High details. Few details.

make this button as well disappear. Yep, that's great. High details. Few details. This is perfect. So with just a few directives we were able to um, make this component work. Next, let's uh, go and make this particular button book. First of all, maybe let's not use the star icon. Previously I copied star from hero icons. Let's change this to bookmark instead. So head over to hero icons.

Let's change this to bookmark instead. So head over to hero icons. If you like star you can keep it. So here I will search for bookmark and I will go for the solid version so we are able to see it more clearly. If it's bookmarked or not, copy SVG, come back here, replace this entire SVG with what we just copied. Paste it and we change the size

with what we just copied. Paste it and we change the size to five like we did previously. And I can close this, I can collapse this as well. Now let's see what this looks like. Yeah, this bookmark I can looks more like it. Now let's change this to a lighter shade of gray so that we know it's not bookmarked yet. Yeah, that's better. And on Hoover we can change the text. Uh, we can change the color to Amber maybe, um,

Yeah, that's better. And on Hoover we can change the text. Uh, we can change the color to Amber maybe, um, to add this Hoover text, Amber, maybe 600. Yeah, that's great. So now let's make this work. That is, if you click on it, this color should persist there. That is, there has to be a state that says this particular rule is bookmarked for that let's um, make this entire job card.

that says this particular rule is bookmarked for that let's um, make this entire job card. This is the entire card. Where's turn that into an alpine component using X data. And here, let's say bookmarked is false to begin with. Yes, bookmarked as false. Now if it's false, we want to see text zinc itself, but if it's true we would want to see a color of amble. So here, let's use, let's bind the class attribute to bookmarked to make that happen.

So here, let's use, let's bind the class attribute to bookmarked to make that happen. So I'll say colon class equals, is this bookmarked? If it is, then I'd like to actually see the text. Uh, Amber, maybe 500 else. I'd like to see text zinc 200 like it is right here. But I'm gonna remove this from here and leave only the Hoover class here.

But I'm gonna remove this from here and leave only the Hoover class here. So if it's bookmarked, we see text Amber 500 L zinc 200. For now we are seeing text Zinc 200. Let's uh, go back up here, change this to true and that will immediately change to Amber, right? But on click, let's try to change this. So on click of this button, using at click directive we toggle the bookmark variable bookmarked equals not of bookmarked.

using at click directive we toggle the bookmark variable bookmarked equals not of bookmarked. Okay, if all goes well clicking on this should turn to gray and it stays and clicking on it. Once again, it bookmarks. Yes, I know this will not persist. Like let's say um, if we refresh the page, it's again toggled back on. That is something we'll have to do in the backend. For now the front end is working. Alright, let me change this to false and keep it at that.

For now the front end is working. Alright, let me change this to false and keep it at that. Now finally, let's add a toast somewhere at the bottom right corner. The moment you click on this bill should be able to see this toast message saying add it to bookmarks. And when you click on it again it should say remove from bookmarks. So it's a much better user interface, right? The person will be able to clearly see that it worked.

So it's a much better user interface, right? The person will be able to clearly see that it worked. So right here, maybe at the end of it, um, just before closing main, let's add a diff let's uh, make it absolute. So we are able to display at the bottom right corner or I think it's fixed. Yeah, we can make it fixed and say bottom like say five, right Five.

and say bottom like say five, right Five. And um, we have a padding PX two BY one. And let's give it a BG green 100 background because it's always a success alert. And uh, yeah, we can add a text of 800 as well. Text green 800 a simple bo with a very light green Bo green 200. What else? Text sm maybe to make it look short. And here, let's say added to bookmarks.

What else? Text sm maybe to make it look short. And here, let's say added to bookmarks. We'll have to change this of course, but let's just see what it looks like. Yeah, that looks great. Uh, let's add a quick shadow and some rounded corners as well. Alright, so it would be great to see this toast when we click on it. So by default it's hidden.

when we click on it. So by default it's hidden. Now to make this work we'll have to make this entire main and alpine component. So sure, let's go ahead and say X data. Ensure the only variable for now we need is show toast. And let's set that to false. So down here we can add the X show attribute X show and set that to show toast. So it's hidden. Great on clicking off the bookmark

X show and set that to show toast. So it's hidden. Great on clicking off the bookmark icon right here on top right here. Let me just maximize this for now. So on click apart from changing this, we also need to show this toast. So here we will say show toast equals true. Now we're not toggling this, we are setting this to true. Let's see if this works. Refresh, click on it and yes, we are able to see the toast,

Let's see if this works. Refresh, click on it and yes, we are able to see the toast, but this message is um, might not be correct. Even if I remove bookmark, it says add to bookmarks. So we also need a message variable here, which changes accordingly. So along with show toast, let's also set a message to blank to begin with. And right here, based on whether bookmark is, uh, true or not, we will set the message.

And right here, based on whether bookmark is, uh, true or not, we will set the message. So if bookmark is true, the message will be added to bookmarks else. It'll be removed from bookmarks. Okay? And down here we simply don't hardcode this. Instead we use X text right here, say X text equals message. Okay, if everything goes well, this should work. Let's refresh the page, click on it,

Okay, if everything goes well, this should work. Let's refresh the page, click on it, it says add it to bookmarks. Click on it again, it says remove from bookmarks. Great. So the last thing we need is actually make this look like a toast. That is, this stays forever. We don't want that. We want to, um, hide it again after a few seconds so that we don't use any alpine magic. It's simple JavaScript.

after a few seconds so that we don't use any alpine magic. It's simple JavaScript. So once we set this, uh, where yeah, once we set the show toast to true, we should also set it to false after a timeout set time out to change it back to false after a few seconds. So here we'll say show dose equals false after. This is where you mentioned the number of milliseconds. So let's say after 3000 milliseconds

This is where you mentioned the number of milliseconds. So let's say after 3000 milliseconds or three seconds, let's change it. Let's change it back to false, right? We'll see if this works. Refresh the page, click on it, add it to bookmarks, wait. And then it's gone. Great. Click on it again, remove from bookmarks a couple more seconds and it's gone. So staying right here within index dot html, we were able

seconds and it's gone. So staying right here within index dot html, we were able to make quite a few interactions. We were able to view the details, hide them, bookmark the particular rule, show the toast, and so on. There's much more you can do with alpine js in combination with live Y. So for that you'll have to wait a few more episodes.