We'll build a live todo list web app together.

1. Pin Preview: Click the 📌 icon (top-right of this panel) to keep this view open.

2. Live Edits: As you edit todo.ts on the left, the 'Live Preview' below will update.

Click 'Next Step' to begin!

\n `,\n code: ``,\n lang: \"text\",\n },\n // Step 1: Edit H1\n {\n title: \"Step 1: Personalize Header\",\n instructions: `\n

Task: In todo.ts, find the <h1> tag and change its text to include your name.

Then click 'Next Step'.

\n `,\n code: `\n const userName = \"Your Name\";`,\n lang: \"js\",\n },\n // Step 2: Add HTML Form\n {\n title: \"Step 2: Add Input Form\",\n instructions: `\n

Task: Add an HTML form below the heading in todo.ts so we can add new todos.

Copy the form code below and place it right after your <h1> tag.

\n `,\n code: `\n`,\n lang: \"html\",\n },\n // Step 3: Handle Form & Display (In-Memory)\n {\n title: \"Step 3: Display Submitted Todo\",\n instructions: `\n

Task: Make the form work (temporarily). Replace the entire code in todo.ts with the snippet below.

Add a todo! (It will disappear on refresh for now).

\n `,\n code: `// Replace entire content of todo.ts:\nimport { html } from \"https://esm.town/v/stevekrouse/html?v=5\";\n\nlet todos: string[] = []; // Temporary store for this request\n\nexport default async function todoAppTarget(req: Request): Promise {\n // *** Replace \"Your Name\" with your actual name! ***\n const userName = \"Your Name\"; \n\n if (req.method === \"POST\") {\n try {\n const formData = await req.formData();\n const newTodo = formData.get(\"newTodo\") as string;\n // Add to list only for this response generation\n if (newTodo && newTodo.trim() !== \"\") {\n todos.push(newTodo.trim()); \n }\n } catch (e) { \n console.error(\"Error processing form:\", e);\n return new Response(\"Failed to process form\", { status: 400 });\n }\n } else {\n // Clear temporary list on page load (GET request)\n todos = []; \n }\n\n const todoListHtml = todos.map(todo => \\`

\\${todo}

\\`).join('');\n\n return html(\\`\n \n \n \\${userName}'s Todo List\n \n

\\${userName}'s Todo List

\n \n

No todos yet!

\n \n \n \\`);\n}`,\n lang: \"typescript\",\n },\n // Step 4: Make Todos Persistent (SQLite)\n {\n title: \"Step 4: Set Up SQLite Storage\",\n instructions: `\n

1. Create sqliteStorage.ts with this code:

This creates a SQLite database to store your todos permanently!

\n `,\n code: `import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// Create todos table if it doesn't exist\nconst TABLE_SCHEMA = \\`CREATE TABLE IF NOT EXISTS todos (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n item TEXT NOT NULL,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\\`;\n\nawait sqlite.execute(TABLE_SCHEMA);\nconsole.log(\"Database table 'todos' checked/created.\");\n\n// Type definition for todo items from database\ninterface Todo {\n id: number;\n item: string;\n created_at: string;\n}\n\n// Function to add a todo item\nexport async function addTodo(item: string): Promise {\n // Basic validation\n if (!item || item.trim() === \"\") {\n throw new Error(\"Cannot add empty todo item.\");\n }\n\n // Execute insert statement\n await sqlite.execute({\n sql: \"INSERT INTO todos (item) VALUES (:item);\",\n args: { item: item.trim() }, // Use named arguments\n });\n\n console.log(\"Added item to DB:\", item.trim());\n}\n\n// Get todos sorted by newest first\nexport async function getTodos(): Promise {\n const result = await sqlite.execute(\"SELECT id, item, created_at FROM todos ORDER BY created_at DESC;\");\n // Assert the row type - add runtime validation if needed for robustness\n return result.rows as Todo[];\n}\n\n// Optional: Function to delete todos by ID (not used in the tutorial steps yet)\nexport async function deleteTodo(id: number): Promise {\n if (typeof id !== \"number\") {\n throw new Error(\"Invalid ID for deletion.\");\n }\n\n await sqlite.execute({\n sql: \"DELETE FROM todos WHERE id = :id;\",\n args: { id },\n });\n\n console.log(\"Deleted todo with ID:\", id);\n}`,\n lang: \"typescript\",\n },\n // New Step 4b: Update Web App\n {\n title: \"Step 4b: Update Web App\",\n instructions: `\n

Task: Now let's update todo.ts to use the database!

Replace the entire content of todo.ts with this code:

\n `,\n code: `import { html } from \"https://esm.town/v/stevekrouse/html?v=5\";\n\n// You can use relative paths for importing within the same val\nimport { addTodo, getTodos } from \"./sqliteStorage.ts\";\n\nexport default async function todo(req: Request): Promise {\n // Handle form submissions\n if (req.method === \"POST\") {\n try {\n const formData = await req.formData();\n const newTodo = formData.get(\"newTodo\") as string;\n\n if (newTodo && newTodo.trim() !== \"\") {\n await addTodo(newTodo.trim());\n }\n } catch (e) {\n console.error(\"Error adding todo:\", e);\n }\n return Response.redirect(req.url, 303); // Redirect back to main page after adding\n }\n\n // Get and display todos\n let todos = [];\n try {\n todos = await getTodos();\n } catch (e) {\n console.error(\"Error getting todos:\", e);\n }\n\n // Generate HTML list of todos (todo[1] contains the todo text)\n const todoListHtml = todos.map(todo_row => \\`

\\${todo_row[1]}

\\`).join(\"\");\n\n return html(\\`\n \n \n \n Char's Todo List \n \n \n \n

Char's Todo List

\n\n \n

No todos yet! Add one above.

\n \n \n \\`);\n}`,\n lang: \"typescript\",\n },\n // Step 5: Daily Email Reminder\n {\n title: \"Step 5: Daily Email Reminder (Optional)\",\n instructions: `\n

Let's set up email reminders for your todos! ⚠️ Important scheduling info below.

1. Create emailReminder.ts:

2. Check Import: Make sure ./sqliteStorage.ts matches your storage val name.

3. Scheduling (IMPORTANT):

Make the file a cron to run every day for example
⚠️ Warning: If you don't change the schedule, you'll get emails every hour!

Emails will be sent to your Val Town account email address.

\n `,\n code: `// Create emailReminder.ts:\nimport { email } from \"https://esm.town/v/std/email\";\nimport { getTodos } from \"./sqliteStorage.ts\";\n\nexport const emailMeMyTodos = async () => {\n let todos = [];\n try {\n todos = await getTodos();\n } catch (e) {\n console.error(\"Failed to get todos for email reminder:\", e);\n return;\n }\n\n if (todos.length > 0) {\n const todoItemsText = todos.map((todo, index) => \\`\\${index + 1}. \\${todo[1]}\\`).join(\"\\\\n\");\n const emailSubject = \\`Your Val Town Todo Reminder (\\${todos.length} items)\\`;\n const emailText = \\`Hi there!\\\\n\\\\nHere are your pending todos:\\\\n\\\\n\\${todoItemsText}\\\\n\\\\nHave a great day!\\\\n\\\\n(Sent from your Val Town val)\\`;\n\n try {\n await email({ subject: emailSubject, text: emailText });\n console.log(\\`Sent reminder with \\${todos.length} items.\\`);\n } catch (e) {\n console.error(\"Failed to send reminder email:\", e);\n }\n } else {\n console.log(\"No pending todos, skipping email reminder.\");\n }\n};`,\n lang: \"typescript\",\n },\n // Step 6: Finish\n {\n title: \"Tutorial Complete!\",\n instructions: `\n

Congratulations! You built a full Todo app.

Web App: todo.ts
Database: sqliteStorage.ts
Email: emailReminder.ts

Use your app: Live Link

\n `,\n code: ``,\n lang: \"text\",\n },\n];\n\n// --- HTTP Handler ---\nexport default async function interactiveTutorialHandler(req: Request): Promise {\n const url = new URL(req.url);\n const currentStep = parseInt(url.searchParams.get(\"step\") || \"0\", 10);\n\n const safeStep = Math.max(0, Math.min(currentStep, tutorialSteps.length - 1));\n const stepData = tutorialSteps[safeStep];\n\n try {\n let highlightedCodeHtml = \"\";\n\n // Only run highlighter if there's code for the current step\n if (stepData.code && stepData.code.trim() !== \"\") {\n // Cache highlighter instance? Could be optimization if needed.\n const highlighter = await getHighlighter({\n themes: [\"github-light\"],\n langs: [stepData.lang || \"text\", \"html\", \"css\", \"javascript\", \"typescript\"],\n });\n\n highlightedCodeHtml = highlighter.codeToHtml(stepData.code, {\n lang: stepData.lang || \"text\",\n theme: \"github-light\",\n });\n }\n\n const nextStep = safeStep + 1;\n const isLastStep = safeStep >= tutorialSteps.length - 1;\n\n // Construct the HTML page\n const tutorialPageHtml = `\n\n\n\n \n \n VT Tutorial: Step ${safeStep} \n \n\n\n

${stepData.title}

${stepData.instructions}

\n ${/* Conditionally render the highlighted code block */ \"\"}\n ${highlightedCodeHtml ? highlightedCodeHtml : \"\"} \n

\n\n

Live Preview:

\n \n

\n \n \n

\n \n\n\n `;\n\n return new Response(tutorialPageHtml, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n } catch (error) {\n console.error(\"Error in tutorial handler:\", error);\n // Provide a more user-friendly error response in the tutorial UI\n return new Response(\n `

Error

Sorry, an error occurred in the tutorial handler:

${error.message}

`,\n {\n status: 500,\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n },\n );\n }\n}","deleted","label",[99],"permalink","https://www.val.town/x/charmaine/onboarding_draft/code/tutorial.ts","extension","actionData","errors"]