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
Your first Python program
Python reads almost like English. Write a small converter, see its output, and open the project in /code to keep editing.
Build a program with AI
The vibe-coder path for Go: the idioms you must recognise, the prompt, and the review that catches dropped errors.
Your first C++ program
C++ trades a little ceremony for a lot of speed and control. Write a first program, learn the compile-then-run cycle, and open it in /code.
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.