<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="description" content="htmx test">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<link href="/blockstart.css" rel="stylesheet">
<script src="/jzed.js"></script>
<script>
const get_message = async (url) => {
const data = await $fetch_json(url);
const message = $id("message");
if(data) {
$html(message, data.message);
} else {
$style([message, 'error']);
$html(message, "ERROR!");
}
}
</script>
<style>
.error {
background-color: red;
}
</style>
<title>Ex 10</title>
</head>
<body>
<block class="sized center" style="--h: 100vh; --w: 50vw;">
<block class="solid center sized pad" style="--h: min-content; --pad: 1rem;" id="fake-button" onClick="get_message('/messages.json')">
<h1 class="center" id="message">Click Me</h1>
</block>
<block class="solid center sized pad" style="--h: min-content; --pad: 1rem;" id="fake-button" onClick="get_message('/badcall.json')">
<h1 class="center">Click For Error</h1>
</block>
</block>
</body>
</html>