open/claude-code-first-project
1
0
Fork 0
Code Activity Actions
claude-code-first-project/prompts/01-create-todo.md
Kjell Tore Guttormsen ec708ba943 Initial commit: todo app guide with 5 prompts and examples 
Complete companion repo for "Your First Hour with Claude Code" article.
Includes step-by-step prompts, example output, troubleshooting, and cost guide.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 16:04:07 +01:00

1.3 KiB
Raw Blame History

Prompt 01: Create the Todo App

Copy and paste this into Claude Code:

Create a todo app as a single index.html file. Requirements:

  • Dark mode with a charcoal background (#1a1a2e or similar)
  • Modern, clean design with good spacing and readable fonts
  • Add new tasks with a text input and an "Add" button (also works on Enter)
  • Mark tasks as complete (strikethrough + muted color)
  • Delete tasks with a small delete button
  • All tasks saved to localStorage so they survive page refresh
  • Smooth transitions when adding/completing/deleting tasks
  • No external dependencies (no CDN links, no frameworks)
  • The whole app in one file: HTML, CSS, and JavaScript together

What Happens

Claude Code will:

  1. Create index.html with embedded CSS and JavaScript
  2. Ask for your permission before creating the file
  3. You approve, and the file appears in your folder

What to Expect

Open index.html in your browser. You should see:

  • A dark-themed input field at the top
  • Type a task and press Enter to add it
  • Click a task to mark it done
  • Click the delete button to remove it
  • Refresh the page and your tasks are still there

If something does not look right, tell Claude Code what is wrong. For example: "The delete button is too close to the task text, add more spacing." It will fix it.