Func Green Button Message 2 Code
# Task: Implement green button with message toggle
## ⚠️ Before starting
1. Read `.claude/roles/coder.md` — this is your role
2. When done: `git add src/<files> && git commit -m "[coder] step1-2: green button message"`
## Context
The App component (spec.md, Step 1 of plan.md) must provide a green button that toggles a message display.
## Tasks
1. **Modify `src/App.tsx`** — implement the App component:
- Render a single button with green background color (use inline style `backgroundColor: 'green'` AND set the text color to white for contrast)
- The button text should be descriptive (e.g., "Click me" or similar)
- Use `useState` to track whether the message is visible
- When the button is clicked, show:
- The text "My divine website!" (exact string)
- A "Close" button (exact text "Close")
- When "Close" is clicked, hide the message and the Close button
- The green button must remain visible at all times
2. **Version**: `package.json` version is already `0.1.0` — no change needed
## Acceptance criteria
- `npm run lint` passes
- `npm run build` passes
- `npm test` passes (all tests green, including the new ones from the tester)
- The green button is always visible
- Clicking it toggles message visibility
- "Close" hides the messagewhen to use it
Community prompt sourced from the open-source GitHub repo fnfremixer/claude-code-tdd (no explicit license). A "Func Green Button Message 2 Code" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.
tags
codingcommunitydeveloper
source
fnfremixer/claude-code-tdd · no explicit license
more in Coding
Coding✓ tested
Senior code review (strict mode)
senior staff engineer running a merciless but fair review
Coding✓ tested
Debug by hypothesis, not by guessing
debugging partner who forms theories before touching code
Coding✓ tested
Generate tests from described behavior
test engineer who writes tests that would actually catch regressions