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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource https://esm.sh/preact */
import { render } from "npm:preact-render-to-string";
export default async function(req: Request) {
if (req.method === "POST") {
const name = (await req.formData()).get("name");
return new Response(render(<>Hello {name || "World"}!</>));
}
return new Response(
render(
<html>
<head>
<title>Title</title>
<style>{"html { font-family: sans-serif; }"}</style>
<style>@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');</style><div class="newsletter-form-container"><form class="newsletter-form" action="https://app.loops.so/api/newsletter-form/clbv5du7z04g2ju08qcznl56v" method="POS
<script src="https://unpkg.com/htmx.org@1.9.9"></script>
<script>
function submitHandler(event) {
event.preventDefault();
var container = event.target.parentNode;
var form = container.querySelector(".newsletter-form");
var formInput = container.querySelector(".newsletter-form-input");
var success = container.querySelector(".newsletter-success");
var errorContainer = container.querySelector(".newsletter-error");
var errorMessage = container.querySelector(".newsletter-error-message");
var backButton = container.querySelector(".newsletter-back-button");
var submitButton = container.querySelector(".newsletter-form-button");
var loadingButton = container.querySelector(".newsletter-loading-button");
const rateLimit = () => {
errorContainer.style.display = "flex";
errorMessage.innerText = "Too many signups, please try again in a little while";
submitButton.style.display = "none";
formInput.style.display = "none";
backButton.style.display = "block";
}
// Compare current time with time of previous sign up
var time = new Date();
var timestamp = time.valueOf();
var previousTimestamp = localStorage.getItem("loops-form-timestamp");
// If last sign up was less than a minute ago
// display error
if (previousTimestamp && Number(previousTimestamp) + 60000 > timestamp) {
rateLimit();
return;
}
localStorage.setItem("loops-form-timestamp", timestamp);
submitButton.style.display = "none";
loadingButton.style.display = "flex";
var formBody = "userGroup=&email=" + encodeURIComponent(formInput.value);
fetch(event.target.action, {
method: "POST",
body: formBody,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
})
.then((res) => [res.ok, res.json(), res])
.then(([ok, dataPromise, res]) => {
if (ok) {
// If response successful
// display success
success.style.display = "flex";
form.reset();
} else {
// If response unsuccessful
// display error message or response status
dataPromise.then(data => {
errorContainer.style.display = "flex";
errorMessage.innerText = data.message
? data.message
: res.statusText;
});
}
})
.catch(error => {
// check for cloudflare error
if (error.message === "Failed to fetch") {
rateLimit();
return;
}
// If error caught
// display error message if available
errorContainer.style.display = "flex";
if (error.message) errorMessage.innerText = error.message;
localStorage.setItem("loops-form-timestamp", '');
})
.finally(() => {
formInput.style.display = "none";
loadingButton.style.display = "none";
backButton.style.display = "block";
});
}
function resetFormHandler(event) {
var container = event.target.parentNode;