Vanilla JavaScript Projects

Project 68, Forms and input

Star Rating and Review Form

A review form people actually finish. Tap the stars, write a few words, add a photo, and see your review appear in the summary right away.

Main API
Radio inputs
Photos
URL.createObjectURL
Dependencies
None
Your browser
Checking

Leave a review

Hover and click the stars, including half stars. Use the arrow keys too. Submit to see the summary and list update.

0
Your rating
Tap to rate
0 / 500

How it works

  1. Stars are radio buttonsTen hidden radio inputs, one for each half star, make the rating work with a keyboard and screen readers for free.
  2. Paint on hover and changeHovering previews a rating and the label changes to words like Great. Leaving restores the chosen value.
  3. Recalculate the summaryThe average, star counts and bar widths are worked out again from the list every time a review is added.
<fieldset class="stars">
  <legend>Your rating</legend>
  <input type="radio" name="star" id="s1" value="0.5"><label for="s1">0.5 stars</label>
  <!-- ... up to 5 -->
</fieldset>

stars.addEventListener("change", (e) => paint(+e.target.value));
const avg = reviews.reduce((a, r) => a + r.stars, 0) / reviews.length;
bar.style.width = (count / reviews.length) * 100 + "%";