Unlisted
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
77
78
79
80
81
82
83
84
85
86
87
/** @jsxImportSource npm:hono/jsx **/
import { html, raw } from "npm:hono/html";
import { Hono } from "npm:hono@4.2.6";
const app = new Hono();
const title = "showModal() Demo";
const View = () => {
return (
<html>
<body>
<h1>{title}</h1>
<dialog id="favDialog">
<form method="dialog">
<p>
<label for="favAnimal">Favorite animal:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select>
</p>
<div>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</div>
</form>
</dialog>
<div>
<button id="updateDetails">Update details</button>
<p>
Animal Selected: <span id="animalSelected">No Animal Selected</span>
</p>
<p>
Based on example:{" "}
<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal">
mdn web docs - HTMLDialogElement: showModal() method
</a>
</p>
</div>
{html`
<script>
const updateButton = document.getElementById("updateDetails");
const cancelButton = document.getElementById("cancel");
const favAnimalSelect = document.getElementById("favAnimal");
const animalSelected = document.getElementById("animalSelected");
const dialog = document.getElementById("favDialog");
dialog.returnValue = "favAnimal";
function openCheck(dialog) {
if (dialog.open) {
console.log("Dialog open");
} else {
console.log("Dialog closed");
}
}
// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
dialog.showModal();
openCheck(dialog);
});
favAnimalSelect.addEventListener("change", () => {
animalSelected.innerText = favAnimalSelect.value;
});
// Form cancel button closes the dialog box
cancelButton.addEventListener("click", () => {
dialog.close("animalNotChosen");
openCheck(dialog);
});
</script>
`}
</body>
</html>
);
};
app.get("/", (c) => {
return c.html(<View />);
});
export default app.fetch;