/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { lockfileImportMap } from "https://esm.town/v/maxm/lockfileImportMap"; 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 addTodo = async (e) => { e.preventDefault(); if (!newTodo.trim()) return; await fetch("/todos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: newTodo }), }); setNewTodo(""); fetchTodos(); }; const toggleTodo = async (id) => { await fetch(`/todos/${id}`, { method: "PATCH" }); fetchTodos(); }; const deleteTodo = async (id) => { await fetch(`/todos/${id}`, { method: "DELETE" }); fetchTodos(); }; return (

✨📝 Emojified Todo List 📝✨

toggleTodo(todo.id)} className="todo-content"> {todo.completed ? "✅" : "⬜"} {todo.content}

🌈🚀🎉 Keep being awesome! 🎉🚀🌈

); } 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 SCHEMA_VERSION = 1; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); 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); const path = url.pathname; if (path === "/todos" && request.method === "GET") { const todos = await sqlite.execute(`SELECT * FROM ${KEY}_todos_${SCHEMA_VERSION} ORDER BY id DESC`); return new Response(JSON.stringify(todos.rows), { headers: { "Content-Type": "application/json" } }); } if (path === "/todos" && request.method === "POST") { const { content } = await request.json(); await sqlite.execute(`INSERT INTO ${KEY}_todos_${SCHEMA_VERSION} (content) VALUES (?)`, [content]); return new Response(null, { status: 201 }); } if (path.startsWith("/todos/") && request.method === "PATCH") { const id = path.split("/")[2]; await sqlite.execute(`UPDATE ${KEY}_todos_${SCHEMA_VERSION} SET completed = NOT completed WHERE id = ?`, [id]); return new Response(null, { status: 200 }); } if (path.startsWith("/todos/") && request.method === "DELETE") { const id = path.split("/")[2]; await sqlite.execute(`DELETE FROM ${KEY}_todos_${SCHEMA_VERSION} WHERE id = ?`, [id]); return new Response(null, { status: 200 }); } return new Response( ` ✨📝 Emojified Todo List 📝✨

👀 View Source `, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f8ff; margin: 0; padding: 20px; display: flex; justify-content: center; } .container { background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-width: 500px; width: 100%; } h1 { text-align: center; color: #4a4a4a; margin-bottom: 20px; } .add-todo-form { display: flex; margin-bottom: 20px; } .new-todo-input { flex-grow: 1; padding: 10px; font-size: 16px; border: 2px solid #ddd; border-radius: 5px 0 0 5px; } .add-button { padding: 10px 15px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 0 5px 5px 0; cursor: pointer; } .todo-list { list-style-type: none; padding: 0; } .todo-item { background-color: #f9f9f9; border-radius: 5px; margin-bottom: 10px; padding: 10px; display: flex; justify-content: space-between; align-items: center; } .todo-item.completed .todo-content { text-decoration: line-through; color: #888; } .todo-content { cursor: pointer; flex-grow: 1; } .delete-button { background-color: transparent; border: none; cursor: pointer; font-size: 20px; } .emoji-footer { text-align: center; margin-top: 20px; font-size: 18px; } .view-source { position: fixed; bottom: 10px; right: 10px; background-color: #f0f0f0; padding: 5px 10px; border-radius: 5px; text-decoration: none; color: #333; font-size: 14px; } @media (max-width: 600px) { .container { width: 90%; } } `;