How to Build a Star Rating Component in an Interview

How to Build a Star Rating Component in an Interview

The star rating is a common machine coding question. Here is how to build it with hover, click, and half-star support.

Requirements

• 5 stars displayed.
• Hover highlights stars up to the hovered one.
• Click locks the rating.
• Half-star support (optional).
• Keyboard accessible.
• Reset on mouse leave (if not clicked).

Plan (5 minutes)

1. HTML: 5 star elements.
2. State: current rating, hover rating.
3. Events: mouseover (hover), mouseleave (reset hover), click (lock).
4. CSS: filled vs empty stars, transition.

Build Core (40 minutes)

HTML

<div class="star-rating" id="starRating">
  <span class="star" data-value="1">&#9734;</span>
  <span class="star" data-value="2">&#9734;</span>
  <span class="star" data-value="3">&#9734;</span>
  <span class="star" data-value="4">&#9734;</span>
  <span class="star" data-value="5">&#9734;</span>
</div>
<p>Rating: <span id="ratingValue">0</span></p>

JavaScript

let rating = 0;
let hoverRating = 0;
const stars = document.querySelectorAll(".star");
const ratingValue = document.getElementById("ratingValue");

function updateStars() {
  stars.forEach((star, index) => {
    star.textContent = index < (hoverRating || rating) ? "★" : "☆";
  });
  ratingValue.textContent = hoverRating || rating;
}

stars.forEach((star, index) => {
  star.addEventListener("mouseover", () => {
    hoverRating = index + 1;
    updateStars();
  });
  star.addEventListener("mouseleave", () => {
    hoverRating = 0;
    updateStars();
  });
  star.addEventListener("click", () => {
    rating = index + 1;
    hoverRating = 0;
    updateStars();
  });
});

CSS

.star-rating { font-size: 32px; cursor: pointer; }
.star { color: #gold; padding: 2px; transition: color 0.2s; }
.star:hover { transform: scale(1.2); }

Edge Cases (20 minutes)

• Half-star support (split each star into two halves with separate hover areas).
• Keyboard navigation (arrow keys to change, enter to select).
• Reset button.
• Readonly mode (display only, no interaction).
• ARIA attributes (role="slider", aria-valuenow).

Half-Star Support

<span class="star-half" data-value="0.5">&#9734;</span>
<span class="star-half" data-value="1">&#9734;</span>
``
Use clip-path or two overlaid elements for half-star rendering.

### The Takeaway

Build the star rating: HTML (5 star spans), JavaScript (hover to preview, click to lock, reset on leave), CSS (filled/empty stars, hover scale). Handle half-stars with split hover areas. Add keyboard support and ARIA. This tests event handling and state management.