Whimsical Star Rating Hearts

Traditional 5-star ratings are everywhere. Replacing them with large, unicode hearts providing progressive fill on-hover brings immediate delight.

The Core Interaction

We map all Hearts, assigning a numeric index. On mouse over, we fill all hearts whose index is less-than-or-equal-to the current target.

const hearts = document.querySelectorAll('.heart');
let lockedScore = 0;

hearts.forEach((h, i) => {
  h.addEventListener('mouseover', () => {
    // Fill all previous hearts up to 'i'
    hearts.forEach((heart, idx) => {
      heart.style.color = idx <= i ? '#f43f5e' : '#e5e7eb';
    });
  });
  
  h.addEventListener('click', () => {
    lockedScore = i + 1; // Save it!
  });
});

See the progressive hover animations trigger natively in the beautiful Live Demo!