From fcde336e76c05494850b7822e814c1d0bebcbe3b Mon Sep 17 00:00:00 2001
From: nelsonic <nelson+github@dwyl.com>
Date: Tue, 14 Jun 2022 11:14:40 +0100
Subject: [PATCH] add counter example
 https://github.com/dwyl/learn-alpine.js/issues/1#issuecomment-1154991061

---
 README.md  |  4 +++-
 index.html | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5a72c40..e1c0d05 100644
--- a/README.md
+++ b/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, 
diff --git a/index.html b/index.html
index f184d58..fb0d34d 100644
--- a/index.html
+++ b/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>