Leonardo Devai
d2a275c5b6
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
59 lines
2 KiB
Markdown
59 lines
2 KiB
Markdown
# star-rating
|
|
|
|
Five stars that light up as you hover, lock in when you click, and remember
|
|
your rating next time you visit. It teaches the difference between a
|
|
*previewed* value and a *committed* one — the heart of most interactive widgets.
|
|
|
|
## Run
|
|
|
|
Get it: `git clone https://git.devai.io/templates/star-rating.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
|
|
|
|
There's one drawing function, `paint(value)`, which fills the first `value`
|
|
stars. Two different things call it:
|
|
|
|
- **Hover** calls `paint()` directly — a preview. Nothing is saved.
|
|
- **Click** calls `commit()`, which stores the rating in `selected`, saves it to
|
|
`localStorage`, updates the text, and then paints.
|
|
|
|
When the pointer leaves the row, `paint(selected)` snaps back to the committed
|
|
value. On load, the saved rating is read back from `localStorage`.
|
|
|
|
Each star is a real `<button>` with an `aria-label` ("Rate 3 stars"), so Tab,
|
|
Enter and Space work for free; the arrow keys move the rating up and down. The
|
|
result line is a `role="status"` region, so screen readers announce it.
|
|
|
|
Try it: show a word per score ("Terrible" … "Great"), add a "Clear" button
|
|
that calls `localStorage.removeItem("rating")`, or support half stars.
|
|
|
|
## Layout
|
|
|
|
```
|
|
index.html five star buttons and the result line
|
|
app.js paint(), commit(), hover, click and arrow-key handlers
|
|
styles.css the stars' off / on look; 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:
|
|
[char-counter](https://git.devai.io/templates/char-counter).
|