Skip to main content

Engineering Notes

Building a star-rating widget: the jQuery pattern that still teaches

This 2014 note came from real product work — a B2B marketplace needing live buyer-and-seller ratings. The jQuery plugin it used is long retired; the pattern underneath it, building stars over native radio inputs, remains the correct instinct in any modern framework.

By Rabi Maharjan Published Substantially revised 3 min read

Historical project. This tutorial describes a 2014 implementation using a jQuery plugin that is no longer maintained. It is preserved as an engineering retrospective; the closing section gives the modern equivalent.

The product context

The original article opens with its own justification: the author was building a B2B marketplace “like eBay” that needed real-time ratings of buyers and sellers. Reputation is the currency of two-sided marketplaces, and the rating control is its mint — small widget, load-bearing job.

The radio-input pattern

The 2014 implementation used the jQuery Star Rating plugin, whose design decision deserves preserving: the stars are a visual skin over a set of native radio inputs. The form still submits a plain radio value; keyboard selection still works; and if JavaScript never arrives, the radios still function. The stars are enhancement, not replacement.

<input type="radio" name="rating" value="1" class="star">
<input type="radio" name="rating" value="2" class="star">
<input type="radio" name="rating" value="3" class="star">
<input type="radio" name="rating" value="4" class="star">
<input type="radio" name="rating" value="5" class="star">

Wiring it up, 2014-style

With the plugin’s script and stylesheet loaded, adding the star class converted the radios into stars, and a callback fired on selection — which is where the marketplace posted the rating to the server and updated the participant’s aggregate score in real time. Four steps, one afternoon, shipped.

The same pattern today

Present-day editorial perspective.

The plugin’s hosting (Google Code!) dates it precisely, but its architecture was ahead of much that followed: a decade of div-built rating widgets shipped without the keyboard support and graceful degradation those radios provided free. Today we build the identical idea with CSS and a few lines of vanilla JavaScript or a framework component — native inputs underneath, visual polish on top — and the accessibility instinct this 2014 widget embodied is now simply called doing it properly. Reputation systems, meanwhile, remain as load-bearing as ever in the marketplace platforms we engineer.