Build interaction with AI
Direct a model to wire a click to a state change — and review the part it always fumbles.
A counter that responds to clicks, produced under your direction.
The event→state→render mental model, the prompt that gets clean code, and how to spot the common bug.
Prerequisites
A coding assistant. No JS experience required.
The one loop you must hold
- An event happens (a click).
- It changes state (a number in a variable).
- You render the state back to the screen. Forget this step and the count is right in memory but stale on screen — the classic AI miss.
The prompt
Build a click counter in plain HTML and JavaScript — no framework. Constraints:- A button and a number on the page.- Clicking increments a single state variable.- Re-render the number from state after every change (one source of truth).- Add a reset button.- Do not pollute the global scope — wrap it. Output one index.html with a script tag.Review what it writes
Review rubric
Tutorial
Learn events directly
The Learn tab builds the counter by hand. Come here to direct it.
Concepts covered · 2
More like this
Make a page respond: a click counter
A page becomes alive the moment JavaScript listens for an event and changes the page in response. Build a counter, then open it in /code.
Build a script with AI
The vibe-coder path for Python: the shape of a small program, the prompt, and the edge cases AI forgets.
Build a program with AI
The vibe-coder path for C++: the few things you must understand to judge AI-written C++, the prompt, and the review.
Liked this one?
Pass it on
Discussion
Be the first to ask
Your questions stay private with the team. We can pin answers to share with everyone.
Sign in to ask a question privately on this tutorial.
Sign inNo pinned answers yet for this tutorial.