Leonardo Devai
991acc190f
Pinned 2026 toolchains (Go 1.26, Rust 1.98/edition 2024, Python 3.14 + uv, Node 24, Zig 0.16, NixOS 26.05), postgres 18 / mongo 8, lockfiles built from, non-root runtimes, .dockerignore, per-project LICENSE, READMEs with the git.devai.io clone line, checkout@v7 CI. Security fixes in the legacy Rust APIs (any-password login, self-assigned admin, hard-coded JWT secret), JWT alg/exp/sub enforcement across the blog series, safe markdown links in the frontends, and many smaller bugs — every project was built, run and exercised end to end. Adds scripts/publish.sh + a CI publish job that splits every folder into its own repo at git.devai.io/templates/<folder>. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01128fhuZbgivaSJvtMf4s1G
61 lines
2.1 KiB
Markdown
61 lines
2.1 KiB
Markdown
# char-counter
|
|
|
|
A tweet-style text box that counts down as you type, turns amber near the
|
|
limit and red past it, fills a little progress ring, and disables the Post
|
|
button once you've gone over. It teaches live feedback: one number, drawn
|
|
several ways.
|
|
|
|
## Run
|
|
|
|
Get it: `git clone https://git.devai.io/templates/char-counter.git`
|
|
|
|
Double-click `index.html` — it opens in your browser and works. Nothing to
|
|
install, no build step.
|
|
|
|
Or serve it like production:
|
|
|
|
```sh
|
|
docker compose up --build
|
|
```
|
|
|
|
Then open http://localhost:8080.
|
|
|
|
## How it works
|
|
|
|
Everything on screen comes from one number: `textarea.value.length`. The
|
|
`input` event fires on every keystroke, paste or delete, and `update()`
|
|
recomputes it all from that number:
|
|
|
|
- **the count** — `LIMIT - used`, with a `warn` class at 20 left and `over`
|
|
past zero (the CSS colors them amber and red);
|
|
- **the button** — `postBtn.disabled = over`;
|
|
- **the ring** — an SVG circle whose outline is `2πr` long. Dash it as one
|
|
dash of that length, then slide it with `stroke-dashoffset`: hide the whole
|
|
length for empty, none of it for full.
|
|
|
|
The textarea's `aria-describedby` points at the count, so screen readers read
|
|
how many characters are left when you focus the box — without announcing
|
|
every single keystroke.
|
|
|
|
Try it: set `LIMIT` to `500` (the ring adapts), count words instead with
|
|
`value.trim().split(/\s+/).length`, or flash the border when you go over.
|
|
|
|
## Layout
|
|
|
|
```
|
|
index.html the textarea, the SVG ring, the count and the Post button
|
|
app.js update() and the ring math
|
|
styles.css the amber / red states and the ring; follows light or dark mode
|
|
```
|
|
|
|
## Deploy
|
|
|
|
Push to your own GitHub repo and the shipped workflow
|
|
(`.github/workflows/ci.yml`) tests the compose stack, publishes the image to
|
|
GHCR, and — once you set the `DEPLOY_HOST` / `DEPLOY_USER` variables and
|
|
`DEPLOY_KEY` secret — deploys it to your server over ssh.
|
|
|
|
---
|
|
Part of [devai.io](https://devai.io) — the Web Basics track: HTML, CSS &
|
|
JavaScript, one concept at a time. Next up, fetching real data:
|
|
[weather-now](https://git.devai.io/templates/weather-now).
|