Add final alpine examples (#96)

README.md

@@ -294,10 +294,10 @@ How do we solve this ? Developers love having framework overview by examples. It
    * [x] Checkbox
    * [x] Radio
    * [x] Select
-* [ ] Webapp features
-   * [ ] Fetch data
-   * [ ] Router link
-   * [ ] Routing
+* [x] Webapp features
+   * [x] Fetch data
+   * [x] Router link
+   * [x] Routing
 
 </details><details>
         <summary>

content/7-webapp-features/1-fetch-data/alpine/index.html

@@ -0,0 +1,37 @@
+<div x-data="
+		function fetchUsers() {
+			return {
+				users: null,
+				isLoading: false,
+				error: null,
+				async init() {
+					this.isLoading = true;
+					try {
+						this.users = (await (await fetch('https://randomuser.me/api/?results=3')).json()).results;
+					} catch (err) {
+						this.users = [];
+						this.error = err
+					}
+					this.isLoading = false;
+				},
+			};
+		}
+	">
+    <template x-if="isLoading">
+        <p>Loading...</p>
+    </template>
+
+    <template x-if="error">
+        <p>Error fetching users</p>
+    </template>
+    <template x-if="!error">
+        <ul>
+            <template x-for="user in users">
+                <li>
+                    <img :src="user.picture.thumbnail" :alt="`picture of ${user.name.first} ${user.name.last}`">
+                    <p x-text="`${user.name.first} ${user.name.last}`"></p>
+                </li>
+            </template>
+        </ul>
+    </template>
+</div>

content/7-webapp-features/2-router-link/alpine/alpine.md

@@ -0,0 +1,8 @@
+Using [location.hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/hash)
+
+```html
+<nav>
+    <a href="#">Index</a>
+    <a href="#contact">Contact Us</a>
+</nav>
+```

content/7-webapp-features/3-routing/alpine/alpine.md

@@ -0,0 +1,21 @@
+Using [location.hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/hash)
+
+```html
+<nav>
+    <a href="#">Index</a>
+    <a href="#contact">Contact Us</a>
+</nav>
+<div x-data="{page: location.hash}" @hashchange.window="page = location.hash">
+    <span x-show="page === ''">
+        <h1>Welcome</h1>
+    </span>
+    <span x-show="page === '#contact'">
+        <p>
+        <ul>
+            <li>Lorem ipsum dolor</li>
+            <li>amet consectetur adipisicing elit</li>
+        </ul>
+        </p>
+    </span>
+</div>
+```