Skip to content

Instantly share code, notes, and snippets.

@bzerangue
Created July 26, 2021 20:56
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save bzerangue/12c46b219db90c7e3b3ec5acb621038f to your computer and use it in GitHub Desktop.
Alpine JS + fetch()
<div class="h-full bg-gray-200 text-gray-800 p-4 lg:p-8"
x-data="alpineInstance()"
x-init="fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => users = data)">
<h1 class="mt-0 mb-3 font-light text-3xl" x-text="title"><!-- title text --></h1>
<p class="text-xl text-gray-600 font-light mb-4" x-html="intro"><!-- intro text --></p>
<div class="flex flex-wrap -mx-2 pb-8">
<!-- begin: user card -->
<template x-for="user in users" :key="user.id">
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 h-full font-light">
<div class="flex bg-white rounded-lg shadow-md m-2 border-l-4 border-white hover:shadow-2xl hover:border-pink-500 cursor-pointer relative">
<div class="p-4 pr-6 leading-normal">
<div class="font-medium text-xl truncate" x-text="user.name"></div>
<div class="truncate uppercase text-xs text-gray-500 font-semibold pb-2 tracking-widest" x-text="user.company.name"></div>
<div class="" x-text="user.phone"></div>
<a class="text-blue-600 hover:text-blue-700 mr-4 block" x-bind:href="'mailto:' + user.email" x-text="user.email"></a>
<a class="text-blue-600 hover:text-blue-700 block" x-bind:href="'https://' + user.website" x-text="user.website"></a>
</div>
</div>
</div>
</template>
<!-- end: user card -->
</div>
</div>
function alpineInstance() {
return {
title: 'Alpine.js',
intro: 'Implement a simple <code class="text-md text-pink-600">fetch()</code> request to render a list of items using Alpine.js :)',
users: [],
}
}
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js"></script>
body, html {
padding:0;
margin:0;
height:100%;
background: #edf2f7;
}
.text-link {
@apply text-blue-600 hover:text-blue-700;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment