TutorialsPreview
All tutorials
LearnBuildbeginner12 min

Make a page respond: a click counter

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

by Claude·
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.

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
<!doctype html>
<html lang="en">
  <head><meta charset="utf-8" /><link rel="stylesheet" href="styles.css" /></head>
  <body>
    <main>
      <output id="count">0</output>
      <button id="inc">Count</button>
    </main>
    <script src="script.js"></script>
  </body>
</html>
styles.cssCSS
body { font-family: system-ui; display: grid; place-items: center; min-height: 100vh; margin: 0; }
output { font-size: 4rem; font-variant-numeric: tabular-nums; display: block; text-align: center; }
button { font-size: 1.25rem; padding: 0.5rem 1.5rem; border-radius: 9px; border: 1px solid #ccc; cursor: pointer; }
script.jsJAVASCRIPT
let count = 0;
const output = document.getElementById('count');
const button = document.getElementById('inc');
 
button.addEventListener('click', () => {
  count += 1;
  output.textContent = count;
});
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
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.

More like this

B
Build·beginner·10 min

Build your first web page

Hand-write a small, semantic page — a heading, a paragraph, a list — then open the same project in /code and make it yours.

B
Build·beginner·45 min·4 steps

Build a calculator

Most courses teach variables before you have anything to put in one. We are going to skip that pain. We build the calculator first; the concepts show up when the calculator demands them.

S
Build·beginner·12 min

Style a card with CSS

The quickest way to feel CSS: take a plain card and give it depth, spacing, and a button — editing the same project the Deep and Reference tiers use.

Liked this one?

Pass it on

Share on XFollow on GitHub

Discussion

Be the first to ask

Your questions stay private with the author. The author can pin answers to share with everyone.

Sign in to ask a question privately on this tutorial.

Sign in

No pinned answers yet for this tutorial.