Public
Script
October 23, 2023
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
export const generateGuestbookSnippet = (valUser: string, valName: string) => `
<form class="valtown-guestbook">
<div id="valtown-messages"></div>
<div><input id="valtown-name" placeholder="name" /></div>
<div><input id="valtown-message" placeholder="message"/></div>
<button id="valtown-submit" onclick="sendMessage()">Submit</button>
</form>
<script>
const msgList = document.querySelector('#valtown-messages');
const name = document.querySelector('#valtown-name');
const msg = document.querySelector('#valtown-message');
const submitBtn = document.querySelector('#valtown-submit');
async function getMessages() {
const r = await fetch('https://${valUser}-${valName}.express.val.run');
msgList.innerHTML = '<ul>';
msgList.innerHTML += (await r.json()).map(msg => {
return '<li>' + msg.name + ': ' + msg.text + '</li>'
}).join('');
msgList.innerHTML += '</ul>';
}
async function sendMessage() {
submitBtn.disabled = true
const r = await fetch('https://${valUser}-${valName}.express.val.run', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: name.value,
text: msg.value,
})
});
if (r.status === 200) {
submitBtn.disabled = false;
name.value = '';
msg.value = '';
await getMessages();
}
}
getMessages();
</script>
`;
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
October 23, 2023