Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>FastAPI Message Board</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <style> | |
| body { max-width: 600px; margin: 2rem auto; font-family: sans-serif; } | |
| form { display: flex; gap: .5rem; margin-bottom: 1rem; } | |
| input { flex: 1; padding: .5rem; } | |
| ul { list-style: none; padding: 0; } | |
| li { border-bottom: 1px solid #ddd; padding: .5rem 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>📬 Message Board</h1> | |
| <form id="form"> | |
| <input id="input" placeholder="Write something..." required /> | |
| <button type="submit">Save</button> | |
| </form> | |
| <ul id="messages"></ul> | |
| <script> | |
| const form = document.getElementById("form"); | |
| const input = document.getElementById("input"); | |
| const messages = document.getElementById("messages"); | |
| async function load() { | |
| const data = await fetch("/api/messages").then(res => res.json()); | |
| messages.innerHTML = ""; | |
| data.forEach(m => { | |
| const li = document.createElement("li"); | |
| li.textContent = m.text; | |
| messages.appendChild(li); | |
| }); | |
| } | |
| form.addEventListener("submit", async e => { | |
| e.preventDefault(); | |
| const text = input.value.trim(); | |
| if (!text) return; | |
| await fetch("/api/messages", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ text }) | |
| }); | |
| input.value = ""; | |
| load(); | |
| }); | |
| load(); | |
| </script> | |
| </body> | |
| </html> | |