Now let's talk about the A in tall stack that is alpine js. It's a very lightweight JavaScript framework. Just like the way we wrote CSS in markup using Aven CSS, we are gonna write JavaScript in mockup using Alpine Andrea, but much less JavaScript of course. Now why do we need Alpine specifically for our application? We can use it for simple interactions like this view or hide details. We can respond to the click of this bookmark icon

or hide details. We can respond to the click of this bookmark icon and we can show this toast message as a confirmation when a user bookmarks a roll and automatically hide it after a few seconds. We can even filter the search results on the front end using Alpine, but we are gonna do that using livewire in the end. Now let's understand some basics of alpine js. I have created a new file Alpine html, in the same folder that we used in the previous chapter.

I have created a new file Alpine html, in the same folder that we used in the previous chapter. So let's continue with the same. I simply have the basic HDML structure and same style sheet that we used previously. Now let's head over to alpine js dev, which is the official Alpine JS website and click on get started. If you click here and go for installation, you'll see that there are two ways

If you click here and go for installation, you'll see that there are two ways to include Alpine in your project. One is directly from a script tag. The other one using NPM. For the simplicity of this episode, let's use the script tag so you can simply copy this line here and paste it anywhere inside head. So I'm gonna paste it right here. Note that this differ is very important for the performance and also right now Alpine three

Note that this differ is very important for the performance and also right now Alpine three XX is the uh, version we are using. That is whichever is the latest version correctly gets uh, loaded here. Since this is for development, it's okay, but if you're using an IT in production, it's better to use an exact version. Okay, now let's see what Alpine is all about. A simple markup like let's say just a simple div like this

Okay, now let's see what Alpine is all about. A simple markup like let's say just a simple div like this can be converted into an alpine component. That is you can make this part of HTML reactive. So let's say we have a simple text here saying hello alpine js and if I wanna make this an alpine component, I have to add the X data directive in Alpine. This is, this contains the exact state of this particular component, which is a set of variables and maybe a few functions as well.

of this particular component, which is a set of variables and maybe a few functions as well. So here, let me just set a variable called message and let me give the value alpine js. Now just this much will obviously not do anything. If I open this in the live server, you will simply see hello alpine js, but this part of the text here, I can make it reactive. So let me change this to, I'll add a span tag here and write here instead of um, writing it in HTM.

So let me change this to, I'll add a span tag here and write here instead of um, writing it in HTM. And instead of hard coding this, I'm gonna show this message by using the X text directive setting this to whatever variable we want. By doing this you'll be seeing the exact same thing, but now it's coming from message. So if I change this to world, we'll see hello world. You'll see the importance of this in a minute. Let's say we have a footer at the bottom

You'll see the importance of this in a minute. Let's say we have a footer at the bottom and we want to display the copyrights uh, message there with the current year. And we don't wanna change this every year at the beginning. So we say copyrights and copy and it would be great if we could have the year calculated and displayed, right? You don't need any backend framework for this. Instead here we can

You don't need any backend framework for this. Instead here we can get the ear from JavaScript using ear, use the date object, new date, do get full ear and now use the same span tag or you can use paragraph div, anything mainly X text directive and now display. This ear here can say here and now you will see the ear displayed here.

This ear here can say here and now you will see the ear displayed here. Great. Let me comment this out and show you some more directives which are really useful. Here's something you will use quite often. Let's say we have another div. Once again x data is important and we have a paragraph like let's say this message is either shown or hidden. Now if we set a variable like show

is either shown or hidden. Now if we set a variable like show and say it's true and then we can, based on this show, we can show this paragraph or not by using this other directive called X show and we just have to set this to the variable which contains the bullion, the true or false, we can even calculate this uh, based on something else.

or false, we can even calculate this uh, based on something else. So now since the show is set to true, we are able to see this message. Let me quickly change this to false and you'll not be able to see anything but this show value can be changed programmatically, like maybe uh, on the click of a button or something. So for that, let's try adding a button here and let the text be sure or hide.

So for that, let's try adding a button here and let the text be sure or hide. You can even say toggle and this will not look like a button because tailwind resets all the styles. Let's quickly add some styles that to make it look like a button, maybe BG gray, 100 border, border gray 200 and or some padding like P three. Okay, now that looks like a button. And on click of this what we want to do is change the value of this show.

And on click of this what we want to do is change the value of this show. So for that we use this directive called X on and we have many options like X on aboard, blur change, click and double click and so on. For now we use X on click equals and here you can add an expression. So we say show equals not of show because we want to toggle. So whatever it is it, if it's true, it changes to false. If it's false, it changes to true and now let's refresh.

So whatever it is it, if it's true, it changes to false. If it's false, it changes to true and now let's refresh. And since it's false to begin with, we'll have to click it to turn this to true and we can see it click again and it's gone. Great. This can also be a shortcut. You don't have to write X on click. You can simply say at click and it works the same way. All right, now let me comment this out as well while we look at

All right, now let me comment this out as well while we look at yet another very useful directive which is X bind. Now once again, let's have some data here and um, I will add it in a moment. Let's say we have a paragraph with an alert and it could either be a success alert or a failure one, an alert here. So let's say uh, we have this success variable set to true or false.

So let's say uh, we have this success variable set to true or false. And if it's true, we would like to show this alert in green color else we would like to in red color we can bind HTML attributes to the data using X bind. So here we say X bind and we want to bind the class because we wanna change it based on success, right? So here if success is true, that is success because the ary operate operator, we like

So here if success is true, that is success because the ary operate operator, we like to have the classes BG green, uh, say 300. Otherwise we'd like BG red 300. Okay? And let me add normal classes to it as well just to have some padding here. P one. So the moment you do this, since success is true, you're able to see this in green. The moment I change this to faults,

you're able to see this in green. The moment I change this to faults, you'll be able to see this in red. So this is obviously very useful, right? And once again, there is a shortcut for this. You don't have to write x bind, you can omit that, simply add a colon and that will bind this particular um, attribute. Let's commend this out as well and move on to one last directive, which is X model.

Let's commend this out as well and move on to one last directive, which is X model. Once again, we start with the diviv, make it an alpine component using X data and let's have an input. Once again, let's add some classes, otherwise we might not be able to see it. B two border, maybe border gray 200. And let me save this refresh.

gray 200. And let me save this refresh. We have the input, let's add a placeholder for this saying, uh, your name here or type your full name. And here down below we can validate this in the front end itself using alpine js. So let's say we want this full name to be required. So required input and we can show the alert here. If, uh, the person hasn't typed anything for that, we need

So required input and we can show the alert here. If, uh, the person hasn't typed anything for that, we need to know what's typed in this input. Let's have um, name variable here and to begin with it's blank. Now you can bind this input, whatever the user types here using X model. So you can say X model equals name. Now this name will change as and when you type whatever here.

Now this name will change as and when you type whatever here. So just to check if that's working. Let's say x text equals name. So now whatever you type here should appear below. So I'll say my name is Shahi and that's appearing great. So how do we show this alert? If this is empty here you can say, um, you know, this is a required field. Currently this is visible.

you know, this is a required field. Currently this is visible. Now based on whether name is uh, the length of this is zero or not, we can show or hide this. So here we will bind the class attribute of this and say name do length. Now if this is greater than zero, what do we do? We hide this message. So we add the class hidden else. We show this using block.

So we add the class hidden else. We show this using block. Okay, so currently, um, this doesn't look like an alert. So let me add some glasses as well. Here I say class text SM text red 400. Let's also add some margin. Yeah. Now it says this is a required field. The moment I start typing it's gone. Even if you type one character, it's gone obviously.

The moment I start typing it's gone. Even if you type one character, it's gone obviously. So these are some of the basic things about Alpine. You saw once again, we didn't leave the markup at all. We simply added one script tag and we were able to convert any part of the HTML document into a component that is, we could make it reactive and we could do so many interactions. So in the next episode, we'll see how to use this and make our own app reactive.

So in the next episode, we'll see how to use this and make our own app reactive.