LearnBuildbeginner12 min

Make a page respond: a click counter

The smallest interactive program — a button that counts. Listen, change, render.

You will build

A button that increments a number on screen each time you click it.

You will learn

Variables, selecting an element, listening for a click, and updating the DOM.

Open the full project in VS Code

Prerequisites

A browser. A first look at HTML helps but is not required.

A web page becomes interactive the instant JavaScript listens for something the user does and changes the page in response. The whole loop fits in a click counter.

project · js-counter Open in Code

index.htmlHTML

1<!doctype html>
2<html lang="en">
3  <head><meta charset="utf-8" /><link rel="stylesheet" href="styles.css" /></head>
4  <body>
5    <main>
6      <output id="count">0</output>
7      <button id="inc">Count</button>
8    </main>
9    <script src="script.js"></script>
10  </body>
11</html>

styles.cssCSS

1body { font-family: system-ui; display: grid; place-items: center; min-height: 100vh; margin: 0; }
2output { font-size: 4rem; font-variant-numeric: tabular-nums; display: block; text-align: center; }
3button { font-size: 1.25rem; padding: 0.5rem 1.5rem; border-radius: 9px; border: 1px solid #ccc; cursor: pointer; }

script.jsJAVASCRIPT

1let count = 0;
2const output = document.getElementById('count');
3const button = document.getElementById('inc');
4 
5button.addEventListener('click', () => {
6  count += 1;
7  output.textContent = count;
8});

The counter project — open it whole in Code

Concept · js/events

Catalog

Event listeners

`element.addEventListener("click", fn)` asks the browser to run `fn` every time the element is clicked. That is how your code hears the user.

JAVASCRIPT

button.addEventListener('click', () => {
  count += 1;
  output.textContent = count;
});

try yourself · javascript

Loading editor…

preview

Milestone

You made the page respond to a human.

Listen for an event, change some state, render it. Almost everything interactive on the web — forms, games, chat — is that same loop, repeated.

Tutorial

Next: build a calculator

Same shape, more concepts — conditionals and functions arrive when the calculator needs them.

Concepts covered · 3

Variablesintroduced The DOMintroduced Eventsintroduced

Build interaction with AI

The vibe-coder path for JS events: the event→state→render loop you must hold in your head, the prompt, and the review.

Build·beginner·8 min

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·beginner·9 min

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

Share on X Follow on GitHub

Discussion

Be the first to ask

Your questions stay private with the team. We can pin answers to share with everyone.

No pinned answers yet for this tutorial.