/** * This is a minimalist to-do list app using server-side rendering without any client-side JavaScript. * It uses Val Town's SQLite for data persistence, Deno's standard library for HTML escaping, * and custom SVG icons for a cohesive design. */ import { escapeHtml } from "https://deno.land/x/escape_html/mod.ts"; // Server-side only code export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1 const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Create the todos table if it doesn't exist await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_todos_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, content TEXT NOT NULL, completed BOOLEAN NOT NULL DEFAULT 0 ) `); const url = new URL(request.url); // Handle form submissions if (request.method === "POST") { const formData = await request.formData(); if (formData.get("action") === "add") { const content = formData.get("content"); if (content) { await sqlite.execute(`INSERT INTO ${KEY}_todos_${SCHEMA_VERSION} (content) VALUES (?)`, [content]); } } else if (formData.get("action") === "toggle") { const id = formData.get("id"); await sqlite.execute(`UPDATE ${KEY}_todos_${SCHEMA_VERSION} SET completed = NOT completed WHERE id = ?`, [id]); } else if (formData.get("action") === "delete") { const id = formData.get("id"); await sqlite.execute(`DELETE FROM ${KEY}_todos_${SCHEMA_VERSION} WHERE id = ?`, [id]); } // Redirect to clear the form submission return new Response(null, { status: 302, headers: { Location: url.pathname }}); } // Fetch todos from the database const todos = await sqlite.execute(`SELECT * FROM ${KEY}_todos_${SCHEMA_VERSION} ORDER BY id DESC`); // Custom SVG icons const checkboxIcon = ``; const trashIcon = ``; // Generate HTML for the todo list const todoListHtml = todos.rows.map(todo => `

${escapeHtml(todo.content)}

`).join(''); // Render the full HTML page const html = ` To Do List

To Do List

${todoListHtml}

View Source

`; return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8" }, }); }

niceTodoList