One complete card

HTML + CSS + JS together.

HTML + CSS + JS together. Paste each fence into its pane.

Goal

A Nairobi card with a Sell button that counts.

Paste into the HTML pane:

<article class="card">
  <h1>Nairobi kiosk</h1>
  <p id="out">units 0</p>
  <button id="btn" type="button">Sell</button>
</article>

Paste into the CSS pane:

.card {
  max-width: 260px;
  padding: 16px;
  border: 2px solid #8a5a12;
  font-family: sans-serif;
}
button { margin-top: 8px; }

Paste into the JS pane:

let n = 0;
document.getElementById("btn").onclick = () => {
  n += 1;
  document.getElementById("out").textContent = "units " + n;
};