Skip to content

Instantly share code, notes, and snippets.

@javedbaloch4

javedbaloch4/fetch-init.html

Created September 10, 2020 21:28
Show Gist options
  • Save javedbaloch4/c33e2a1b87246594e5949f9c9d12ceb9 to your computer and use it in GitHub Desktop.
Save javedbaloch4/c33e2a1b87246594e5949f9c9d12ceb9 to your computer and use it in GitHub Desktop.
Download ZIP
AlpineJS fetch & init example using Kanye.rest API.
Raw
fetch-init.html
<!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>Home</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="">
</head>
<body class="bg-gray-400 text-gray-800">
<div
class="container mx-auto px-4"
x-data="{ quote: '' }"
x-init="
fetch('https://api.kanye.rest')
.then(response => response.json())
.then(data => quote = data.quote)
"
>
<div class="flex items-center text-center justify-center h-screen text-2xl italic" x-text="`&quot;${quote}&quot`"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment