In this tutorial we will create simple count app using Apline Js and create simple ui using Tailwind css.
Alpine js is a lightweight library to and interactivity new front-end framework. Alpine js syntax is almost similar to Vue js , so if you know vue , then it is easy to learn this framework.
Tools use
Tailwind CSS 2 CDN
Apline js 2.8 CDN
Tailwind CSS 2 CDN
in this section i use tailwind css, you can use any css Framework
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">Apline js 2.8 CDN
use defer attribute , defer attribute specifies that the script is executed when the page has finished parsing. if you are put script in before close head then use defer .
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Create Simple App count Using Apline js with Tailwind CSS </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
</body>
</html>Next, create ui using tailwind css
<div>
<div class="flex items-center justify-center h-screen bg-gray-200">
<button class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Increment</button>
<span class="m-5" x-text="count">0</span>
<button class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Decrement</button>
</div>
</div>Now, you need to put empty div x-data declares a new component scope. It tells the framework to initialize a new component with the data object.
first you define variable {count: 0} and next you need to add click method using x-on:click you also use @:click u and give value ++
operator for Increment and -- for Decrement ,In Last use x-text for show interactive state
You Can also use second Way to do this task
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Create Simple App count Using Apline js with Tailwind CSS </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="counter()">
<div class="flex items-center justify-center h-screen bg-gray-200">
<button x-on:click="increment()"
class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Increment</button>
<span class="m-5" x-text="count">0</span>
<button x-on:click="decrement()"
class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Decrement</button>
</div>
</div>
<script>
function counter() {
return {
count: 0,
increment() {
this.count++;
},
decrement() {
this.count--;
}
};
}
</script>
</body>
</html>
