DEV Community 👩‍💻👨‍💻

Cover image for Alpine.js simple counter
mohsen
mohsen

Posted on • Originally published at e2e.utopiops.com

Alpine.js simple counter

In this series, I've bing posting tiny articles to familiarise you with Alpine.js, an extremely simple yet very effective framework to build web applications.

Today, I'll show you how to handle events along with diving a bit deeper into the syntax while still keeping the tutorial so simple and short that you can read it while taking a break or perhaps in between other things you're doing.

We start by creating an index.html file and importing Alpine in the head of our html:

<html>
  <head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  </head>
...
Enter fullscreen mode Exit fullscreen mode

Our counter has two buttons + and - to increase and decrease the value of our counter. So, we need to store the value of our counter, plus a mechanism to increase and decrease the value of the counter by clicking the buttons.

Let's first use x-data directive to store our counter's value and reference it in our x-text directive:

<div x-data="{ count: 0 }">
  <button>-</button>
  <span x-text="count"></span>
  <button>+</button>
</div>
Enter fullscreen mode Exit fullscreen mode

I have explained more about x-data and x-text in my previous post you can find here.

Now, the last step is to add the functionality to our buttons. To add an on click event handler we use x-on directive with the event name which is click:

<div x-data="{ count: 0 }">
  <button x-on:click="count = count > 0 ? count-1 : count">-</button>
  <span x-text="count"></span>
  <button x-on:click="count++">+</button>
</div>
Enter fullscreen mode Exit fullscreen mode

x-on allows you to easily run code on dispatched DOM events.

💡 Make sure you use lower case name for the event.

You can see here to show you a bit more about the syntax of Alpine, in our event handler for - button we check if the value of count is greater than 0 we decrease it by one otherwise we don't change the value.

This is how our code looks like at the end.

<html>
  <head>
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>
  </head>
  <body>
    <div x-data="{ count: 0 }">
      <button x-on:click="count = count > 0 ? count-1 : count">-</button>
      <span x-text="count"></span>
      <button x-on:click="count++">+</button>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now that we have our code ready, let's deploy it on utopiops

Head over to the Fully managed applications section as we want to use free static website deployment and hosting that Utopiops offers.

Screen Shot 2021-12-31 at 8.16.15 pm.png

Now we choose Static website as the application type to be created. (Utopiops also offers free plans for Function and Dockerized applications)

Screen Shot 2021-12-31 at 8.16.35 pm.png

Now the only thing we need to know is to specify the repository that we store our code (Utopiops supports Github, Bitbucket and Gitlab).

Remember we don't need to provide any build command!

Screen Shot 2022-01-04 at 3.24.57 pm.png

And that's it, in a few seconds we have our website ready and every time we make a change to our code it automatically deploys our changes.

https://alpinejs-counter-utopiops-732b9a80.sites.utopiops.com

Note: Utopiops is in public beta at the time of writing this post and the view you see when you log in to Utopiops at https://www.utopiops.com might be different, but the good news is that it sure just have become more user-friendly and easier to use.

Oldest comments (1)

Collapse
 
claudiogermano profile image
0xJinbe

Nice tutorial sir...And how can I return the counter value to use in other functions?
tnks

What image format should you use in your next project? 🤔