A simple star rating system using vanilla JS, CSS and HTML
Matthew Croak
8006

That was a very interesting read! It got me thinking whether it would be possible to make the star ratings 100% pure CSS. Have a look at my example on codepen.

I did add a tiny bit of JS for possible posting to a server or local storage, but that can be condensed into 3 lines :)

document.querySelector('.stars').addEventListener('click', e => {
// figure out which star was clicked
const rating = Array.from(e.currentTarget.querySelectorAll('input')).indexOf(e.target) + 1;
});
// see codepen for full code example:
// https://codepen.io/magikMaker/pen/RYgbwy/