add counter example #1 (comment)

README.md

@@ -58,7 +58,9 @@ Run the following command in your terminal:
 npm i
 ```
 
-> **Note**: assumes you have **`node.js`** installed. 
+> **Note**: assumes you have 
+> [**`node.js`**](https://nodejs.org/en)
+> installed. 
 
 
 That will install the `live-server` dependency, 

index.html

@@ -27,7 +27,8 @@ <h1 class="text-5xl mb-4">Alpine.js Demo</h1>
         {title: 'Post Two'},
         {title: 'Post Three'},
         {title: 'Post Four'},
-      ]
+      ],
+      count: 0
     }"
     >
       <!-- x-on - Listen for browser events on an element -->
@@ -50,6 +51,17 @@ <h1 class="text-5xl mb-4">Alpine.js Demo</h1>
         </p>
       </div>
 
+      <!-- basic counter -->
+      <div class="flex">
+        <button x-on:click="count--" class="bg-red-600 p-4 my-12 rounded-xl text-white ">
+          Decrement
+        </button>
+        <span x-text="count" class="min-w-[30%] text-7xl text-center py-12">0</span>
+        <button x-on:click="count++" class="bg-green-600 p-4 my-12 rounded-xl text-white">
+          Increment
+        </button>
+      </div>
+
       <!-- x-text - Set the text content of an element / display data -->
       <div class="my-4">
         The value of name is <span x-text="name" class="font-bold"></span>