A good first building block

Simple click counter

Count up, count down, or start again with three clear controls.

HTMLCSSJavaScriptNo dependencies

Live preview

Explore the result below

HTML

<main class="counter">
  <p>LITTLE THINGS ADD UP</p>
  <output id="count" aria-live="polite">0</output>
  <div class="controls">
    <button id="minus" type="button" aria-label="Decrease count">−</button>
    <button id="reset" type="button">Reset</button>
    <button id="plus" type="button" aria-label="Increase count">+</button>
  </div>
</main>

CSS

:root {
  font-family: system-ui, sans-serif;
  color: #14544d;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #e2f5ef;
}
.counter {
  text-align: center;
}
.counter p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
output {
  display: block;
  margin: 12px;
  font-size: 64px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.controls {
  display: flex;
  gap: 10px;
}
button {
  min-width: 50px;
  min-height: 48px;
  border: 1px solid #2a7666;
  border-radius: 12px;
  background: white;
  color: #14544d;
  padding: 10px 16px;
  font: 600 16px system-ui;
  cursor: pointer;
}
button:hover {
  background: #c9ebe1;
}
button:focus-visible {
  outline: 3px solid #14544d;
  outline-offset: 3px;
}

JavaScript

let value = 0;
const output = document.querySelector("#count");
function render() {
  output.textContent = String(value);
}
document.querySelector("#plus").addEventListener("click", () => {
  if (value < Number.MAX_SAFE_INTEGER) value += 1;
  render();
});
document.querySelector("#minus").addEventListener("click", () => {
  if (value > Number.MIN_SAFE_INTEGER) value -= 1;
  render();
});
document.querySelector("#reset").addEventListener("click", () => {
  value = 0;
  render();
});

Read the complete HTML document

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root {
  font-family: system-ui, sans-serif;
  color: #14544d;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #e2f5ef;
}
.counter {
  text-align: center;
}
.counter p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
output {
  display: block;
  margin: 12px;
  font-size: 64px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.controls {
  display: flex;
  gap: 10px;
}
button {
  min-width: 50px;
  min-height: 48px;
  border: 1px solid #2a7666;
  border-radius: 12px;
  background: white;
  color: #14544d;
  padding: 10px 16px;
  font: 600 16px system-ui;
  cursor: pointer;
}
button:hover {
  background: #c9ebe1;
}
button:focus-visible {
  outline: 3px solid #14544d;
  outline-offset: 3px;
}
</style>
</head>
<body>
<main class="counter">
  <p>LITTLE THINGS ADD UP</p>
  <output id="count" aria-live="polite">0</output>
  <div class="controls">
    <button id="minus" type="button" aria-label="Decrease count">−</button>
    <button id="reset" type="button">Reset</button>
    <button id="plus" type="button" aria-label="Increase count">+</button>
  </div>
</main>
<script>
let value = 0;
const output = document.querySelector("#count");
function render() {
  output.textContent = String(value);
}
document.querySelector("#plus").addEventListener("click", () => {
  if (value < Number.MAX_SAFE_INTEGER) value += 1;
  render();
});
document.querySelector("#minus").addEventListener("click", () => {
  if (value > Number.MIN_SAFE_INTEGER) value -= 1;
  render();
});
document.querySelector("#reset").addEventListener("click", () => {
  value = 0;
  render();
});
</script>
</body>
</html>

A little guide to making it yours

Copy the code and save it in a file named example.html.
Open the file in your browser to see the complete example.
Change the text and structure in the HTML.
Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

Keeps state in a local variable and updates a polite live region only after a user action. Counts are limited to safe JavaScript integers.

Troubleshooting and limits

Reloading resets the count; it is not saved. Counts stay inside safe JavaScript integer limits. Keep #count and the three button ids when changing the HTML. Do not treat a local counter as an analytics or billing record.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going