/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [items, setItems] = useState([]); const [newItem, setNewItem] = useState(""); useEffect(() => { fetchItems(); }, []); const fetchItems = async () => { const response = await fetch("/items"); const data = await response.json(); setItems(data); }; const handleAddItem = async () => { if (newItem.trim() === "") return; await fetch("/items", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ item: newItem }), }); setNewItem(""); fetchItems(); }; const handleKeyPress = (e) => { if (e.key === "Enter") { handleAddItem(); } }; const removeItem = async (id) => { await fetch(`/items/${id}`, { method: "DELETE" }); fetchItems(); }; const clearList = async () => { await fetch("/items", { method: "DELETE" }); fetchItems(); }; return (

Grocery List

setNewItem(e.target.value)} onKeyPress={handleKeyPress} placeholder="Enter a new item" />

{item.name}

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 SCHEMA_VERSION = 1; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_grocery_list_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL ) `); const url = new URL(request.url); const path = url.pathname; if (path === "/items" && request.method === "GET") { const items = await sqlite.execute(`SELECT * FROM ${KEY}_grocery_list_${SCHEMA_VERSION}`); return new Response(JSON.stringify(items.rows), { headers: { "Content-Type": "application/json" }, }); } else if (path === "/items" && request.method === "POST") { const { item } = await request.json(); await sqlite.execute(`INSERT INTO ${KEY}_grocery_list_${SCHEMA_VERSION} (name) VALUES (?)`, [item]); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } else if (path.startsWith("/items/") && request.method === "DELETE") { const id = path.split("/").pop(); await sqlite.execute(`DELETE FROM ${KEY}_grocery_list_${SCHEMA_VERSION} WHERE id = ?`, [id]); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } else if (path === "/items" && request.method === "DELETE") { await sqlite.execute(`DELETE FROM ${KEY}_grocery_list_${SCHEMA_VERSION}`); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } return new Response(` Grocery List

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } .container { width: 80%; max-width: 600px; margin: auto; overflow: hidden; padding: 20px; background-color: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 5px; margin-top: 20px; } h1 { color: #333; text-align: center; font-size: 24px; margin-bottom: 20px; } .add-item { display: flex; margin-bottom: 20px; } input[type="text"] { flex-grow: 1; padding: 8px; font-size: 14px; } button { padding: 8px 12px; background-color: #4CAF50; color: white; border: none; cursor: pointer; font-size: 14px; } button:hover { background-color: #45a049; } .item-list { list-style-type: none; padding: 0; } .item-list li { background-color: #f9f9f9; margin-bottom: 5px; padding: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .delete-btn { background: none; border: none; cursor: pointer; font-size: 18px; padding: 0; margin-left: 10px; } .delete-btn:hover { opacity: 0.7; } `;

groceries