Star Rating Display

INFORMATION & CODE

Star Rating Display

What the Code Does

This code provides a fully interactive, component-based Star Rating Display widget built using HTML, CSS, and JavaScript. It is designed to let users visually select a rating from one to five stars, providing real-time feedback through dynamic color changes, scaling animations, and numerical score updates.

How It Works

The HTML structure acts as the foundation, setting up a container card that holds five individual star symbols (each with a data-value attribute from 1 to 5), a numeric display for the score, and an instructional text label. The CSS styles this structure using modern layout techniques like Flexbox, CSS variables for customizable theming, and smooth transitions that make the stars enlarge and change color when hovered over or activated.

The JavaScript brings the widget to life by adding event listeners to each star. When a user moves their mouse over a star (mouseenter), the script dynamically highlights that star and all preceding stars, simultaneously updating the numerical text display (e.g., "4.0"). If the user moves the cursor away (mouseleave), the display reverts to the last permanently saved rating. Clicking a star (click) locks in that specific value as the selectedRating, updating both the visual active states and the numerical output so it persists until a new rating is chosen.

How to Use It

To use this code in your project, create three separate files in the same directory: save the HTML code as index.html, the CSS code as styles.css, and the JavaScript code as scripts.js. Ensure you define the necessary CSS variables (such as --card-bg, --star-active, --text-primary, etc.) in a parent stylesheet or your styles.css file so the styles render correctly. Finally, open the index.html file in any web browser, and you will have a functional, responsive star-rating widget ready for user input.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Star Rating Display</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h3>Star Rating</h3>
    <div class="rating-card">
      <div class="rating">
        <span class="star" data-value="1">★</span>
        <span class="star" data-value="2">★</span>
        <span class="star" data-value="3">★</span>
        <span class="star" data-value="4">★</span>
        <span class="star" data-value="5">★</span>
      </div>

      <div class="rating-value">0.0</div>
      <div class="rating-label">Click to rate</div>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                .rating-card {
  background: var(--card-bg);
  padding: 40px;
  border-radius: var(--card-radius);
  width: var(--card-width);
  margin: auto;
  text-align: center;
  box-shadow: 0 20px 50px var(--shadow-color);
}

.rating {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 42px;
  margin-bottom: 20px;
}

.star {
  color: var(--star-default);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.15s ease;
}

.star.active,
.star:hover {
  color: var(--star-active);
  transform: scale(1.1);
}

.rating-value {
  font-size: 44px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.rating-label {
  font-size: 14px;
  color: var(--text-muted);
}

JAVASCRIPT


                const stars = document.querySelectorAll(".star");
const ratingValue = document.querySelector(".rating-value");

let selectedRating = 0;

stars.forEach((star) => {
  star.addEventListener("mouseenter", () => {
    const value = star.dataset.value;
    highlightStars(value);
    ratingValue.textContent = value + ".0";
  });

  star.addEventListener("mouseleave", () => {
    highlightStars(selectedRating);
    ratingValue.textContent = selectedRating ? selectedRating + ".0" : "0.0";
  });

  star.addEventListener("click", () => {
    selectedRating = star.dataset.value;
    highlightStars(selectedRating);
    ratingValue.textContent = selectedRating + ".0";
  });
});

function highlightStars(rating) {
  stars.forEach((star) => {
    star.classList.toggle("active", star.dataset.value <= rating);
  });
}

MENU

INFORMATION & CODE