ec708ba943
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>
37 lines
1.3 KiB
Markdown
37 lines
1.3 KiB
Markdown
# 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.
|