TutorialsPreview
All tutorials
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
<!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.

Concepts covered · 3

VariablesintroducedThe DOMintroducedEventsintroduced

More like this

Y
Build·beginner·12 min

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.

B
Build·beginner·8 min

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.

Y
Build·beginner·14 min

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

Share on XFollow on GitHub

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 in

No pinned answers yet for this tutorial.