<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="app">
	<p x-if="joke" x-text="joke"></p>
	
	<button @click="newJoke">New Joke</button>
</div>

p {
	font-size: 3em;
}

button {
	height: 100px;
	width: 250px;
	font-size: 3em;
}
document.addEventListener("alpine:init", () => {
	Alpine.data("app", () => ({
		joke:null,
		async init() {
			console.log('init');
			this.joke = await getDadJoke();
			console.log(this.joke);
		},
		async newJoke() {
			this.joke = await getDadJoke();
		}
	}));
});

async function getDadJoke() {
	let resp = await fetch('https://icanhazdadjoke.com/', {
		headers: {
			'Accept':'application/json'
		}
	});
	return (await resp.json()).joke;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.