A tiny browser app with 10 named tally counters. Increment or decrement each one, watch the running total update, and see the breakdown rendered live as a pie chart. Everything you enter is saved to your browser, so it survives a refresh.
Ten counters, each with its own + / - buttons and an editable number field. Decrement stops at zero (no negatives).
Every counter has an editable text label (Number 0, Number 1, …). Rename them to whatever you're counting.
A Chart.js pie chart updates on every change, showing each counter's share of the total with per-slice percentages in the tooltip.
A Total: readout sums all ten counters in real time.
Numbers and labels are written to localStorage on change and restored on page load. No accounts, no backend.
Slice and row colors are spread evenly across the HSL hue wheel, so each counter gets a distinct color.
counter/
├── index.html # Markup: counter container, total readout, pie chart canvas
├── script.js # Counter generation, increment/decrement, total, chart, localStorage
└── styles.css # Dark theme + mobile (max-width: 600px) layout
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | CSS3 (dark theme, responsive) |
| Logic | Vanilla JavaScript (no framework) |
| Charting | Chart.js (via CDN) |
| Persistence | Browser localStorage |
No build step, no dependencies to install.
Clone and open the page directly in a browser:
git clone https://github.com/osyra42/counter.git
cd counterThen open index.html in your browser, or serve it locally:
python -m http.server 8000
# visit http://localhost:8000Click + / - to count, rename the labels, and your state is saved automatically.
MIT