/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [todos, setTodos] = useState([]); const [newTodo, setNewTodo] = useState(''); useEffect(() => { fetchTodos(); }, []); const fetchTodos = async () => { const response = await fetch('/todos'); const data = await response.json(); setTodos(data); }; const handleAddTodo = async (e) => { e.preventDefault(); if (!newTodo.trim()) return; const response = await fetch('/todos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: newTodo, completed: false }) }); if (response.ok) { setNewTodo(''); fetchTodos(); } }; const handleToggleTodo = async (id, completed) => { const response = await fetch(`/todos/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ completed: !completed }) }); if (response.ok) { fetchTodos(); } }; const handleDeleteTodo = async (id) => { const response = await fetch(`/todos/${id}`, { method: 'DELETE' }); if (response.ok) { fetchTodos(); } }; return (

📝 Todo List

handleToggleTodo(todo.id, todo.completed)} /> {todo.text}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 1; // Ensure table exists await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_todos_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT NOT NULL, completed BOOLEAN DEFAULT 0, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); // Handle different HTTP methods if (request.method === 'GET' && new URL(request.url).pathname === '/todos') { const todos = await sqlite.execute(` SELECT * FROM ${KEY}_todos_${SCHEMA_VERSION} ORDER BY created_at DESC `); return new Response(JSON.stringify(todos.rows), { headers: { 'Content-Type': 'application/json' } }); } if (request.method === 'POST' && new URL(request.url).pathname === '/todos') { const { text, completed } = await request.json(); await sqlite.execute(` INSERT INTO ${KEY}_todos_${SCHEMA_VERSION} (text, completed) VALUES (?, ?) `, [text, completed ? 1 : 0]); return new Response('Created', { status: 201 }); } if (request.method === 'PATCH' && /^\/todos\/\d+$/.test(new URL(request.url).pathname)) { const id = new URL(request.url).pathname.split('/').pop(); const { completed } = await request.json(); await sqlite.execute(` UPDATE ${KEY}_todos_${SCHEMA_VERSION} SET completed = ? WHERE id = ? `, [completed ? 1 : 0, id]); return new Response('Updated'); } if (request.method === 'DELETE' && /^\/todos\/\d+$/.test(new URL(request.url).pathname)) { const id = new URL(request.url).pathname.split('/').pop(); await sqlite.execute(` DELETE FROM ${KEY}_todos_${SCHEMA_VERSION} WHERE id = ? `, [id]); return new Response('Deleted'); } return new Response(` Todo App

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; max-width: 500px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .todo-app { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } form { display: flex; margin-bottom: 20px; } input[type="text"] { flex-grow: 1; padding: 10px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px; } button { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } ul { list-style-type: none; padding: 0; } li { display: flex; align-items: center; background-color: #f9f9f9; margin-bottom: 10px; padding: 10px; border-radius: 4px; } li.completed span { text-decoration: line-through; color: #888; } li input[type="checkbox"] { margin-right: 10px; } li button { margin-left: auto; background: none; color: #ff4d4d; padding: 5px; } `;

todoApp