Public
HTTP (deprecated)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/** @jsxImportSource npm:hono/jsx */
import { Hono } from "npm:hono@3.10.2";
import { jsxRenderer } from "npm:hono/jsx-renderer";
// Simulated database
let contact = {
id: 1,
firstName: "Joe",
lastName: "Blow",
email: "joe@blow.com"
};
const app = new Hono();
app.get('*', jsxRenderer(({ children }) => (
<html>
<head>
<title>Click to Edit Demo</title>
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
<style>{`
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
label { font-weight: bold; }
input { margin: 5px 0; padding: 5px; width: 100%; }
button { margin: 10px 5px 0 0; padding: 5px 10px; }
`}</style>
</head>
<body>{children}</body>
</html>
)));
const ContactView = ({ contact }) => (
<div hx-target="this" hx-swap="outerHTML">
<div><label>First Name</label>: {contact.firstName}</div>
<div><label>Last Name</label>: {contact.lastName}</div>
<div><label>Email</label>: {contact.email}</div>
<button hx-get="/contact/1/edit" class="btn primary">
Click To Edit
</button>
</div>
);
const ContactEditForm = ({ contact }) => (
<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
<div>
<label>First Name</label>
<input type="text" name="firstName" value={contact.firstName} />
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="lastName" value={contact.lastName} />
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" name="email" value={contact.email} />
</div>
<button class="btn">Submit</button>
<button class="btn" hx-get="/contact/1">Cancel</button>
</form>
);
app.get('/', (c) => c.render(<ContactView contact={contact} />));
app.get('/contact/1', (c) => c.render(<ContactView contact={contact} />));
app.get('/contact/1/edit', (c) => c.render(<ContactEditForm contact={contact} />));
app.put('/contact/1', async (c) => {
const body = await c.req.parseBody();
contact = { ...contact, ...body };
return c.render(<ContactView contact={contact} />);
});
export default {
fetch: app.fetch,
port: 3000,
};