${todo_row[1]}

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

Char's Todo List

\n\n\n \n\n

No todos yet! Add one above.

\n\n \n\n \n\n `);\n}",[],[207],{"_104":215,"_96":100,"_157":216,"_159":-5,"_160":142,"_161":217,"_163":118,"_106":218,"_101":219,"_166":210,"_168":220,"_170":22,"_171":-5,"_172":221,"_99":222},"2daa598e-1714-11f0-acfd-569c3dd06744","b33c3666-170b-11f0-89bd-569c3dd06744",451,["D",1744403588102],39,"import { getHighlighter } from \"npm:shikiji\";\n\n// TODO: UPDATE THIS URL TO THE USER'S ACTUAL VAL\nconst TARGET_VAL_URL = \"https://charmaine--d308ccc8170311f0af34569c3dd06744.web.val.run\";\n\nconst tutorialSteps = [\n // Step 0: Orientation\n {\n title: \"Welcome! Let's Build a Todo List\",\n instructions: `\n

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}",[],[100],"files",[154,175,184,195,205,214],"counts",{"_227":32,"_228":190,"_229":32,"_230":231},"pulls","branches","forks","envVars",{"_232":32,"_233":32},"count","emptyCount","contents",[],{"_104":215,"_160":142,"_157":216,"_96":100,"_168":220,"_166":210,"_101":219,"_159":-5,"_106":237,"_161":217,"_171":-5,"_99":238},["D",1744403588102],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_94":95,"_96":97,"_98":44,"_99":100,"_102":247,"_167":252,"_255":256,"_299":300,"_310":-7,"_311":179,"_312":22},{"_104":105,"_96":97,"_106":248,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":-5,"_120":121,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":249,"_136":250,"_139":251,"_151":22},["D",1744385402095],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":114},{"_101":141,"_96":44,"_104":142,"_143":105,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},{"_104":215,"_96":100,"_157":216,"_159":-5,"_160":142,"_161":217,"_163":118,"_106":253,"_101":219,"_166":210,"_168":220,"_170":22,"_171":-5,"_99":254},["D",1744403588102],[100],"history",[257,263,269,275,280,285,290,294],{"_104":258,"_160":142,"_157":216,"_96":100,"_168":259,"_166":210,"_101":260,"_159":-5,"_106":261,"_161":262,"_171":-5},"a93e2f28-170d-11f0-b36d-569c3dd06744","import { getHighlighter } from \"npm:shikiji\";\n\n// TODO: UPDATE THIS URL TO THE USER'S ACTUAL VAL\nconst TARGET_VAL_URL = \"https://charmaine--d308ccc8170311f0af34569c3dd06744.web.val.run\";\n\nconst tutorialSteps = [\n // Step 0: Orientation\n {\n title: \"Welcome! Let's Build a Todo List\",\n instructions: `\n

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

{Your name here}'s Todo List

`,\n lang: \"html\",\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 todoApp.ts with the snippet below.

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

\\${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\n {\n title: \"Step 4: Make Todos Persistent\",\n instructions: `\n

1. Create sqliteStorage.ts:

2. Update App: Replace the entire code in todoApp.ts with Snippet 2. Save it.

\n `,\n code: `/* --- Snippet 1: Final code for todoStorage.ts --- */\n// Correct import path for the standard library SQLite module\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\n\n// --- Force table recreation by dropping it first ---\n// WARNING: This deletes existing data in the 'todos' table.\ntry {\n await sqlite.execute(\"DROP TABLE IF EXISTS todos;\");\n console.log(\"Existing 'todos' table dropped (if it existed).\");\n} catch (e) {\n console.error(\"Error dropping table (might not exist yet, which is ok):\", e);\n}\n// ---------------------------------------------------\n\n// Define the table structure\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\n// Initialize table (this runs when the val is loaded/saved)\nawait sqlite.execute(TABLE_SCHEMA);\nconsole.log(\"Database table 'todos' checked/created.\");\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 // 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 console.log(\"Added item to DB:\", item.trim());\n}\n\n// Define the type/interface for a Todo item row from the database\ninterface Todo {\n id: number;\n item: string;\n created_at: string;\n}\n\n// Function to get all todo items, ordered by creation time (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 await sqlite.execute({\n sql: \"DELETE FROM todos WHERE id = :id;\",\n args: { id },\n });\n console.log(\"Deleted todo with ID:\", id);\n} \n\n/* --- Snippet 2: Final code for todo.ts --- */\nimport { html } from \"https://esm.town/v/stevekrouse/html?v=5\";\n\n// Use relative path for importing within the same project\nimport { addTodo, getTodos } from \"./todoStorage.ts\"; \n// ---\n\nexport default async function todoAppTarget(req: Request): Promise {\n // userName variable removed\n\n // Handle POST request (add todo to the database)\n if (req.method === \"POST\") {\n try {\n const formData = await req.formData();\n const newTodo = formData.get(\"newTodo\") as string;\n if (newTodo && newTodo.trim() !== \"\") {\n await addTodo(newTodo.trim()); \n }\n } catch (e) {\n console.error(\"Error adding todo:\", e);\n }\n // Redirect back to the same URL using GET after POST\n return Response.redirect(req.url, 303); \n }\n\n // --- Handle GET request (display the page) ---\n \n // Fetch the current list of todos from the database\n let todos = [];\n try {\n todos = await getTodos(); \n console.log(\"Fetched todos during GET:\", todos); \n } catch (e) {\n console.error(\"Error getting todos:\", e);\n }\n \n // --- HTML Generation WITHOUT escaping ---\n const todoListHtml = todos.map(todo_row => \n \\`

\\${todo_row[1]}

\\` \n ).join('');\n // ---\n\n // Return the full HTML page\n return html(\\`\n \n \n \n My Todo List \n \n \n \n

My Todo List

\n\n \n\n

My Todos:

No todos yet! Add one above.

\n \n \n \\`);\n}`,\n lang: \"typescript\", // Keep as typescript since it contains both TS files\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 ./todoStorage.ts matches your storage val name.

3. Scheduling (IMPORTANT):

After saving, find the emailMeMyTodos file in the Val Town UI
Click \"CRON\" and you can change \"Run every: 1\" from \"Hour\" to \"Day\"
⚠️ Warning: If you don't change the schedule, you'll get emails every hour!
💡 Tip: Use the \"Stop\" button to disable scheduling completely when done testing

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

\n `,\n code: `// Create emailMeMyTodos.ts:\nimport { email } from \"https://esm.town/v/std/email\";\nimport { getTodos } from \"./todoStorage.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

${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 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}",7,["D",1744400788984],363,{"_104":264,"_160":142,"_157":216,"_96":100,"_168":265,"_166":210,"_101":266,"_159":-5,"_106":267,"_161":268,"_171":-5},"9fe42658-170d-11f0-a04d-569c3dd06744","import { getHighlighter } from \"npm:shikiji\";\n\n// TODO: UPDATE THIS URL TO THE USER'S ACTUAL VAL\nconst TARGET_VAL_URL = \"https://charmaine--d308ccc8170311f0af34569c3dd06744.web.val.run\";\n\nconst tutorialSteps = [\n // Step 0: Orientation\n {\n title: \"Welcome! Let's Build a Todo List\",\n instructions: `\n

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

{Your name here}'s Todo List

`,\n lang: \"html\",\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 todoApp.ts with the snippet below.

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

\\${todo}

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

\\${userName}'s Todo List

\n \n

My Todos:

No todos yet!

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

1. Create sqliteStorage.ts:

2. Update App: Replace the entire code in todoApp.ts with Snippet 2. Save it.

\\${todo_row[1]}

\\` \n ).join('');\n // ---\n\n // Return the full HTML page\n return html(\\`\n \n \n \n My Todo List \n \n \n \n

My Todo List

\n\n \n\n

My Todos:

No todos yet! Add one above.

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

1. Create emailReminder.ts:

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

3. Scheduling (IMPORTANT):

After saving, find the emailMeMyTodos file in the Val Town UI
Click \"CRON\" and you can change \"Run every: 1\" from \"Hour\" to \"Day\"
⚠️ Warning: If you don't change the schedule, you'll get emails every hour!
💡 Tip: Use the \"Stop\" button to disable scheduling completely when done testing

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

Congratulations! You built a full Todo app.

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

Use your app: Live Link

${stepData.title}

${stepData.instructions}

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

\n\n

Live Preview:

\n \n

\n \n \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}",6,["D",1744400773292],362,{"_104":270,"_160":142,"_157":216,"_96":100,"_168":271,"_166":210,"_101":272,"_159":-5,"_106":273,"_161":274,"_171":-5},"992bad18-170d-11f0-813c-569c3dd06744","import { getHighlighter } from \"npm:shikiji\";\n\n// TODO: UPDATE THIS URL TO THE USER'S ACTUAL VAL\nconst TARGET_VAL_URL = \"https://charmaine--180b0850170311f082ce569c3dd06744.web.val.run\";\n\nconst tutorialSteps = [\n // Step 0: Orientation\n {\n title: \"Welcome! Let's Build a Todo List\",\n instructions: `\n

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

{Your name here}'s Todo List

`,\n lang: \"html\",\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 todoApp.ts with the snippet below.

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

\\${todo}

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

\\${userName}'s Todo List

\n \n

My Todos:

No todos yet!

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

1. Create sqliteStorage.ts:

2. Update App: Replace the entire code in todoApp.ts with Snippet 2. Save it.

\\${todo_row[1]}

\\` \n ).join('');\n // ---\n\n // Return the full HTML page\n return html(\\`\n \n \n \n My Todo List \n \n \n \n

My Todo List

\n\n \n\n

My Todos:

No todos yet! Add one above.

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

1. Create emailReminder.ts:

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

3. Scheduling (IMPORTANT):

After saving, find the emailMeMyTodos file in the Val Town UI
Click \"CRON\" and you can change \"Run every: 1\" from \"Hour\" to \"Day\"
⚠️ Warning: If you don't change the schedule, you'll get emails every hour!
💡 Tip: Use the \"Stop\" button to disable scheduling completely when done testing

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

Congratulations! You built a full Todo app.

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

Use your app: Live Link

${stepData.title}

${stepData.instructions}

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

\n\n

Live Preview:

\n \n

\n \n \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}",5,["D",1744400762017],361,{"_104":276,"_160":142,"_157":216,"_96":100,"_168":277,"_166":210,"_101":200,"_159":-5,"_106":278,"_161":279,"_171":-5},"72896416-170d-11f0-b067-569c3dd06744","import { getHighlighter } from \"npm:shikiji\";\nimport { addTodo, getTodos } from \"./sqliteStorage.ts\";\n\n// TODO: UPDATE THIS URL TO THE USER'S ACTUAL VAL\nconst TARGET_VAL_URL = \"https://charmaine--d308ccc8170311f0af34569c3dd06744.web.val.run\";\n\nexport const tutorialSteps = [\n // Step 0: Orientation\n {\n title: \"Welcome! Let's Build a Todo List\",\n instructions: `\n

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: Add Your Name\n {\n title: \"Step 1: Add Your Name\",\n instructions: `\n

In todo.ts, find and update the userName variable:

\n `,\n code: `const userName = \"Your Name\"; // Change \"Your Name\" to your actual name`,\n lang: \"typescript\",\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\n {\n title: \"Step 3: Add Todo List Logic\",\n instructions: `\n

Task: Add the todo list logic to your todo.ts file.

Add this code right after the tutorial check (before the return html):

\n `,\n code: ` // Initialize empty todos array\n let todos: string[] = [];\n\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 if (newTodo?.trim()) {\n todos.push(newTodo.trim());\n }\n } catch (e) {\n console.error(\"Error:\", e);\n return new Response(\"Failed to process form\", { status: 400 });\n }\n }\n\n // Generate HTML for todo list\n const todoListHtml = todos.map(todo => \\`

\\${todo}

\\`).join(\"\");`,\n lang: \"typescript\",\n },\n // Step 4: Make Todos Persistent\n {\n title: \"Step 4: Make Todos Persistent\",\n instructions: `\n

1. Create sqliteStorage.ts with this code:

2. Update your todo.ts to use the database:

\n `,\n code: `// First create sqliteStorage.ts:\nimport { 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\nexport async function addTodo(item: string): Promise {\n if (!item || item.trim() === \"\") {\n throw new Error(\"Cannot add empty todo item.\");\n }\n await sqlite.execute({\n sql: \"INSERT INTO todos (item) VALUES (:item);\",\n args: { item: item.trim() },\n });\n console.log(\"Added item to DB:\", item.trim());\n}\n\nexport async function getTodos(): Promise {\n const result = await sqlite.execute(\"SELECT id, item, created_at FROM todos ORDER BY created_at DESC;\");\n return result.rows as Todo[];\n}\n\nexport async function deleteTodo(id: number): Promise {\n if (typeof id !== \"number\") {\n throw new Error(\"Invalid ID for deletion.\");\n }\n await sqlite.execute({\n sql: \"DELETE FROM todos WHERE id = :id;\",\n args: { id },\n });\n console.log(\"Deleted todo with ID:\", id);\n}\n\n// Then update todo.ts:\nimport { addTodo, getTodos } from \"./sqliteStorage.ts\";\n\n// Remove the todos array - we'll use the database instead\n// let todos: string[] = [];\n\n// Update the POST handler:\nif (req.method === \"POST\") {\n try {\n const formData = await req.formData();\n const newTodo = formData.get(\"newTodo\") as string;\n if (newTodo?.trim()) {\n await addTodo(newTodo);\n }\n } catch (e) {\n console.error(\"Error:\", e);\n return new Response(\"Failed to process form\", { status: 400 });\n }\n}\n\n// Get todos from database\nconst todos = await getTodos();\nconst todoListHtml = todos.map(todo => \\`

\\${todo.item}

\\`).join(\"\");\n\n// Use todoListHtml in your template as before\nreturn html(\\`\n \n \n \n \\${userName}'s Todo List\n \n \n

\\${userName}'s Todo List

\n \n

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

Let's set up email reminders for your todos!

1. Create emailReminder.ts with this code:

2. After saving, find your email reminder val in the Val Town UI

3. Click \"CRON\" to schedule it (recommended: once per day)

\n `,\n code: `import { email } from \"https://esm.town/v/std/email\";\nimport { getTodos } from \"./sqliteStorage.ts\";\n\nexport const emailReminder = async () => {\n let todos = [];\n\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.item}\\`).join(\"\\\\n\");\n const emailSubject = \\`Your Val Town Todo Reminder (\\${todos.length} items)\\`;\n const emailText = \n \\`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// Modify the handler to accept a preview URL\nexport async function interactiveTutorialHandler(req: Request, previewUrl?: string): Promise {\n const url = new URL(req.url);\n const currentStep = parseInt(url.searchParams.get(\"step\") || \"0\", 10);\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 if (stepData.code && stepData.code.trim() !== \"\") {\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 // Use provided preview URL or fallback to TARGET_VAL_URL\n const previewTarget = previewUrl || TARGET_VAL_URL;\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

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}\n\n// Keep the default export but have it use the handler function\nexport default function(req: Request): Promise {\n return interactiveTutorialHandler(req);\n}",["D",1744400697196],359,{"_104":281,"_160":142,"_157":216,"_96":100,"_168":282,"_166":210,"_101":165,"_159":-5,"_106":283,"_161":284,"_171":-5},"0b24f5c4-170d-11f0-bb04-569c3dd06744","import { getHighlighter } from \"npm:shikiji\";\n\n// TODO: UPDATE THIS URL TO THE USER'S ACTUAL VAL\nconst TARGET_VAL_URL = \"https://charmaine--d308ccc8170311f0af34569c3dd06744.web.val.run\";\n\nexport const tutorialSteps = [\n // Step 0: Orientation\n {\n title: \"Welcome! Let's Build a Todo List\",\n instructions: `\n

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: Add Your Name\n {\n title: \"Step 1: Add Your Name\",\n instructions: `\n

In todo.ts, find and update the userName variable:

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\n {\n title: \"Step 3: Add Todo List Logic\",\n instructions: `\n

Task: Add the todo list logic to your todo.ts file.

Add this code right after the tutorial check (before the return html):

\\${todo}

\\`).join(\"\");`,\n lang: \"typescript\",\n },\n // Step 4: Make Todos Persistent\n {\n title: \"Step 4: Make Todos Persistent\",\n instructions: `\n

1. Create sqliteStorage.ts with this code:

\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\nexport async function addTodo(item: string): Promise {\n if (!item || item.trim() === \"\") {\n throw new Error(\"Cannot add empty todo item.\");\n }\n await sqlite.execute({\n sql: \"INSERT INTO todos (item) VALUES (:item);\",\n args: { item: item.trim() },\n });\n console.log(\"Added item to DB:\", item.trim());\n}\n\nexport async function getTodos(): Promise {\n const result = await sqlite.execute(\"SELECT id, item, created_at FROM todos ORDER BY created_at DESC;\");\n return result.rows as Todo[];\n}\n\nexport async function deleteTodo(id: number): Promise {\n if (typeof id !== \"number\") {\n throw new Error(\"Invalid ID for deletion.\");\n }\n await sqlite.execute({\n sql: \"DELETE FROM todos WHERE id = :id;\",\n args: { id },\n });\n console.log(\"Deleted todo with ID:\", id);\n}`,\n lang: \"typescript\",\n },\n // Step 5: Daily Email Reminder\n {\n title: \"Step 5: Daily Email Reminder\",\n instructions: `\n

Let's set up email reminders for your todos!

1. Create emailReminder.ts with this code:

2. After saving, find your email reminder val in the Val Town UI

3. Click \"CRON\" to schedule it (recommended: once per day)

Congratulations! You built a full Todo app.

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

Use your app: Live Link

${stepData.title}

${stepData.instructions}

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

\n\n

Live Preview:

\n \n

\n \n \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}\n\n// Keep the default export but have it use the handler function\nexport default function(req: Request): Promise {\n return interactiveTutorialHandler(req);\n}",["D",1744400523704],354,{"_104":286,"_160":142,"_157":216,"_96":100,"_168":287,"_166":210,"_101":190,"_159":-5,"_106":288,"_161":289,"_171":-5},"ce3fa8b6-170c-11f0-a5a2-569c3dd06744","import { getHighlighter } from \"npm:shikiji\";\n\n// TODO: UPDATE THIS URL TO THE USER'S ACTUAL VAL\nconst TARGET_VAL_URL = \"https://charmaine--d308ccc8170311f0af34569c3dd06744.web.val.run\";\n\nexport const tutorialSteps = [\n // Step 0: Orientation\n {\n title: \"Welcome! Let's Build a Todo List\",\n instructions: `\n

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: Add Your Name\n {\n title: \"Step 1: Add Your Name\",\n instructions: `\n

In todo.ts, find and update the userName variable:

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\n {\n title: \"Step 3: Add Todo List Logic\",\n instructions: `\n

Task: Add the todo list logic to your todo.ts file.

Add this code right after the tutorial check (before the return html):

\\${todo}

\\`).join(\"\");`,\n lang: \"typescript\",\n },\n // Step 4: Make Todos Persistent\n {\n title: \"Step 4: Make Todos Persistent\",\n instructions: `\n

1. Create sqliteStorage.ts:

2. Update App: Replace the entire code in todoApp.ts with Snippet 2. Save it.

\\${todo_row[1]}

\\` \n ).join('');\n // ---\n\n // Return the full HTML page\n return html(\\`\n \n \n \n My Todo List \n \n \n \n

My Todo List

\n\n \n\n

My Todos:

No todos yet! Add one above.

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

1. Create emailReminder.ts:

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

3. Scheduling (IMPORTANT):

After saving, find the emailMeMyTodos file in the Val Town UI
Click \"CRON\" and you can change \"Run every: 1\" from \"Hour\" to \"Day\"
⚠️ Warning: If you don't change the schedule, you'll get emails every hour!
💡 Tip: Use the \"Stop\" button to disable scheduling completely when done testing

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

Congratulations! You built a full Todo app.

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

Use your app: Live Link

${stepData.title}

${stepData.instructions}

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

\n\n

Live Preview:

\n \n

\n \n \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}\n\n// Keep the default export but have it use the handler function\nexport default function(req: Request): Promise {\n return interactiveTutorialHandler(req);\n}",["D",1744400421571],352,{"_104":291,"_160":142,"_157":216,"_96":100,"_168":287,"_166":210,"_101":179,"_159":-5,"_106":292,"_161":293,"_171":-5},"b493d262-170b-11f0-b023-569c3dd06744",["D",1744399949002],344,{"_104":295,"_160":142,"_157":216,"_96":100,"_168":296,"_166":210,"_101":32,"_159":-5,"_106":297,"_161":298,"_171":-5},"b33c354e-170b-11f0-89bd-569c3dd06744","export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",["D",1744399946757],343,"versions",[301,303,304,305,306,307,308,309],{"_167":257,"_302":263},"previous",{"_167":263,"_302":269},{"_167":269,"_302":275},{"_167":275,"_302":280},{"_167":280,"_302":285},{"_167":285,"_302":290},{"_167":290,"_302":294},{"_167":294,"_302":-5},"versionNumber","page","hasNext","actionData","errors"]

charmaine

onboarding_draft

History for tutorial.ts